摘要：注意指令前面需要加，對指令傳遞數(shù)據(jù)賦值使用例如約定速成加上，表示自定義指令不要使用駝峰式命名。需要通過方法實現(xiàn)自定義指令注冊完成。

vue

Vue.js 構(gòu)建數(shù)據(jù)驅(qū)動的web界面庫。集中實現(xiàn)MVVM 的 VM層。容易與其他庫或項目整合

通過盡可能簡單的API實現(xiàn)相應(yīng)的數(shù)據(jù)綁定和組合的視圖組件
核心：相應(yīng)的數(shù)據(jù)綁定系統(tǒng)， 數(shù)據(jù)與DOM保持同步
數(shù)據(jù)驅(qū)動的視圖，普通的HTML模板中使用特殊的語法講DOM"綁定"到底層數(shù)據(jù)

整個程序分為：

全局設(shè)計：包括全局接口，默認選項

VM實例設(shè)計: 包括接口設(shè)計(VM原型)，實例初始化過程設(shè)計()

deps里存在的是各個響應(yīng)數(shù)據(jù)依賴對象的引用因此可以手動改動響應(yīng)數(shù)據(jù)的訂閱依賴。

簡介

Vue是一個類，想獲取該類的實例化對象需要通過new

// model
var data = {
    info: "pink"
}

//vm 實例
var vm = new Vue({
    el: "#app",
    data: data
});

整個實例初始化過程中，最主要的就是把數(shù)據(jù)(Model) 和視圖(View)建立聯(lián)系

通過observer對data進行監(jiān)聽，并且提供訂閱某個數(shù)據(jù)項的變化的能力

把template解析成一段document fragment,然后解析成其中的directive，得到每一個directive所依賴的數(shù)據(jù)項及更新方法

通過watcher把上述兩部分結(jié)合起來，把directive中的數(shù)據(jù)依賴訂閱在對應(yīng)數(shù)據(jù)結(jié)構(gòu)的observer，當(dāng)數(shù)據(jù)變化的時候，就會觸發(fā)observer,進而觸發(fā)相關(guān)依賴對應(yīng)的視圖更新方法，最后達到模板原本的關(guān)聯(lián)效果。

整個VM實例核心，通過observer,directive(parser),watcher。

Vue生命周期

module.exports = {
  template: require("list.html"),

  data: function(){
      return {items:[{"id":1,"name":"hello11"},{"id":2,"name":"hello22"}]};
  },

  //在實例開始初始化時同步調(diào)用。此時數(shù)據(jù)觀測、事件和 watcher 都尚未初始化
  init:function(){
      console.log("init..");
  },

  //在實例創(chuàng)建之后同步調(diào)用。此時實例已經(jīng)結(jié)束解析選項，這意味著已建立：數(shù)據(jù)綁定，計算屬性，方法，watcher/事件回調(diào)。但是還沒有開始 DOM 編譯，$el 還不存在。
  created:function(){
      console.log("created..");
  },

  //在編譯開始前調(diào)用。
  beforeCompile:function(){
       console.log("beforeCompile..");
  },

  //在編譯結(jié)束后調(diào)用。此時所有的指令已生效，因而數(shù)據(jù)的變化將觸發(fā) DOM 更新。但是不擔(dān)保 $el 已插入文檔。
  compiled:function(){
       console.log("compiled..");
  },

   //在編譯結(jié)束和 $el 第一次插入文檔之后調(diào)用，如在第一次 attached 鉤子之后調(diào)用。注意必須是由 Vue 插入（如 vm.$appendTo() 等方法或指令更新）才觸發(fā) ready 鉤子。
  ready: function () {
    console.log("ready..");

  },

  //在 vm.$el 插入 DOM 時調(diào)用。必須是由指令或?qū)嵗椒ǎㄈ?$appendTo()）插入，直接操作 vm.$el 不會 觸發(fā)這個鉤子。
  attached:function(){
       console.log("attached..");
  },

  //在 vm.$el 從 DOM 中刪除時調(diào)用。必須是由指令或?qū)嵗椒▌h除，直接操作 vm.$el 不會 觸發(fā)這個鉤子。
  detached:function(){
       console.log("detached..");
  },

  //在開始銷毀實例時調(diào)用。此時實例仍然有功能。
  beforeDestroy:function(){
       console.log("beforeDestroy..");
  },

  //在實例被銷毀之后調(diào)用。此時所有的綁定和實例的指令已經(jīng)解綁，所有的子實例也已經(jīng)被銷毀。如果有離開過渡，destroyed 鉤子在過渡完成之后調(diào)用。
  destroyed:function(){
       console.log("destroyed..");
  }

};

選擇器

實例化參數(shù)中配置項中，el指代選擇器，表示該實例化對象對應(yīng)的容器元素
選擇器和jQuery中一樣的選擇器，如果有多個的時候，只會選擇第一個。

var vmzf = new Vue({
    el: ".app",
    data: data
});

數(shù)據(jù)綁定

對實例化對象綁定數(shù)據(jù)，通過data屬性綁定，也是就data是一個js對象。
data中的屬性與vue中的屬性是同步的，不論值類型的數(shù)據(jù)，還是引用類型的數(shù)據(jù)，都是同一個。(數(shù)據(jù)綁定現(xiàn)象)

當(dāng)實例化一個Vue構(gòu)造函數(shù)，會執(zhí)行Vue的init方法，在init方法中主要執(zhí)行了三部分內(nèi)容：

初始化環(huán)境變量

處理Vue組件數(shù)據(jù)

解析掛載組件

實現(xiàn)一個觀察者-消費者(訂閱者)模式來實現(xiàn)數(shù)據(jù)卻動視圖，通過設(shè)定對象屬性的seter/getter方法來監(jiān)聽數(shù)據(jù)的變化，而每個屬性的setter方法就是一個觀察著，當(dāng)屬性變化將會向訂閱者發(fā)送消息，從而驅(qū)動視圖更新。

構(gòu)建一個watcher最重要的是expOrFN和cb兩個參數(shù)，cb是訂閱者收到消息后需要執(zhí)行的回調(diào)。一般來說這個回調(diào)都是視圖指令更新的方法，從而達到視圖的更新。
訂閱回調(diào)也可以是一個和任何無關(guān)的純函數(shù)。一個訂閱者最重要的是要知道訂閱了什么，watcher分析expOrFn的getter方法，從而間接的獲得訂閱的對象屬性。

var data = {
    info: "pink"
}

var vmzf = new Vue({
    el: ".app",
    data: data
});

console.log( data.info === vmzf.info ); //true

VUe中的視圖的更新其實就是指令的更新，為了做到數(shù)據(jù)驅(qū)動視圖更新，需要注冊一個訂閱者訂閱數(shù)據(jù)的變化，通過回調(diào)來進行指令更新。

path解析

path解析器的狀態(tài)機
Vue.js是通過狀態(tài)機管理來實現(xiàn)對路徑的解析
狀態(tài)機表是否由數(shù)字常量組成，解析更準確的同時效率也會更高。

插值

將數(shù)據(jù)同步到view(頁面)
使用: {{ key }}

dom 和屬性都都可以插入

    {{msg}}

單次插入

將數(shù)據(jù)插入頁面中，而不能再被修改，或者重新插入新值

使用： {{*key}}

    {{*msg}}

過濾HTML標簽

將數(shù)據(jù)中的html標簽渲染到頁面中
使用：{{{key}}}

{{{msg}}}

var data = {
    msg: "success!"
}
var vm = Vue({
    el: "#app",
    data: data
});

過濾器

過濾器filter直接對插值使用
使用：{{ key | filter }}

    // 美元符號
    {{ msg | currency }}        
    // 轉(zhuǎn)大寫
    {{ msg | uppercase }}        
    // 首字母大寫
    {{ msg | capitalize }}        
    

動態(tài)插值

在插入的過程中，動態(tài)對值進行修改
插入到頁面中提前執(zhí)行一遍
使用：

computed: {
    key: function () {
        reutrn newKey;
    }
}

function 是在當(dāng)前vue實例對象上執(zhí)行，通過this可以訪問到vue實例對象上的屬性和方法。

computed: {
    
    txt: function () {
        
        return this.txt = "pink";
        
    }
    
}

數(shù)據(jù)雙向綁定

v-model 當(dāng)視圖中一些操作會修改vue中的數(shù)據(jù)，同樣， vue中的數(shù)據(jù)被修改會映射到視圖中。
使用：html標簽屬性添加v-model， 屬性值為vue綁定數(shù)據(jù)中的數(shù)據(jù)。

    
    {{msg | uppercase}}

class對象綁定

使用：v-bind：class="{className: Bollean}"
如果class綁定的數(shù)據(jù)值true，className會被添加上，否則刪除。

{{txt}}

class數(shù)組綁定

使用：v-bind:class="[data.property1, data.property2]"

{{txt}}

樣式的對象綁定

使用：v-bind:style="{key:value}"

{{txt}}

樣式的數(shù)組綁定

使用：v-bind: style="[style1, style2]"

{{ txt }}

vue模板指令

指令是模板中出現(xiàn)的特殊標記，讓處理模板的庫知道需要對這里的DOM元素進行一些對應(yīng)的處理

v-text="msg"
前綴是默認的 v-。指令的 ID 是 text，表達式是 msg。
指令告訴 Vue.js， 當(dāng) Vue 實例的msg屬性改變時，更新該 div 元素的 textContent。

條件判斷

v-if
v-else

    |
    &
    {{msg}}

多條件判斷

使用：