摘要：結果對象語法。當然，使用并不是首選，只有在構建中大型單頁面應用時，考慮到全局的狀態(tài)管理，自然就會想到。頁面路由使用創(chuàng)建單頁面應用，就可以使用目前版本是，把組件映射到對應的路由，通過改變來渲染不同的頁面。

Vue2.x 總結

Vue 是一套用于構建用戶界面的漸進式框架

也意味著，既可以把VUE作為該應用的一部分嵌入到一個現(xiàn)成的服務端應用，或者在前后端分離的應用中，利用Vue 的核心庫及其生態(tài)系統(tǒng)，把更多的邏輯放在前端來實現(xiàn)。

A Progressive Framework

漸進式框架

與Vue相比，React學習曲線陡峭，在學習React之前，需要了解JSX和ES2015,當然入門后，發(fā)現(xiàn)還要學習React全家桶。而Vue就可以在簡單閱讀了文檔后，開始構建應用程序。

這就要得益于Vue主張的 漸進式。
可以簡單看下官方給出這張圖：

可以看出來，主要是介紹了Vue設計思想，就是框架做分層設計，每層都可選，可以多帶帶引入，為不同的業(yè)務需求制定靈活的方案。主張最少，不會多做職責以外的事。

Vue作者尤雨溪的觀點,Vue設計上包括的解決方案很多，但是使用者完全不需要一上手，就把所有東西全都用上，因為完全沒有必要，一般都是根據(jù)項目的復雜度，在核心的基礎上任意選用其他的部件，不一定要全部整合在一起。

這樣漸進式的解決方案，使得學習成本大大減少了。

聲明式渲染

也就是說，DOM狀態(tài)只是數(shù)據(jù)狀態(tài)的一個映射，基本所有的框架都已經(jīng)認同了這個看法，Vue也是主張 數(shù)據(jù)驅動狀態(tài)。

說到這里，基本都會提到現(xiàn)在主流的MVVM的模式。

采用了雙向數(shù)據(jù)綁定的思想，基本可以分為三層：

M(Model,模型層)，負責業(yè)務數(shù)據(jù)相關。

V(View,視圖層)，視圖相關，展示給用戶的交互界面，同時捕獲用戶的操作

VM(ViewModel, V與M連接的橋梁，也可以看做控制器)。

基于這個思想，Vue從一開始就利用ViewModel與view，model進行交互

ViewModel是Vue.js的核心，它是一個Vue實例，作用在某個HTML元素上，一般都是指定 id= app的元素，圖中 的DOM listeners 和Data Bindings可以看做兩個工具，它們是實現(xiàn)雙向數(shù)據(jù)綁定的關鍵。

從用戶(View)角度看，DOM Liisteners利用在相應的元素上添加事件綁定，捕獲用戶的點擊，滑動等手勢動作，在事件流中改變對應的Model。比如 常用的 v-model 指令，就是捕獲表單元素的input，change等事件，改變相應的綁定值。

從Model方向看，Data Bindings則將操作的數(shù)據(jù)變化，反應到view上。比如通過ajax 從后臺獲取的數(shù)據(jù)，可以刷新數(shù)據(jù)列表，反應到用戶界面。這也是實現(xiàn)雙向數(shù)據(jù)綁定的關鍵。

Vue2中是通過Object.definedProperty方法中定義的getters和 setters構造器來實現(xiàn)數(shù)據(jù)響應的?？梢院喕略创a中的實現(xiàn)：

   Object.defineProperty(obj, key, {
         enumerable: true,
         configurable: true,
         get: function reactiveGetter () {
            return value
         },
         set: function reactiveSetter (newVal) {
             var value = getter ? getter.call(obj) : val;
             /* eslint-disable no-self-compare */
             if (newVal === value || (newVal !== newVal && value !== value)) {
               return
             }
             /* eslint-enable no-self-compare */
             if ("development" !== "production" && customSetter) {
               customSetter();
             }
             if (setter) {
               setter.call(obj, newVal);
             } else {
               val = newVal;
             }
             childOb = !shallow && observe(newVal);
             dep.notify();
           }
       });
   }

通過這種方法定義對象obj上的某個屬性，每次獲取屬性值的時候就，會主動觸發(fā)get對應的回調(diào)函數(shù)，然后給該屬性賦值時，就會觸發(fā)里面的set對應的回調(diào)函數(shù)，在set回調(diào)函數(shù)里面，加入了dep.notify()方法，然后可以看下這個方法

notify () {
 // stabilize the subscriber list first
 const subs = this.subs.slice()
 for (let i = 0, l = subs.length; i < l; i++) {
   subs[i].update()
 }
}

里面的定義的常量subs每次深拷貝this.subs數(shù)組，數(shù)組里面保存的就是所有的subscriber訂閱者,對應的發(fā)布者就是obj里面對應的屬性，或者說是Vue中的data值。通知所有的訂閱者，數(shù)據(jù)更新了。原生js實現(xiàn)發(fā)布訂閱模式（publish/Subscribe)，可以參考這里

常用基礎語法 hello world

  
  
    
      
      
      
    
    
      

        {{message}}
      
      
    
  

這樣就簡單創(chuàng)建了一個Vue 應用，數(shù)據(jù)message 和DOM頁面產(chǎn)生了關聯(lián)，類似html模板引擎，把相應的數(shù)據(jù)渲染到頁面中。

指令

指令 (Directives) 是帶有 v- 前綴的特殊屬性，這些特殊屬性可以響應式的作用域DOM,

v-if 接受Boolean 類型,比如：

現(xiàn)在你看到我了

，通過seen的真假來插入/移除< p>元素。 這里判斷的時候使用 === 全等，seen = “false” 的時候，也會插入

v-bind,響應式的更新HTM屬性。完整形式... 。 縮寫形式...。 常用于改變dom的style, class ,href ,src 等屬性。 動態(tài)綁定的屬性可以寫成 :屬性名="屬性值"

v-on，綁定點擊事件,比如 完整形式...，簡寫形式 ..., doSomething對應的指向methods里面定義的函數(shù)。 注意，除非在需要傳遞參數(shù)的時候，寫成 @click = "doSomething($event,args1,args2)",$event代表事件對象，args代表自定義參數(shù)

style or class

將v-bind用于class和style時，Vue.js做了專門的增強，表達式結果的類型除了字符串之外，還可以是對象或數(shù)組。

綁定HTML Class

直接賦值。

< div :class="className"> 

   < div class="static" :class="{active:isActive,"text-danger":hasError}" />