『天下武功，唯快不破』√，這一直是對(duì)武學(xué)造詣方面的追捧，雖然對(duì)于這個(gè)絲毫不會(huì)；更是對(duì)待現(xiàn)實(shí)工作不懈渴求，乃至苛求。因?yàn)檫@已不是遁隱修行，而是職場(chǎng)賣命，唯有先快速解決需求，方能攫取更為充盈的時(shí)間去深究技術(shù)機(jī)理，以使臻于更強(qiáng)，更強(qiáng)而優(yōu)于快，如此優(yōu)良循環(huán)得以形成。言歸正傳，作為前端ER，一度覺得，這 Vue 的誕生，好比一柄倚天利器，其易上手，寫以及運(yùn)行也都很高效，十分讓人愛不釋手；但這易上手，倒不等于容易精通，蠻多東西都需悉心學(xué)習(xí)、練習(xí)、理解，才能運(yùn)用自如。

在使用 Vue 開發(fā)過程中，那基于 Dom 實(shí)現(xiàn)的模版，總是無(wú)可避免的要遇到，也是一個(gè)令人欣喜的存在。Vue.js 模板不僅都是可解析的有效的 HTML，且通過一些特殊的特性做了增強(qiáng)，這使得很多先行，需要借助 jQuery 等類庫(kù)在邏輯中操縱的部分，已然可以在模版中進(jìn)行，不得不說(shuō)這使得一定程度上，Dom結(jié)構(gòu)變的更加清晰明了。因此，這部分如果用運(yùn)得當(dāng)，對(duì)于 Vue 組件化編寫大有裨益；雖然說(shuō) Vue官方已經(jīng)有很完善的文檔～ 數(shù)據(jù)綁定語(yǔ)法 ，但依然還是可以對(duì)這塊兒再進(jìn)行探討，畢竟Vue數(shù)據(jù)綁定，其實(shí)際功能比目測(cè)的文檔中描述更為強(qiáng)大。

微注：本博客也基于 Hexo 驅(qū)動(dòng)，其目測(cè)不支持多個(gè)大括號(hào)渲染，所以這里只好暫時(shí)先用 \ 做下轉(zhuǎn)義了。另外，為了方便電腦端閱讀，自此有對(duì)網(wǎng)頁(yè)加入 Enter 鍵監(jiān)聽，用以切換 show / hide 側(cè)邊欄。

在文檔中，我們可以輕易的知道，Vue 為數(shù)據(jù)，Class, Style，表單控件的綁定；屬性的計(jì)算，條件、列表渲染；方法、事件處理等等等提供了諸多便捷的方法；所以我們可以很簡(jiǎn)潔的寫出模版，例如這樣的；

<span>Bindind Message Using Mustache（雙大括號(hào)）: {{ msg }}</span>
<span>This will never change(mustache with *): {\{* msg }\}</span>
<div>Bing htmlText using three Mustache label Like This : {\{\{ htmlText }\}\}</div>
<div id="item-{\{ id }\}">Html Attributes Using Mustache</div>
<div>{\{ message.split('').reverse().join('') }\}</div>
<div class="{\{ className }\}">Binding class using Mustache Label</div>

談及這數(shù)據(jù)的綁定就涉及到好幾種符號(hào)®，比如：Mustache 語(yǔ)法標(biāo)簽的 {\{ }\} ,三Mustache標(biāo)簽，引號(hào)(單雙)，括號(hào) () ，對(duì)象 {} ，甚至數(shù)組 [] ；初始用起來(lái)，挺容易使人迷惑的，如果沒認(rèn)真讀文檔的話；用了蠻久之后，回過頭再讀文檔，有以下感悟，如有不準(zhǔn)確處，請(qǐng)慷慨予以指正：

三Mustache標(biāo)簽，是用來(lái)將傳來(lái)數(shù)據(jù)解析成HTML的，用以更新元素的 innerHTML，這個(gè)很清晰明了；也很常用；在內(nèi)部，它會(huì)被編譯為錨節(jié)點(diǎn)上的一個(gè) v-html 指令。

Mustache之 {\{}\} ,是要將數(shù)據(jù)解析為純文本，用以更新元素的 textContent，這個(gè)用的最多且廣；在內(nèi)部，它被編譯為 textNode 的一個(gè) v-text 指令。

引號(hào) (包括單雙)，這是 Vue 可來(lái)承載字符串，用來(lái)映射對(duì)應(yīng)實(shí)例中定義的各類對(duì)象(Number，布爾值，字符串，數(shù)據(jù)，對(duì)象等等)和方法；也用來(lái)解析特定語(yǔ)法：譬如: v-for=”item in items”；還能支持部分簡(jiǎn)單的表達(dá)式：v-if=”Math.random() > 0.5”; 當(dāng)涉及有多層引號(hào)之時(shí)，就得不同引號(hào)相互套用，一般采用雙引號(hào)套單引號(hào)；比如 ： <div :style="{ fontSize: fontSize + 'px' }"></div> ；

括號(hào) () ，這個(gè)用到的地方，比如 v-for="(index, item) in items" ，再比如： <a href="#" @click="onXXClick(param)"></a> 之類的；

當(dāng)涉及到解析 class , style 時(shí)候，本來(lái)這類屬性是html自帶本來(lái)就需具有引號(hào)，所以要用 Mustache 來(lái)綁定的話，就是這樣： class="xx-{\{ className }\} ；

對(duì)于上一條，Vue 溫馨的考量到字符串拼接麻煩又易錯(cuò)，所以對(duì)于 class 和 style 的綁定，除了支持字符串外，還額外增強(qiáng)使其能支持對(duì)象或數(shù)組，所以就可以有以下用法：

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

<div v-bind:class="[classA, classB]">

以上這寫幾點(diǎn)，有使用 jsfiddle 做一小 Demo 予以說(shuō)明，這也是對(duì)部分特殊寫法的一個(gè)小記錄；其中有提到這樣的寫法：

<div :style="{'width': `${100 / this.count}%`}">Text Desc</div>


這樣的動(dòng)態(tài)寫法雖然看起來(lái)不是很優(yōu)雅，用起來(lái)也不是很方便，但不失為一種用法，這其中也運(yùn)用了 Es6 語(yǔ)法；然而這種寫法使用用起來(lái)，還是挺使得人很是沮喪的，即便用了 babel 轉(zhuǎn)化，某些時(shí)候卻不能得到正確的解析，Vue 給出了如下警告：

Invalid expression. Generated function body: {‘width': scope.${100/this.count}% }

如此寫時(shí)OKay時(shí)掛掉，這部分至今還是沒能搞明白，列于此處，也是提醒自己要多多深入探究下vue；另外，Vue 在解析表達(dá)式方面，也有很需要注意的地方(不支持正則)，作者予以提供了 computed property；所以也是建議，涉及 Style 的動(dòng)態(tài)部分，還是用函數(shù)解決，寫在 templete 中，即便可以，卻也導(dǎo)致其樣式結(jié)構(gòu)看起來(lái)錯(cuò)綜復(fù)雜。

當(dāng)然，大多情形之下，并不是很肯定將各種 class, style 的操縱，放置于 Template 中，即便使用 jade 等一些模版語(yǔ)言輔助，也會(huì)使得整個(gè) Dom 結(jié)構(gòu)看起來(lái)，沒那么清晰明朗，能方便切類予以實(shí)現(xiàn)的，最好用這種方式，畢竟簡(jiǎn)潔才美。但，總有些略為復(fù)雜的需求，相比于在邏輯中去循環(huán)遍歷，以操弄 Dom 來(lái)動(dòng)態(tài)改變，那么在模版中去操縱 style 反而顯得會(huì)更優(yōu)雅；我們已經(jīng)知道，Mustache語(yǔ)法，可以解析表達(dá)式；表達(dá)式中可以以 String 來(lái)映射對(duì)象，數(shù)組，想必也可以對(duì)應(yīng)調(diào)用其實(shí)例中的方法，試一試？

如上例所示，果然，Vue 真是貼心；記得上次做某個(gè)看似頗有些復(fù)雜的需求，試用此法，將判斷邏輯固定 methods 中，免去了再次遍歷的無(wú)奈，很是優(yōu)雅的解決問題。這豈能不令人歡喜？更何況，Vue 還提供了其它若干十分人性化的處理方案，譬如：

<a href="javascript:;" @click="onXxxClick(param)"></a>
<!-- 阻止單擊事件冒泡 -->
<a @click.stop="doThisFunc"></a>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat">

<div slider(@mouseover="pause && pausePlay()", @mouseout="pause && goPlay()"></div>)
<input v-on:keyup.13="submitFuncName">
<input v-on:keyup.enter="submitFuncName"> //為最常用的按鍵提供別名

<!-- 用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定 -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{\{ checked }\}</label>

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model="msg" lazy>

關(guān)于 Vue，文檔寫的再清楚沒有了，所以也沒有額外啰嗦的必要。但，使用之時(shí)畢竟還牽扯到很多插件、庫(kù)、組件等，涉及諸多不同的機(jī)制，對(duì)于不是很熟悉的部分，偶爾會(huì)陷入一些麻煩；為此也會(huì)偶爾將遇到的這些問題，做下整理記錄在 Vue 常見問題解決方案記錄 。

很久很久以前，荀子《勸學(xué)》中有言道： 君子生非異也 善假于物也 ，縱隔千年萬(wàn)載，大有其理。在前端行走的這大半年，十二分感謝有 Vue 這般的器具存在，使得總產(chǎn)生一種感覺，有這利器存在，任何需求插來(lái)都不虛。據(jù) 學(xué)以致用 的道理，那么就先言及于此，邊用邊學(xué)邊感慨。

最新評(píng)論