Vue组件详解

Vue组件

---

• 1.了解前端组件化发展历史
  • 前后端耦合
    • 前后端不分离项目
      • 找后台搭建项目开发环境
      • 寻找项目目录中的静态资源目录
        • js
        • img
        • css
      • 同步修改css
    • 前后端分离
    • 前端团队合作项目的出现
      • 组件化为了解决多人协作冲突问题
      • 复用
• 2.组件的概念
  • 组件是一个html、css、js、img等的一个聚合体
  • 组件 - Vue的功能之一
  • 如何使用组件？

    • Vue中的组件属于扩展性功能

      • 通过Vue.extend（）来扩展：

      	ƒ Vue (options) {
      	    if (!(this instanceof Vue)
      	       ) {
      	      	  warn('Vue is a constructor and should be called with the `new` keyword');
         		 }
        		 this._init(options);
      	}
      	ƒ VueComponent (options) {
      	    this._init(options);
      	}
      

    • VueCommponet这个构造函数我们不进行new实例化，以标签化的形式展示：

      <Hello/> -->  <div></div>
      <Banner></Banner>
      

• 3.组件的命名
  • 大驼峰
  • 小写+连字符‘-’
  • 注意：如果js中定义的是大驼峰，则在html中需要携程小写加连字符，如
  • HeadTitle–>head-title
• 4.组件的注册
  • 组件中的options大体上和Vue中的options是一致的：
    • 如：data、methods、watch、computed
    • 组件是对html标签的扩展，组件是以标签的形式使用的，并且从后端慢慢演变而来的
  • 组件想要合法化，必须进行注册解析
    • 全局注册

      • 组件的标签，是不符合html标准的，因此需要解析

      • 使用tempalte关键字定义一个组件模板

        <template id="组件id">
               <div> hello 组件 </div>
        </template>
        

      • 组件的全局注册： Vue.component( 组件名，组件选项 )

        Vue.component('组件名',{
          template: '#组件id',
          methods: {
            ……
          }
        }//组件选项，可以是一个对象
        )
        

      • 在html中找到需要显示组件的地方标签化组件

    • 局部注册

      • 使用components选项

      • component:{ 组件名：组件的选项 }

      • 使用template定义组件模板

          var Hello = Vue.extend({
            template: '<div> 晚上嗨起来 </div>'
          })
        

      • 组件的局部注册：

        new Vue({
            el: '#app',
            /* 局部注册 - components选项 */
            components: {
              // 组件名: 组件的选项
              'Hello': Hello
            }
          })
        

• 5.选项的简写

  • 局部：

    new Vue{ 
    	el:'XXX ',
    	components:{
    		//组件名：组件选项
    	}
    }
    

  • 全局

      ```javascript
      Vue.component( 组件名，{
      	template:'选择器'
      } )
      ```
    

• 6.组件的template选项
  • 定义：Vue.template( '组件名'，{template:'选择器' } )
  • 在结构里写：<template id = "组件名" ><div>……</div></template>
  • 缺点：会渲染到页面中去
  • 解决方案：单文件组件
  • template使用规则：
    • 直接子元素只能有一个；
    • 在实例范围内是可以被解析的，将来不会在页面中出现，但是在实例外会被解析。
• 7.组件的使用规则：---- is规则
  • html中规定了自己的直接子元素的标签，是不能直接放组件的
  • 解决： 通过is属性绑定一个组件
  • 如table>tr>td:
  • <table> <tr is = "Hello"></tr></table>

总结

---

• 组件的三种写法/template在Vue中有哪些写法？

  • 1.字符串模板写法：直接写在Vue构造器里，这种写法比较直观，适用于html代码不多的场景

    new Vue({
    	el:'#app',
    	template:'XX'//直接定义
    })
    

  • 2.直接在tempalte标签里写（类似于写html）

    <div id = "app">
    	<template id = "XXX">
    		……
    	</template>
    </div>
    
    new Vue({
    	el:'#app',
    	template:'XXX'
    })
    

  • 3.写在script标签里，在script标签中type属性加上‘x-template’

    <script type = "x-template" id = "XX">
    	……
    </script>
    new Vue({
    	el:'#app',
    	template:'XXX'
    })