前端開發工具vue.js開發實踐總結

最近有很長時間沒有更新博客了，換了公司，所有的心思都放在項目上了。經過此次項目的上線，讓我感覺最深的是先後端分離後，前端頁面的模塊化管理，以及前端頁面的數據邦定。在接觸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.js，具體的起步請參考：http://cn.vuejs.org/guide/index.html ，細節部分不在版書。

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的指令，用來處理這種特殊的狀況，這些都是考驗我的學習能力的活，新技術都不完美，因此纔要不斷學習,追求新技術的過程，也就是追求完美的過程。