vue組件 - JavaShuo

todolist案例

佈局問題

前端的UI組件庫

組件

組件化

組件化是當今最爲流行的一種可複用性增長的方法，隨着當今前端開發的複雜度更加，這個組件化變得愈來愈流行

組件的基礎

組件是一個具有html css img js …等的一個聚合體javascript
組件的表現形式就相似一個標籤css
組件至少得有模板，模板用template表示，至關於el，可是不能用el，由於被根實例佔用了html
Vue.js經過Vue.extend() 方法來擴展組件的使用前端
Vue.extend( options ) 裏面的options參數和 Vue(options) 的options參數幾乎是一致的java
new Vue出來的 ViewModel( 視圖模型 ) 也是一個組件，咱們稱之爲 ‘根實例組件’ ，叫 ‘Root’ 組件app
Vue中組件的表現形式是相似於標籤的，要想像標籤同樣使用，就必須得符合 h5 的規則，也就是必需要進行組件的註冊組件化
組件的註冊有兩種形式佈局
- 全局註冊
  1. 格式： Vue.component(組件的名稱，組件的配置項)
  2. 組件的命名規則
  3. 舉例：
    - Father Hello
    - my-button
- 局部註冊
  1. 格式：
  2. 寫在組件內註冊
  3. 舉例：
```
- new Vue({
      componens: {
        組件名: 組件配置項
      }
    })
```
組件必須先註冊在使用spa
組件中的模板須要使用一個叫作template的配置項表示code

組件的配置項能夠簡寫，不須要使用 Vue.extend(options),能夠直接將options寫在組件的註冊中

<div id="app"> <Haha></Haha><!--組件的表現形式就是一個標籤 --> </div>

//簡寫形式 全局註冊 Vue.component(組件的名稱，組件的配置項) 通常用簡寫 Vue.component('Haha',{ template:'<h3>xixixiixixixi</h3>' }) //3.組件的使用 new Vue({//是一個根實例組件，叫Root組件 el:'#app', })

template組件中有且僅有一個根元素

<div id="app"> <Hello></Hello> </div> <template id="hello"> <div> <div> <h3> hello 預祝端午節happy </h3> </div> <div> <h3> hello 預祝端午節happy </h3> </div> </div> </template>

new Vue({ el: '#app', components: { 'Hello': { template: '#hello' } } })

組件使用時有規則的：
1. 好比特殊的一些標籤： ul li ol li table tr td dl dt dd select option …這類型標籤，是規定了它們的直接子元素，當咱們將組件寫入這類型標籤的時候，就會發現有問題
2. 解決：在直接子元素身上，經過 is 屬性來綁定一個組件
3. 舉例：
```
<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr>  <tr is = "Hello"></tr> </table> 
```

組件嵌套

全局註冊：
- 要將子組件的組件名寫在父組件的template中

<div id="app"> <Father></Father> </div> <template id="father"> <div> <h3> father </h3> <hr> <Son></Son> </div> </template> <template id="son"> <h3> son </h3> </template>

Vue.component('Father',{ template: '#father' }) Vue.component('Son',{ template: '#son' }) new Vue({ el: '#app', })

局部註冊

<div id="app"> <Father></Father> </div> <template id="father"> <div> <h3> father </h3> <hr> <Son></Son> </div> </template> <template id="son"> <h3> son </h3> </template>

new Vue({ el: '#app', components: { 'Father': { template: '#father', components: { 'Son': { template: '#son' } } } } })