Vue两大特性指令和组件(组件创建与注册)

指令 – 用来操作dom
组件 – 组件是html css js 等的一个聚合体
为什么要使用组件？
1. 组件化
  1. 将一个具备完整功能的项目的一部分进行多处使用
  2. 加快项目的进度
  3. 可以进行项目的复用
2. 要想实现组件化，那么我们使用的这一部分就必须是完整的，我们把这个完整的整体就称之为组件
3. 插件： index.html img css js
4. 如果能将 html css js img 等多个部分放在一起，那该有多好，vue将这个聚合体的文件称之为，单文件组件（ xx.vue ）

4. 基础的组件创建

全局注册

方式一

      <!--1.1使用Vue.extend来创建全局的Vue组件-->
         var tem1 = Vue.extend({
            template:'<h3>这是使用 Vue.extend 创建的组件</h3>' //指定组件要展示的HTML结构
         });
      <!--1.2使用Vue.component('组件名称',创建出来的组件模板对象)-->
         Vue.component('myTem1',tem1);
         /*
         <!--注意-->
            使用 Vue.component() 定义全局组件的时候，
            组件名称使用 驼峰命名，则在引用组件的时候，需要把大写改为小写，并且用 '-'将单词连接
            组件名称不使用驼峰命名，则直接拿名称来使用即可
         */
         <!--组合方式-->
         Vue.component('myTem1',Vue.extend({
            template : '<h3>这是使用 Vue.extend 创建的组件</h3>'
         }))

         <div id="app">
            <!-- 如果要使用组件，直接把组件的名称以 HTML 标签的形式，引入到页面中-->
            <my-tem1> </my-tem1>
         </div>

方式二
直接使用Vue.component()

   Vue.component('mycom2',{
   template : '<h3>这是使用 Vue.component 创建的组件</h3>'
   })

注意：只能存在一个根目录的标签！

方式三
最好用普遍的方式

   1.定义组件：
      Vue.component('mycom3',{
               template : '#tem1'
      });

   <!--2.在被控制的 #app 外面使用 template 元素，定义组建的HTML模板结构-->
      <div id="app">
            <!--3. 引用组件 -->
            <mycom3></mycom3>
      </div>

      <template id="tem1">
         <div>
               <h1>这是 template 元素</h1>
               <span>这种方式好用</span>
         </div>
      </template>

局部注册

   new Vue({
      el: '#app',
      components: {
         'GabrielYan': {
         template: '<div> 这里是局部注册 </div>'
         }
      }
   })

必须掌握的
1. vue是如何扩展组件的？
  - 首先，Vue是构造器函数,Vue.extend()是vue用来扩展 vue功能（组件）的;
2. vue为什么要以标签的形式使用组件
  - vue借鉴了react，react中组件是以标签的形式使用的，
3. 组件使用为何要注册
  - 为了符合 html / html5的规则，所以组件的标签化使用必须注册，
  - 注册说白了就是用来解析这个标签化的组件未html能识别的标签（组件使用前必须进行注册）；
组件的一些特殊使用规则【 is 规则】
组件的template
1. 实例范围内使用
  template中的内容被当做一个整体了，并且template标签是不会解析到html结构中的
2. 实例范围外使用
  实例范围外template标签是不会被直接解析的
组件要想使用template使用，我们采用第二种
但是使用第二种template使用后，有个弊端，template标签结构会在html文件中显示

解决：使用webpack、gulp等工具编译，将来要用vue提供的单文件组件

Vue两大特性指令和组件(组件创建与注册)

猜你喜欢