前端开发工具vue.js开发实践总结
最近有很長時間沒有更新博客了，換了公司，全部的心思都放在項目上了。通過這次項目的上線，讓我感受最深的是前后端分離后，前端頁面的模塊化管理，以及前端頁面的數(shù)據(jù)邦定。在接觸vue.js之前，我之前端要用到的dom結(jié)構(gòu)，都是通過拼接字符串的方式進行輸出的。這種方式最大的痛點是拼接很麻煩，也不是很直觀，幾乎無法復(fù)用，和數(shù)據(jù)緊密的偶合在一起，維護不方便，太多太多的問題。在同事的推薦下，開始接觸vue.js這個開源項目。如果你不知道什么是vue,那么請看這里的介紹http://vuejs.org/。
? ? vue的更新很快，從我最開始接觸時的0.11.5，到現(xiàn)在的0.12.7，中文版的介紹一直停留在0.11.5的版本。如果是入門，且英文不是很好的情況下，我建議還是用0.11.5的版本。
如果你之前有用過angular.js或別的雙向綁定的js庫,那么你會有一種自來熟的感覺。當然，vue作為一個輕量的前端視圖層工具，與angular相比，還是有很明顯的區(qū)別的：
?1. vue僅僅是mvvm中的view層，只是一個如jquery般的工具庫，而不是框架，而angular而是mvvm框架。
?2. vue的雙向邦定是基于ES5 中的 getter/setters來實現(xiàn)的，而angular而是由自己實現(xiàn)一套模版編譯規(guī)則，需要進行所謂的“臟”檢查，vue則不需要。因此，vue在性能上更高效，但是代價是對于ie9以下的瀏覽器無法支持。
3. vue需要提供一個el對象進行實始化，后續(xù)的所有作用范圍也是在el對象之下，而angular而是整個html頁面。一個頁面，可以有多個vue實例，而angular好像不是這么玩的。
4. vue真的很容易上手，學(xué)習(xí)成本相對低，不過可以參考的資料不是很豐富，官方文檔比較簡單，缺少全面的使用案例。高級的用法，需要自己去研究源碼，至少目前是這樣。
下面開始寫一些的使用經(jīng)驗：
? ? ? 首先是你要去官網(wǎng)下載vue.js，具體的起步請參考：http://cn.vuejs.org/guide/index.html?，細節(jié)部分不在版書。
vue在構(gòu)建的時候，需要使用new進行實例化，比如:?
?
var view = new Vue({el : '#container' });?
el 根據(jù)官方api的介紹，可以是String | HTMLElement | Function, 一般來說，傳一個id比較常用，這一步就是告訴vue,從這個節(jié)點開始，后面的內(nèi)容就于vue開始接管了。
接管之后有些什么好處呢??
1. ajax取出的內(nèi)容，再也不用拼接好再innerHTML到頁面上了，直接在相要出現(xiàn)的地方寫上{{數(shù)據(jù)}}或v-text="數(shù)據(jù)"或v-html="數(shù)據(jù)" ，就會自動顯示出來。
2. 對于表單來說，特別input之類的元素，不再需要自己監(jiān)聽事件了。比如:
?
<input type="text" v-mode="name"><div>這里會自動顯示input的value:{{name}}</div>?
?
這時，只要input中內(nèi)容有變化，name的值就會自動在div中顯示出來。這個在手機上的特別方便，不需要判斷keycode,也不需要判斷event是keyup還是keydown,
利用這個特性，進行表單元素的驗證，也是很方便的。結(jié)合v-if,v-show,v-style,v-class這些控制器，可以實現(xiàn)以往，我們要寫很復(fù)雜的ajax或者js才能實現(xiàn)的功能。
關(guān)于它們的用法，看看官網(wǎng)的示例，自己照著寫一遍就知道了。只是關(guān)于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的樣式名也用上。假設(shè)isHide和isRed都為true,那么div的class屬性就是這樣的：
?
<div class="hide red"></div>?
?
關(guān)于v-if和v-show雖然都可以控制元素的顯示和隱藏，但是它們是有區(qū)別的。如果用v-if的話，整個dom結(jié)構(gòu)壓根就不會出現(xiàn)在頁面上，如果是用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", 為什么要用組件呢，它是提高代碼復(fù)用的大殺技。比如要輸出一個列表，如果dom結(jié)構(gòu)一致，只是數(shù)據(jù)不同，那么html中，只要寫上組件名就可以了。
html:
?
<div id="wrap"> <div v-component="list" v-with="list1"></div> <div v-component="list" v-with="list2"></div> <!-- v-with="是指要邦定給當前組件的數(shù)據(jù)"--> </div>?
?
javascript:
?
var view = new Vue({el : '#wrap',data:{list1 : [{name:'frog'},{name:'bjtqti'}],list2: []},components : {list : {template:'<li>{{name}}</div>'}} });?
?
說完組件，就是dom節(jié)點的引用，在沒有用vue之前，我們對頁面結(jié)點找查，需要依賴jquery之類的工具，而在vue中，對于需要引用的dom節(jié)點，只要在頁面上寫上v-el="取個名“就可以拿到。
比如取下面的元素：
<div v-el="wrap"> //.... </div>在jquery中，需要$('div')[0],而在vue中直接用view.$$.wrap就可以了。(view是new Vue()產(chǎn)生的實例引用)
?
var view = new Vue({...});alert(view.$$.wrap)?
可以說是指哪取哪，這也是angular曾經(jīng)宣稱要干掉jquery這樣的工具的理由。這其實一點也不稀奇，因為vue在實例化的時候，實際上就是遍列了頁面的所有dom節(jié)點，加一個標記，就是告訴vue,這個地方呆會我要用，給我記住了。用的時候，報名字，自動送上來。當然，關(guān)于vue能做的還有很多，由于時間關(guān)系，就不細寫了。
最后要說的一點是，vue實例化需要遍歷頁面上所有結(jié)點，所以，如果不需要vue進行管理的dom，且下面子節(jié)點又很多的情況下，最好給它加上v-pre指令，vue會自動忽略它，對于由大量動態(tài)數(shù)據(jù)生成的內(nèi)容，最好用組件來存放，一來提高代碼復(fù)用，二來減少初始化vue時在掃描dom上所消耜的時間。一般來說，一個頁面，只實例化一個vue實例就好。
說到提高性能，vue對于大部分數(shù)據(jù)都是進行雙向邦定的，在dom節(jié)點創(chuàng)建之后，數(shù)據(jù)所占用的內(nèi)存依然是保存的。所以對于內(nèi)存點用比傳統(tǒng)的字符串方式要高，對于下拉加載這樣的操作，還是蠻令人擔心的。官方說，對v-repeat這樣的指令，通過使用track-by過濾具有相同特征的字段,比如id，可以有效減少相同元素的重復(fù)渲染。雖然使用vue還沒有到需要我們這樣操心內(nèi)存的地步，這也是我們?yōu)榱瞬僮鞣奖闼冻龅拇鷥r，我個人認為，不需要雙向邦定的數(shù)據(jù)，特別是大量的數(shù)據(jù)，還是不要用為好。當然，如果你對React這樣的單向邦定的視圖工具比較熟的話，結(jié)合用，就更好了。再或者，自己擴展一個vue的指令，用來處理這種特殊的情況，這些都是考驗個人學(xué)習(xí)能力的活，新技術(shù)都不完美，所以才要不斷學(xué)習(xí),追求新技術(shù)的過程，也就是追求完美的過程。
轉(zhuǎn)載于:https://www.cnblogs.com/afrog/p/4641352.html
總結(jié)
以上是生活随笔為你收集整理的前端开发工具vue.js开发实践总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android开发（三十二）——延时
- 下一篇： npm install含义 及vue安装