vue两大特性

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. 全局注册

      • Vue.component( 组件的名称，组件的配置项 )
      • 组件必须先注册在使用（ 实例（组件） 范围内使用 ）

   2. 局部注册

      • 局部注册： 在组件中用一个components的配置项目来表示
        • 例：

        var Hello = Vue.extend({
        template: '<div> 这里是局部注册 </div>'
           })
        
        new Vue({
        el: '#app',
        components: {
           // key: value  key是组件名称   value是组件配置项
           // 'gabriel-yan': Hello,
           'Hello': Hello
        }
        })
        

      • 只能在注册的范围内使用，其他地方是不能使用的

   3. 全局注册和局部注册的简写

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

5. 组件的一些特殊使用规则 【 is 规则】

   • is规则
     • ul>li ol>li table>tr>td select>option

   如上直属父子级如果直接组件以标签化形式使用，那么就会出现bug

   • 解决： 使用is规则: 通过is属性来绑定一个组件
   • 案例：

   html结构：
   
      <div id="app">
         <table>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            </tr>
            <tr is = "Hello"></tr>
         </table>
      </div>
      <tr is = "Hello"></tr>
   

   javascript：
   
      Vue.component('Hello',{
         template: '<tr> <td> 4 </td> <td> 2 </td><td> 3 </td></tr>'
      })
   
      new Vue({
         el: '#app'
      })
   

6. 组件的template

   html结构：
   
        <div id="app">
           <h3> 实例范围内使用 </h3>
           <template>
              <div>
              <ul>
                 <li>1</li>
                 <li>2</li>
                 <li>3</li>
              </ul>
              </div>
           </template>
   
   
           <h3> 使用 hello  组件</h3>
   
           <Hello></Hello>
   
        </div>
        <h3> 实例范围外使用 </h3>
        <template id="hello">
           <div>
              <ul>
              <li>1</li>
              <li>2</li>
              </ul>
           </div>
        </template>
   

   javascript：
   
        Vue.component('Hello',{
        template: '#hello'
     })
   
     new Vue({
        el: '#app'
     })
   

   1. 实例范围内使用
      template中的内容被当做一个整体了，并且template标签是不会解析到html结构中的
      2. 实例范围外使用
      实例范围外template标签是不会被直接解析的

   组件要想使用template使用，我们采用第二种

   但是使用第二种template使用后，有个弊端，template标签结构会在html文件中显示

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