一、组件化编程
1. 对比传统编写与组件化编程(下面两个解释图对比可以直观了解)
2. 组件化编程区分
3. 非单文件组件的引出
<div id="root">
<h2>学校名称:{{schoolName}}</h2>
<h2>学校地址:{{addrss}}</h2>
<hr />
<h2>学生名称:{{studentName}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
//vue数据
const vm = new Vue({
el: "#root",
data: {
schoolName: "清华",
addrss: "北京",
studentName: "李华",
age: "18",
},
});
4. 单文件组件的使用
5. 单文件组建的注意点
6. 组件的嵌套
7. Vue.Component(组件实例化)
8. 重要的内置关系
9. 单文件组件方式:.vue后缀
<template>
<div class="demo">
<h2>学校名称:{{ schoolName }}</h2>
<h2>学校地址:{{ address }}</h2>
<button @click="showName">点我提示学校名</button>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
schoolName: "清华",
address: "北京",
};
},
methods: {
showName() {
alert(this.schoolName);
console.log(this); //指向当前组件
},
},
};
</script>
<style>
.demo {
background-color: pink;
}
</style>
<template>
<div>
<School></School>
<Student></Student>
</div>
</template>
<script>
// 先引入组件
import School from './School.vue'
import Student from './Student.vue'
// 再进行对外暴露并注册组件
export default {
name: 'App',
components: {
School,
Student
}
}
</script>
<style>
</style>