vue概念性知識，看完內心對vue就有譜了

vue的理解

最近忙於寫基於element框架的項目，對於vue也是直接上手，使用過程當中跌跌撞撞，可是總歸有收穫。
記錄下本身學習心得。堅持寫博客~加油，時間長不更新博客，都怕本身不會了~~

認識vue

是漸進式的框架，只關注view視圖，vue是數據驅動，因此不要操做DOM

vue除了包含主要的vue.js以外，還有生態庫如vue-router、vue-resource等。一些相關庫能夠在官網找到

vue的兩個核心

響應的數據綁定

當數據發生改變->視圖會自動更新

利用Object.definedProperty中setter/getter代理數據，監控數據的操做

組合的視圖組件

ui頁面映射爲組件數

劃分組件可維護、可重用、可測試

虛擬DOM

js運行的很快，可是大量的操做和更新DOM是很慢的，須要在數據更新以後從新渲染頁面，這樣就形成在沒有改變數據的
地方也會從新的渲染DOM，形成資源浪費。

虛擬DOM：在內存中生成與真實DOM對應的對象，就是虛擬DOM

在數據改變是，經過對比old虛擬DOM和new虛擬DOM，只關注修改的部分，對真實的DOM節點只更新修改的部分。

MVVM模式

M：Model數據模型
V：view視圖模板
V-M：視圖模型，實現M和V的聯繫 實現雙向綁定，M和V是各自獨立的

vue代理data數據

每個vue實例都會代理data對象裏全部的屬性，這些被代理的屬性是響應式的，可是新添加的屬性不具有
響應功能，改變後不會更新視圖。如下是在codePen上寫的在線例子，先添加的屬性，改變後不會更新視圖

http://codepen.io/shenyuanyua...

聲明式渲染

vue的雙向數據綁定，就是一種聲明式的渲染，你只須要按照規定，就能夠顯現綁定，而不須要關注是怎麼實現的

聲明式渲染

直接調用方法，而不關注怎麼實現

命令式渲染

一步一步的執行，須要關注怎麼實現

模板

html模板

1. 基於DOM模板，內容是一些html的標籤

2. 插值

• 文本模板

• 使用v-html來解析成htmlDOM

• 能夠寫表達式，但不能寫語句

模板中儘可能少的插入邏輯，若是須要邏輯計算，可使用屬性計算

template字符串模板

vue實例下有對應的屬性template,模板會替換掛載元素，二者不能共存，template下只能有一根元素

模板render函數

render(createElement){
    //createElement函數的三個參數：標籤名 數據對象 子元素
    return createElement(
        "ul",//標籤名 數據對象 子元素
        {
            class : {//綁定class
                bg : true,//bg這個class的樣式會被渲染
            },
            style : {//綁定樣式
                fontSize : "20px",
            },
            attrs : {//添加自定義屬性
                abc : "haha",
            },
            domProps : {//標籤的屬性
                innerHTML : "我是html",
            }
        },
        [
            createElement("li",1),
            createElement("li",1),
            createElement("li",1)
        ]
    );
}

vue構建方式

開始以爲獨立構建和運行時構建很難理解，可是當你發現你看完模板編譯這塊，構建方式就很容易理解了

獨立構建

獨立構建包含模板編譯器並支持 template 選項。 它也依賴於瀏覽器的接口的存在，因此你不能使用它來爲服務器端渲染。

運行時構建

運行時構建不包含模板編譯器，所以不支持 template 選項，只能用 render 選項，但即便使用運行時構建，在單文件組件中也依然能夠寫模板，由於單文件組件的模板會在構建時預編譯爲 render 函數。

npm導出的包默認是運行時構建，若是要改成獨立構建，webpack需配置以下代碼

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}