vue.js實例對象+組件樹

vue的實例對象

• 首先用js的new關鍵字實例化一個vue
• el: vue組件或對象裝載在頁面的位置，可通過id或class或標簽名
• template: 裝載的內容。HTML代碼/包含指令或者其他組件的HTML片段，template將是我們使用的模板

• **data:** 數據通過data引入到組件中

  在組件中的data要以函數的形式返回數據，當不同的界面用了同一個組件時，才不會以為一個組件的值發生改變而改變其他頁面的內容。

• {{ }} 雙括弧語法裡面放入數據的變數

組件註冊語法糖

• 全局組件
  A方法：

1. 調用Vue.extend()方法創建組件構造器
2. 調用Vue.component(組件標簽,組件構造器)方法註冊組件
3. 在Vue實例的作用範圍內才能夠使用組件

/*A方法全局組件1:*/
//1.Vue.extend() 創建組件構造器
var mycomponent = Vue.extend({
    /*組件內容*/
    template:…… ,
    data: ……
})
//2.Vue.component註冊組件
Vue.component('my-component1', mycomponent);

B方法（與A方法一樣，只是交簡單的寫法）：
沒有A方法中的第1步，直接調用Vue.component(標簽名，選項對象)方法

/*B方法 全局組件2:*/
Vue.component('my-component2', {
     /*組件內容*/
    template:…… ,
    data: ……
}

/*在html中的組件調用，把組件標簽直接用在html中相應的位置即可*/
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>

• 局部組件 使用components屬性
  ```javascript
  var partcomponent2 = {
  el:…… ,
  data: { …… }
  }

new Vue({
el: '#app',
data: {
……
},
components: {
/* A方法： 局部組件1 /
'part-component1': partcomponent1
}，
/B方法 局部組件2 */
'part-component2':{
el:…… ,
data: { …… }
}
})
```

• 子組件
  創建方法和上面兩種方法類似，不同的是位置是放在組件內部。

var compentChild ={
       el:……,
       data:……
}
component: {
     el: ……,
     data: {……}
     components: {
          'component-child':  componentChild
     }
}

• 內置組件

  不需要在components裡面聲明組件。而是直接用標簽。例如在如下的myHeader中使用內置組件,root-view、keep-alived等也是vue本身提供的一個內置組件。

    var myHeader = {
         template: '<component></component> <root-view></rooot-view>'
    }