最近有很長時間沒有更新部落格了，換了公司，全部的心思都放在專案上了。通過這次專案的上線，讓我感受最深的是前後端分離後，前端頁面的模組化管理，以及前端頁面的資料邦定。在接觸vue.js之前，我之前端要用到的dom結構，都是通過拼接字串的方式進行輸出的。這種方式最大的痛點是拼接很麻煩，也不是很直觀，幾乎無法複用，和資料緊密的偶合在一起，維護不方便，太多太多的問題。在同事的推薦下，開始接觸vue.js這個開源專案。如果你不知道什麼是vue,那麼請看這裡的介紹 http://vuejs.org/ 。

vue的更新很快，從我最開始接觸時的0.11.5，到現在的0.12.7，中文版的介紹一直停留在0.11.5的版本。如果是入門，且英文不是很好的情況下，我建議還是用0.11.5的版本。

如果你之前有用過angular.js或別的雙向繫結的js庫,那麼你會有一種自來熟的感覺。當然，vue作為一個輕量的前端檢視層工具，與angular相比，還是有很明顯的區別的：

1. vue僅僅是mvvm中的view層，只是一個如jquery般的工具庫，而不是框架，而angular而是mvvm框架。

2. vue的雙向邦定是基於ES5 中的 getter/setters來實現的，而angular而是由自己實現一套模版編譯規則，需要進行所謂的“髒”檢查，vue則不需要。因此，vue在效能上更高效，但是代價是對於ie9以下的瀏覽器無法支援。

3. vue需要提供一個el物件進行實始化，後續的所有作用範圍也是在el物件之下，而angular而是整個html頁面。一個頁面，可以有多個vue例項，而angular好像不是這麼玩的。

4. vue真的很容易上手，學習成本相對低，不過可以參考的資料不是很豐富，官方文件比較簡單，缺少全面的使用案例。高階的用法，需要自己去研究原始碼，至少目前是這樣。

下面開始寫一些的使用經驗：

vue在構建的時候，需要使用new進行例項化，比如: 

var view = new Vue({
   el : '#container'
});

el 根據官方api的介紹，可以是String | HTMLElement | Function, 一般來說，傳一個id比較常用，這一步就是告訴vue,從這個節點開始，後面的內容就於vue開始接管了。

接管之後有些什麼好處呢? 

1. ajax取出的內容，再也不用拼接好再innerHTML到頁面上了，直接在相要出現的地方寫上{{資料}}或v-text="資料"或v-html="資料" ，就會自動顯示出來。

2. 對於表單來說，特別input之類的元素，不再需要自己監聽事件了。比如:

<input type="text" v-mode="name">
 <div>這裡會自動顯示input的value:{{name}}</div>

這時，只要input中內容有變化，name的值就會自動在div中顯示出來。這個在手機上的特別方便，不需要判斷keycode,也不需要判斷event是keyup還是keydown,

利用這個特性，進行表單元素的驗證，也是很方便的。結合v-if,v-show,v-style,v-class這些控制器，可以實現以往，我們要寫很複雜的ajax或者js才能實現的功能。

關於它們的用法，看看官網的示例，自己照著寫一遍就知道了。只是關於v-class，官方的例子不是很清楚，我這裡補充一下：

<div v-class="
     hide ： isHide,
     red   : isRed     
"></div>

javascript:

new Vue({

       data:{
           isHide:true,
           isRed:true
       }
})

這裡的意思是說，當vue中的isHide是true的時候，就給div用hide的樣式名,同理,如果isRed為true的時候，red的樣式名也用上。假設isHide和isRed都為true,那麼div的class屬性就是這樣的：

<div class="hide red"></div>

關於v-if和v-show雖然都可以控制元素的顯示和隱藏，但是它們是有區別的。如果用v-if的話，整個dom結構壓根就不會出現在頁面上，如果是用v-show的話，要視後面的條件來定，如果是true,則顯示，如果為false,則加上style="display:none". 所以呢，如果是元件之類的大塊頭，個人覺得用v-if更好一些，如果是一些暫時性隱藏，一會要顯示的，還是v-show更方便。對於v-style和v-show來比較，v-show相當於是v-style="display:none"和v-style="display:block"的快捷方式。

用vue,少不了要介紹它的元件，v-component="my-component", 為什麼要用元件呢，它是提高程式碼複用的大殺技。比如要輸出一個列表，如果dom結構一致，只是資料不同，那麼html中，只要寫上元件名就可以了。

html:

<div id="wrap">
<div v-component="list" v-with="list1"></div>
<div v-component="list" v-with="list2"></div>
<!-- v-with="是指要邦定給當前元件的資料"-->
</div>

javascript:

var view = new Vue({
	el : '#wrap',
	data:{
		list1 : [{name:'frog'},{name:'bjtqti'}],
		list2: []
	},
	 components : {
		  list : {
				 template:'<li>{{name}}</div>'
		  }
	 }
});

說完元件，就是dom節點的引用，在沒有用vue之前，我們對頁面結點找查，需要依賴jquery之類的工具，而在vue中，對於需要引用的dom節點，只要在頁面上寫上v-el="取個名“就可以拿到。

比如取下面的元素：

<div v-el="wrap">
//....
</div>

在jquery中，需要$('div')[0],而在vue中直接用view.$$.wrap就可以了。(view是new Vue()產生的例項引用)

var view = new Vue({...});

  alert(view.$$.wrap)

可以說是指哪取哪，這也是angular曾經宣稱要幹掉jquery這樣的工具的理由。這其實一點也不稀奇，因為vue在例項化的時候，實際上就是遍列了頁面的所有dom節點，加一個標記，就是告訴vue,這個地方呆會我要用，給我記住了。用的時候，報名字，自動送上來。當然，關於vue能做的還有很多，由於時間關係，就不細寫了。

最後要說的一點是，vue例項化需要遍歷頁面上所有結點，所以，如果不需要vue進行管理的dom，且下面子節點又很多的情況下，最好給它加上v-pre指令，vue會自動忽略它，對於由大量動態資料生成的內容，最好用元件來存放，一來提高程式碼複用，二來減少初始化vue時在掃描dom上所消耜的時間。一般來說，一個頁面，只例項化一個vue例項就好。

說到提高效能，vue對於大部分資料都是進行雙向邦定的，在dom節點建立之後，資料所佔用的記憶體依然是儲存的。所以對於記憶體點用比傳統的字串方式要高，對於下拉載入這樣的操作，還是蠻令人擔心的。官方說，對v-repeat這樣的指令，通過使用track-by過濾具有相同特徵的欄位,比如id，可以有效減少相同元素的重複渲染。雖然使用vue還沒有到需要我們這樣操心記憶體的地步，這也是我們為了操作方便所要付出的代價，我個人認為，不需要雙向邦定的資料，特別是大量的資料，還是不要用為好。當然，如果你對React這樣的單向邦定的檢視工具比較熟的話，結合用，就更好了。再或者，自己擴充套件一個vue的指令，用來處理這種特殊的情況，這些都是考驗個人學習能力的活，新技術都不完美，所以才要不斷學習,追求新技術的過程，也就是追求完美的過程。