使用自定义组件规则
1.定义组件中不要绑定el
2.data必须使用函数写法
3.注册时可以取别名,别名不可以驼峰命名,需要使用-连接,不能使用已有的标签作为名称
4.模板时只能有一个父级,只在vue2中
5.未搭建脚手架使用单标签会使后面代码都不渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<school></school>
<!-- <School></School>
<abc></abc>
<student-puls></student-puls> -->
<hr/>
<!-- <student-puls/>
<abc/> -->
<!-- <aaa></aaa> -->
<!-- <h1>11111111111</h1> -->
<!-- <studentPuls></studentPuls>不可以在不搭建脚手架使用 -->
</div>
</body>
<script src="../vue.js"></script>
<script>
// 使用自定义组件规则
// 1.定义组件中不要绑定el
// 2.data必须使用函数写法
// 3.注册时可以取别名,别名不可以驼峰命名,需要使用-连接,不能使用已有的标签作为名称
// 4.模板时只能有一个父级,只在vue2中
// 5.未搭建脚手架使用单标签会使后面代码都不渲染
Vue.config.productionTip = false;
const student = Vue.extend({
template:`
<div>
<h1>我是student组件</h1>
<ccc></ccc>
</div>
`,
})
const nameList = {
template:`
<div>
<h1>我是nameList组件</h1>
</div>
`,
}
Vue.component("ccc",nameList);
const school = Vue.extend({
template:`
<div>
<h1>我是school组件</h1>
<bbb></bbb>
</div>
`,
components:{
bbb:student
}
})
var vm = new Vue({
el:"#app",
methods: {
},
components:{
School:school,
abc:student,
"student-puls":student,
"studentPuls":student,
aaa:nameList,
}
})
</script>
</html>