非单文件组件
一个文件中包含有n个组件
Vue中使用组件的三大步骤
1. 定义组件（也就是创建组件）
2. 注册组件（这里有局部注册和全局注册）
3. 使用组件（编写组件标签）
注册组件（局部注册）
靠new Vue的时候传入components选项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本使用</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!--<h2>学校名称：{{schoolName}}</h2>-->
<!--<h2>学校名称：{{address}}</h2>-->
<!--第三步：编写学校组件标签-->
<xuexiao></xuexiao>
<hr>
<!--<h2>学生姓名：{{studentName}}</h2>-->
<!--<h2>学生年龄：{{age}}</h2>-->
<!--第三步：编写学生组件标签-->
<xuesheng></xuesheng>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
// 第一步：创建school组件
const school = Vue.extend({
// 这里需要注意，组件定义时一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪一个容器
// el:"#root",
template:'<div>' +
'<h2>学校名称：{{schoolName}}</h2>' +
'<h2>学校名称：{{address}}</h2>' +
'</div>',
// 在组件的使用中，data必须使用以下的函数式写法，否则会报错
data(){
return {
schoolName:"东华理工大学",
address:"江西南昌"
}
}
})
// 第一步：创建student组件
const student = Vue.extend({
template:'<div>' +
'<h2>学生姓名：{{studentName}}</h2>' +
'<h2>学生年龄：{{age}}</h2>' +
'</div>',
data(){
return {
studentName:"马铃薯",
age:26
}
}
})
// 创建vm
new Vue({
el:"#root",
// data(){
// return{
// schoolName:"东华理工大学",
// address:"江西南昌",
// studentName:"马铃薯",
// age:26
// }
// }
// 第二步：注册组件（局部注册）
components:{
xuexiao:school,
xuesheng:student
}
})
</script>
</body>
</html>
注册组件（全局注册）
靠Vue.component("组件名",组件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本使用</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!--第三步：编写hello组件标签-->
<hello></hello>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
// 第一步：创建hello组件
const hello = Vue.extend({
// 这里需要注意，组件定义时一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪一个容器
// el:"#root",
template:'<div>' +
'<h2>你好啊，{{name}}</h2>' +
'</div>',
// 在组件的使用中，data必须使用以下的函数式写法，否则会报错
data(){
return {
name:"好久不见！"
}
}
})
// 第二步：注册组件（全局注册）
Vue.component("hello",hello)
// 创建vm
new Vue({
el:"#root",
})
</script>
</body>
</html>
组件名的注意事项
一个单词组成：
1）第一种写法（首字母小写）：school
2）第二种写法（首字母大写）：School
多个单词组成：
1）第一种写法（kebab-case命名）：my-school
2）第二种写法（CamelCase命名）：MySchool（这里需要Vue脚手架支持）
备注：
1）组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
2）可以使用name配置项指定组件在开发者工具中呈现的名字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>几个注意点</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h1>{{msg}}</h1>
<!--第三步：使用组件标签-->
<!--<School></School>-->
<my-school></my-school>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
// 第一步：创建组件
const school = Vue.extend({
// 可以使用name配置项，指定组件在开发者工具中呈现的名字
// 也就是说，只要使用了name配置项，不管注册组件时使用的名字是什么，组件在开发者工具中的名字都为Malingshu
name:"malingshu",
template:"<div>" +
"<h2>学校名称：{{schoolName}}</h2>" +
"<h2>学校地址：{{address}}</h2>" +
"</div>",
data(){
return{
schoolName:"东华理工大学",
address:"江西南昌"
}
}
})
new Vue({
el:"#root",
data(){
return{
msg:"欢迎来到马铃薯的学习空间！"
}
},
// 第二步：注册组件（局部注册）
components:{
// School:school,
"my-school":school // 组件在开发者工具中的名字为 MySchool
}
})
</script>
</body>
</html>
组件标签的注意事项
1）第一种写法：<school></school>
2）第二种写法：< school/> （这里需要Vue脚手架支持）
备注：
不实用脚手架时，<school/>会导致后续组件不能渲染
一个简写方式
const school = Vue.extend(options) 可简写为：const school = options
这是因为父组件components引入的时候会自动创建
// 创建组件 const school = Vue.extend({ // 可以使用name配置项，指定组件在开发者工具中呈现的名字 // 也就是说，只要使用了name配置项，不管注册组件时使用的名字是什么，组件在开发者工具中的名字都为Malingshu name:"malingshu", template:"<div>" + "<h2>学校名称：{{schoolName}}</h2>" + "<h2>学校地址：{{address}}</h2>" + "</div>", data(){ return{ schoolName:"东华理工大学", address:"江西南昌" } } }) // 简写 const school2 = { // 可以使用name配置项，指定组件在开发者工具中呈现的名字 // 也就是说，只要使用了name配置项，不管注册组件时使用的名字是什么，组件在开发者工具中的名字都为Malingshu name:"malingshu", template:"<div>" + "<h2>学校名称：{{schoolName}}</h2>" + "<h2>学校地址：{{address}}</h2>" + "</div>", data(){ return{ schoolName:"东华理工大学", address:"江西南昌" } } }
单文件组件
一个文件中只包含有1个组件