// 第一步创建模板==html
<template>
<div class="demo">
学校名称:{{name}}
学校地址:{{address}}
<button @click="btn">点击显示学校名称</button>
</div>
</template>
// 第二步创建js模块
<script>
// 向外暴露文件
export default {
name:"school",
data() {
return {
name:"江西信息",
address:"青云谱区",
}
},
methods: {
btn(){
alert(this.name);
}
},
// 学生组件 | |
const student = Vue.extend({ | |
name:"student", | |
template:` | |
<div> | |
<h1>学生姓名:{{name}}</h1> | |
<h1>学生年龄:{{age}}</h1> | |
<button @click="btn">点击</button> | |
</div> | |
`, | |
data() { | |
return { | |
name:"张三", | |
age:18 | |
} | |
}, | |
methods:{ | |
btn(){ | |
console.log("触发了点击"); | |
console.log(this); | |
} | |
} | |
}) | |
// 学校组件 | |
const scholl = Vue.extend({ | |
name:"scholl", | |
template:` | |
<div> | |
<h1>学校:{{name}}</h1> | |
<h1>班级:{{age}}</h1> | |
<student></student> | |
</div> | |
`, | |
data() { | |
return { | |
name:"江西信息", | |
age:"就业班" | |
} | |
}, | |
components:{ | |
student | |
}, | |
methods:{ | |
btn(){ | |
console.log("触发了点击111111111111"); | |
console.log(this); | |
} | |
} | |
}) | |
// 学习课程 | |
const curriculum = Vue.extend({ | |
name:"curriculum", | |
template:` | |
<div> | |
<h1>课程:{{name}}</h1> | |
</div> | |
`, | |
data() { | |
return { | |
name:"学习vue.js", | |
} | |
}, | |
components:{ | |
student | |
}, | |
methods:{ | |
} | |
}); | |
// 注册app | |
const app = Vue.extend({ | |
name:"app", | |
template:` | |
<div> | |
<scholl></scholl> | |
<curriculum></curriculum> | |
</div> | |
`, | |
data() { | |
return { | |
} | |
}, | |
components:{ | |
scholl, | |
curriculum | |
}, | |
methods:{ | |
} | |
}) | |
const vm = new Vue({ | |
// template通过模板形式覆盖掉原本的模板的信息 | |
// template:` | |
// <app></app> | |
// `, | |
el:"#app", | |
data() { | |
return { | |
} | |
}, | |
// 局部注册 | |
components:{ | |
app | |
}, | |
methods: { | |
}, | |
}) | |
// VueComponents是Vue.extend生成的,并不是创建的 | |
// 使用定义的组件名称,vue会new VueComponents | |
// Vue.extend创建的都是独立的组件 | |
// 每个组件中的this指向自己的VueComponents | |
// new Vue中this指向Vue实例 | |
// VueComponents简称vc组件实例对象 | |
// VueComponents.prototype.__proto__ == Vue.prototype | |
console.log(student); | |
console.log(vm); |