<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
创建非单文件组件
1.创建组件
const 变量名 = Vue.extend({里面写内容})
注意:不能写箭头函数，data使用函数data() ,不能使用data:
2.注册组件（局部使用）
component（组件） 第一个是 变量名，第二个值是 创建组件的变量名称
3.使用组件
template（写入html标签）
将注册组件的变量名写入html中 如：<school></school>
4.创建全局组件和创建局部组件操作一下，如下代码
5.注册全局组件
Vue.component('变量名',创建全局组件变量名) Vue.component('hello',assemblys)
注意事项：
1.组件名
一个单词组成：
第一种写法（首字母小写）：school
第二种写法（首字母大写）: School
多个单词组成：
第一种写法（kebab-case命名）:my-school
第二种写法（CamelCase命名）：MySchool（）需要vue脚手架支持
备注：
1.组件名尽可能回避html中已有元素名称：如：h2
2.可以使用name配置项指定组件在开发者工具中呈现的名字
2.关于组件标签
第一种写法；<school></school>
第二种写法：<school/>备注：不用使用脚手架时，<school/>会导致后续组件不能渲染
3.简写方式
const school = Vue.extend(options) 可简写为：const school ={options}
-->
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<!-- 编辑组件标签 -->
<school></school>
<hr>
<student></student>
<hr>
<hello></hello>
</div>
<script>
Vue.config.productionTip=false
//创建局部组件
const xuexiao = Vue.extend({
name:'wei',
template:
`
<div>
<h3>学校名称:{{school.name}}</h3>
<h3>学校地址:{{school.address}}</h3>
</div>
`,
data(){
return {
school:{
name:'轩染学校',
address:'北京'
}
}
}
})
const student = Vue.extend({
template:
`
<div>
<h3>学生名称:{{name}}</h3>
<h3>年龄:{{age}}</h3>
</div>
`,
data(){
return{
name:'wei',
age:19
}
}
})
//创建全局组件
const assemblys = Vue.extend({
template:
`
<div>
<h3>{{name}}</h3>
</div>
`,
data(){
return{
name:'我是全局组件，可以用我'
}
}
})
//注册全局组件
Vue.component('hello',assemblys)
new Vue({
el:'#root',
//注册组件(局部注册)
//components 代表着引用那些组件
components:{
school:xuexiao,
student
},
// data:{
// school:{
// name:'轩染学校',
// address:'北京'
// },
// student:{
// name:'wei',
// age:19
// }
// }
})
</script>
</body>
</html>
浙公网安备 33010602011771号