组件化步骤
1、创建Vue组件
const school = Vue.extend({
template:
`<div>
<h2>学校名称{{schoolName}}</h2>
<h2>学校地址{{schoolAddress}}</h2>
</div>`,
data(){
return {
schoolName:'xx小学',
schoolAddress:'shandong'
}
}
})
2、注册Vue组件
new Vue({
el:'root',
components:{
school,
student
}
})
3、使用Vue组件
<school></school>
第二步，也可以全局注册组件
Vue.component('school',school);
内置关系
只要是函数，里边都有一个prototype属性。【显示原型属性】
function Demo(){
this.a = 1;
this.b = 2;
}
const d = new Demo();
console.log(Demo.prototype) //显示原型属性
console.log(d.__proto__); 隐式原型属性
Demo.prototype.x = 99;
VueComponent.prototype.__proto__ === Vue.prototype
VueComponent.prototype.
proto
=== Vue.prototype为什么要有这个？
让组件实例对象VueComponent(VC)可以访问到Vue原型上的属性和方法。
Vue.prototype.x=99;
VC中可以获取this.x
单文件组件
xxx.vue文件，里边只认三种标签 <template> <script> <style> 分别代表html js css
案例:School.vue
<template>
<div class="demo">
xxxxxxxxxxxxxxxxxxxxxx
</div>
</template>
<script>
export default{
name:'School',
data(){
return{
schoolName:'xxx'
}
},
methods:{
showName(){
}
}
}
</script>
<style>
.demo{
}
</style>
App.vue 【引入School.vue Student.vue】
template标签里边，必须有根元素，Div
main.js
import App from './App.vue'
new Vue({
el:'root',
components:{
App
},
})
index.html，注意先后顺序
<div id="root">
<App></App>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript" src="./main.js"></script>
