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

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

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

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

<span>Bindind Message Using Mustache（雙大括號）: {{ 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ù)的綁定就涉及到好幾種符號®，比如：Mustache 語法標簽的 {\{ }\} ,三Mustache標簽，引號(單雙)，括號 () ，對象 {} ，甚至數(shù)組 [] ；初始用起來，挺容易使人迷惑的，如果沒認真讀文檔的話；用了蠻久之后，回過頭再讀文檔，有以下感悟，如有不準確處，請慷慨予以指正：

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

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

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

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

當涉及到解析 class , style 時候，本來這類屬性是html自帶本來就需具有引號，所以要用 Mustache 來綁定的話，就是這樣： class="xx-{\{ className }\} ；

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

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

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

以上這寫幾點，有使用 jsfiddle 做一小 Demo 予以說明，這也是對部分特殊寫法的一個小記錄；其中有提到這樣的寫法：

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


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

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

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

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

如上例所示，果然，Vue 真是貼心；記得上次做某個看似頗有些復雜的需求，試用此法，將判斷邏輯固定 methods 中，免去了再次遍歷的無奈，很是優(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>

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

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

最新評論