<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VueComponet构造函数</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
关于VueComponet
1.school 组件本质是一个名为 VueComponet 的构造函数 且不是程序员定义的 是Vue.extend 生成的
2.我们只需要写<school></school> 或<school/> Vue解析的时候会帮我们创建school组件的实力对象
即Vue 帮我们执行 new VueComponet(options)
3.特别注意 每次调用Vue.extend 返回的都是一个全新的VueComponet！！！！！
4. 关于this 的指向
1）组件配置中
data 函数，method中的函数，watch中的函数，computed函数 他们的this 均是【VueComponet实例对象】
2）new Vue() 配置红
data 函数，method中的函数，watch中的函数，computed函数 他们的this 均是【Vue实例对象】
5. VueComponet实例对象 以后简称为vc(也可称为组件实例对象)
Vue实例对象 以后简称为vm
-->
<div id="root">
<school></school>
<hello></hello>
</div>
<script type="text/javascript">
//创建组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称{{schoolName}}</h2>
<h2>学校地址{{address}}</h2>
<button @click="showname">点我提示学校名字</button>
</div>
`,
data() {
return {
schoolName: "洛阳理工",
address: "洛阳",
};
},
methods: {
showname() {
console.log(this);
},
},
});
const test = Vue.extend({
template: `
<span>9999999</span>
`,
});
const hello = Vue.extend({
template: `
<div>
<h1>你好{{name}}</h1>
<test></test>
</div>
`,
data() {
return {
name: "smy",
};
},
components: {
test,
},
});
//console.log(school);
//console.log(hello);
//console.log(school === hello); //false
// school.a = 99;
// console.log(school.a);
// console.log(hello.a);
new Vue({
el: "#root",
data: {
name: "smy",
},
//注册组件
components: {
school,
hello,
},
});
</script>
</body>
</html>