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.全局建立（也叫全局註冊）

​ 2.局部建立（局部註冊）

<div id='app'></div>
<script>
    //Vue 是構造器函數
    //Vue.extend() 是 Vue用來擴展vue功能（組件）的
    console.log(Vue) //輸出Vue的構造函數
    console.log(Vue.extend()) //輸出VumComponent的構造函數  
    
    //Vue決定不進行實例化Vue.extend(), vue借鑑了react，react中組件是以標籤的形式使用的，  
    //vue決定組件要以標籤的形式呈現
    //爲了符合html / html5的規則，因此組件的標籤化使用必須註冊，
    //註冊說白了就是用來解析這個標籤化的組件讓html能識別的標籤
    //總結: 組件使用前必須註冊
    
    
    new Vue({
        el:'#app'
    })
    
</script>

全局註冊

​ 組件必須先註冊再使用（組件範圍內使用），全局註冊就是 只須要註冊一次 能夠屢次使用（別的組件範圍也可使用）

//語法：  Vue.component(組件的名稱，組件的配置項)
        //Vue.extend() 中有options參數
        //Vue()也有options參數  兩個options基本一致

var Hello = Vue.extend({
    template:'<div>這裏是father組件</div>'
})

Vue.component('Father',Hello)

new Vue({
    el:'#app'
})

全局組件簡寫形式：
    Vue.component('Father',{
        template:'<div>這裏是father組件</div>'
    })

局部註冊

​ 注意：

​ 命名：一個單詞的大寫：注意不要和原生的h5標籤重名 好比header footer

​ 標籤名字要小寫 （若是標籤大寫的話須要帶-）好比 header-title

​ 大駝峯：GaYa 使用 ga-ya

​ 局部註冊：在組件中用一個components的配置項目來表示

​ 只能在註冊的範圍內使用，其餘地方不能使用

<div>
    <gabriel-yan></gabriel-yan> //這裏會輸出  ‘這裏是1903’
</div>

var Hello = Vue.extend({
    template:'<div>這裏是1903</div>'
})

new Vue({
    el:'#app',
    components:{
        'gabriel-yan':hello
    }
})

局部組件簡寫形式：(在Vue下面的components中寫)
  new Vue({
        el: '#app',
        components: {
            'Hello': {            //組件名
                template: '#hello'    //組件的結構
            }
        }

    })

組件的嵌套

父組件裏面放子組件 相似於dom結構中的父子結構

將子組件以標籤的形式放在父組件的模板中使用

切記 不要放在父組件內容中

錯誤的寫法:
<div id='app'>
    <Father><Son></Son></Father>
</div>

正確寫法：
<div id='app'>
    <Father></Father>
</div>

Vue.component('Father',{
    template:'<div>這裏是father組件<Son></Son></div>'
})

Vue.component('Son',{
    template:'<div>這裏是Son組件</div>'
})

嵌套局部寫法

new Vue({
    el:'#app',
    components:{
        'Father':{
            template:'<div>這裏是Father組件</div>'
            components:'Son':{
                template:'<div>這裏是Son組件</div>'
            }
        }
    }
})

組件的一些特殊使用規則

<div id='app'>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</div>


//is規則
    // ul>li    ol>li   table>tr>td     select>option
    //如上直屬父子級若是直接組件以標籤化形式使用，那麼就會出現bug
    //解決 使用is規則：用過is屬性來綁定一個組件
    // <tr is = "Hello"></tr>
    
Vue.component('Hello',{
    template:'<tr><td>1</td><td>2</td><td>3</td></tr>'
})
new Vue({
    el:'#app'
    
})

template使用：

​ 1.實例範圍內使用

​ 2.實例範圍外使用

/*

​ template使用：

​ \1. 實例範圍內使用

​ template中的內容被當作一個總體了，而且template標籤是不會解析到html結構中的

​ \2. 實例範圍外使用

​ 實例範圍外template標籤是不會被直接解析的

​ 組件要想使用template使用，咱們採用第二種

​ 可是使用第二種template使用後，有個弊端，template標籤結構會在html文件中顯示

​ 解決： 使用webpack、gulp等工具編譯，未來要用vue提供的單文件組件

*/

實例範圍內使用

<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>
  
<script> 
    Vue.component('Hello',{
    template: '#hello'
  })

  new Vue({
    el: '#app'
  })
</script>

實例範圍外使用

<h3> 實例範圍外使用 </h3>
  <template id="hello">
    <div>
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
  </template>
  
  
 <script>
    Vue.component('Hello',{
    template: '#hello'
  })

  new Vue({
    el: '#app'
  })
 </script>

總結：1.Vue中有個Vue.extend()方法是用來擴展vue功能(組件)的

​ 2.組件的使用必需要先進行註冊（防止和其餘標籤重名）

​ 3.兩種註冊方法 全局註冊 和 局部註冊

​ 全局註冊:直接用Vue全局的方法compontends

​ Vue.components('組件名'，{

​ template:'內容'

​ })

​ 局部註冊:在組件中用components的配置項目來表示（只能在註冊範圍內用）

​ new Vue({

​ el:'#app',

​ components:{內容}

​ })