Vue 学习总结笔记 (五)
文章目录
- 1. Vue 组件化编程
-
- 1.1 模块 与 组件
- 1.2 传统的编写方式 vs 组件化编写方式
- 2. 非单文件组件 和 单文件组件
- 3. 组件的使用
- 4. 组件的注意事项
- 5. 组件的嵌套
- 6. VueComponent构造函数
- 7. VueComponent和Vue实例对象有一个重要的内置关系！
- 8. 单文件组件
-
- 8.1 单文件组件的样式
- 8.2 单文件组件的命名
- 8.3 单文件组件 和 非单文件组件的对比
- 8.4 export 暴露
- 8.5 Vue组件的简化
- 8.6 App.vue组件
- 8.7 main.js
- 8.8 index.html
- 9. Vue的脚手架
-
- 9.1 Vue脚手架介绍
- 9.2 安装脚手架 和 创建启动项目
- 9.3 分析脚手架项目的结构
-
- 9.3.1 项目目录下的几个配置文件
- 9.3.2 项目目录下的node_modules 和 public 文件
- 9.3.3 项目目录下的src文件
- 9.3.4 项目目录下的public文件
1. Vue 组件化编程
1.1 模块 与 组件
什么是模块？
- 向外提供特定功能的js程序，一般就是一个js文件。
什么是组件？
- 用来实现局部(特定)功能效果的代码集合(html/css/js/image…)。
什么是模块化？
- 当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用。
什么是组件化？ - 当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。
1.2 传统的编写方式 vs 组件化编写方式
传统的编写方式：
组件化编写方式：
其实Vue中，组件就是类似与封装。
此外，组件内部也是可以嵌套的。
组件定义：实现应用中的 局部功能代码(css,html,js等)和资源(mp3,mp4等资源)的集合。
2. 非单文件组件 和 单文件组件
非单文件组件：
- 一个文件中包含有n个组件。
单文件组件：
- 一个文件中只包含有1个组件。
组件的效果就是：谁用到这个组件，它就可以直接调用。
3. 组件的使用
第一步：使用Vue.extend()来创建组件。
使用Vue.extend()创建组件的注意事项：
-
创建组件中，一定不要写el配置项，不然会报错。
原因：因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
也就是让vm来决定这个组件放到哪里就放到哪里，不能让他它自己决定。 -
组件的data配置必须要用函数式写法！
对象式的形式，因为组件可以被多个地方使用，如果是对象式的话，一方变化其他的也都会跟这变化，因为只有一个对象。
函数式的形式，就不用担心变化的问题了，因为多个地方调用函数式时，会得到多个对象，这样相互之间就不会影响了。Vue.config.productionTip = false;
//创建school组件
const school = Vue.extend({/* 注意点一：创建组件中，一定不要写el配置项，不然会报错。 原因：因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。 也就是让vm来决定这个组件放到哪里就放到哪里，不能让他它自己决定。 // el:"#root", 注意点二：组件的data配置必须是函数式。 对象式的形式，因为组件可以被多个地方使用，如果是对象式的话，一方变化其他的也都会跟这变化，因为只有一个对象。 函数式的形式，就不用担心变化的问题了，因为多个地方调用函数式时，会得到多个对象，这样相互之间就不会影响了。 */ data(){ return { schoolName:"北京大学", address:"北京" } }});
//创建student组件
const student = Vue.extend({
data(){
return {
studentName:“张三”,
age:18
}
}
})
第二步：在vm对象中，注册组件。
Vue.config.productionTip = false;
//创建school组件
const school = Vue.extend({
data(){
return {
schoolName:"北京大学",
address:"北京"
}
},
//使用template为这个组件添加上结构。
//注意每一个template必须要有并且只有一个div结构。
template:`
学校名称:{{schoolName}}
学校地址:{{address}}
`
});
//创建student组件
const student = Vue.extend({
data(){
return {
studentName:"张三",
age:18
}
},
template:`
学生姓名：{{studentName}}
学生年龄：{{age}}
`
})
//vm对象
new Vue({
el:"#root",
//使用components来注册组件（局部注册）
components:{
//这里我们定义的组件名和上面的组件定义的变量名一样，可以直接简写为一个
xuexiao:school,
xuesheng:student
}
})
第三步：编写组件标签。
创建好的组件可以在开发者工具查看：
上面注册组件都是局部注册组件，也可全局注册组件。
使用Vue.component(‘组件名’，组件变量名); 这样所有的vm对象都可以使用这个组件，不需要再在components中注册了。
4. 组件的注意事项
正常我们在组件命名可以用简写的方式。
Vue.config.productionTip = false;
//定义组件
const school = Vue.extend({
template:`
学校名称:{{name}}
学校地址:{{address}}
`,
data(){
return {
name:"北京大学",
address:"北京"
}
}
})
new Vue({
el:"#root",
data:{
msg:"欢迎学习Vue！"
},
components:{
//正常写应该是school:school ， 并且Vue的开发者工具中默认是变成大写开头的School。
school
}
})
对于多个单词组成的组件名，要如下格式：
-
一个使用首字母小写单词中间用 - 来分开的格式。例如：my-school。
-
还有一种是在vue脚手架的情况下，操作就是每个单词首字母大写例如：MySchool。（必须有vue脚手架才行）
{{msg}}
