<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>组件的嵌套</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
几个注意点
一：关于组件名
1.一个单词组成
第一种写法（首字母小写）:school
第二种写法（首字母大写）:School
2.多个单词组成
第一种写法(Kebab-case命名):my-school 需要加‘’
第二种写法(CameCase命名):MySchool(需要Vue脚手架支持)
备注
(1).组件名尽可能回避HTML中已有的元素名称 例如h2 H2 等
(2).可以使用name配置项指定组件再开发者工具中呈现的名字
二: 关于组件标签
第一种写法:<school></school>
第二种写法:<school/>
备注:不使用脚手架时,<school/>会导致后续组件不能渲染 不使用脚手架时,重复多个<school/>只会展示一个
三：一个简写的形式
const school=Vue.extend(options) 简写为const school = options
-->
<div id="root">
<!--第一种-->
<!-- <app></app> -->
</div>
<script type="text/javascript">
const student = Vue.extend({
template: `
<div>
<h2>学生姓名{{studentName}}</h2>
<h2>学生年龄{{age}}</h2>
</div>
`,
data() {
return {
studentName: "smy",
age: 18,
};
},
});
//创建组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称{{schoolName}}</h2>
<h2>学校地址{{address}}</h2>
<student></student>
</div>
`,
data() {
return {
schoolName: "洛阳理工",
address: "洛阳",
};
},
components: {
student,
},
});
const hello = Vue.extend({
template: `
<div>
<h1>你好{{name}}</h1>
</div>
`,
data() {
return {
name: "smy",
};
},
});
const app = Vue.extend({
template: `
<div>
<school></school>
<hello></hello>
</div>
`,
components: {
school,
hello,
},
});
new Vue({
el: "#root",
//div 里面全部没有了
template: `
<app></app>
`,
data: {
name: "smy",
},
//注册组件
components: {
app,
},
});
</script>
</body>
</html>