Vue有两大特性
1. 指令 – 用来操作dom
2. 组件 – 组件是html css js 等的一个聚合体
3. 为什么要使用组件?
1. 组件化
1. 将一个具备完整功能的项目的一部分进行多处使用
2. 加快项目的进度
3. 可以进行项目的复用
2. 要想实现组件化,那么我们使用的这一部分就必须是完整的,我们把这个完整的整体就称之为组件
3. 插件: index.html img css js
4. 如果能将 html css js img 等多个部分放在一起,那该有多好,vue将这个聚合体的文件称之为,单文件组件( xx.vue )
4. 基础的组件创建
1. 全局注册
2. 局部注册
3. 命名:
1. 一个单词的大写: 注意不要和原生的h5标签重名,比如 header footer Header Footer
2. 小写带- , 比如 header-title
3. 大驼峰: GabrielYan 使用 : gabriel-yan
4. 局部注册: 在组件中用一个components的配置项目来表示只能在注册的范围内使用,其他地方是不能使用的
4. 简写:
1. Vue.component('Father',{
2. template: '<div> 这里是全局注册 </div>'
3. })
4. new Vue({
5. el: '#app',
6. components: {
7. 'GabrielYan': {
8. template: '<div> 这里是局部注册 </div>'
9. }
10. }
11. })
5. 嵌套
1. 组件的嵌套
1. 父组件里面放子组件 ----》 类似于dom结构的父子级结构
1. 将子组件以标签的形式放在父组件的模板中使用
1. 切记,不要放在父组件的内容中
1. 案例:
1. <div id="app">
2. <!-- 下面这种写法是错误的 -->
3. <Father>
4. <Son></Son>
5. </Father>
6. <!-- 正确的应该是 -->
7. <Father></Father>
8. </div>
9. Vue.component('Father',{
10. template: '<div> Father <Son></Son></div>'
11. })
12.
13. Vue.component('Son',{
14. template: '<div> son </div>'
15. })
16.
17.
18.
19. new Vue({
20. el: '#app',
21. })
5. 组件的一些特殊使用规则 【 is 规则】
1. is规则
1. ul>li ol>li table>tr>td select>option
2. 如上直属父子级如果直接组件以标签化形式使用,那么就会出现bug
3. 解决: 使用is规则: 通过is属性来绑定一个组件 (<tr is = "Hello"></tr>)
6. 组件的template
1. template使用:
1. 实例范围内使用
1. template中的内容被当做一个整体了,并且template标签是不会解析到html结构中的
2. 实例范围外使用
1. 实例范围外template标签是不会被直接解析的
2. 组件要想使用template使用,我们采用第二种
3. 但是使用第二种template使用后,有个弊端,template标签结构会在html文件中显示
解决: 使用webpack、gulp等工具编译,将来要用vue提供的单文件组件