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

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

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

在文檔中，我們可以輕易的知道，Vue 為數據，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>

談及這數據的綁定就涉及到好幾種符號®，比如：Mustache 語法標簽的 {/{ }/} ,三Mustache標簽，引號(單雙)，括號 () ，對象 {} ，甚至數組 [] ；初始用起來，挺容易使人迷惑的，如果沒認真讀文檔的話；用了蠻久之后，回過頭再讀文檔，有以下感悟，如有不準確處，請慷慨予以指正：

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

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

引號 (包括單雙)，這是 Vue 可來承載字符串，用來映射對應實例中定義的各類對象(Number，布爾值，字符串，數據，對象等等)和方法；也用來解析特定語法：譬如: 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 的綁定，除了支持字符串外，還額外增強使其能支持對象或數組，所以就可以有以下用法：

<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>


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

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

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

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

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

<a href="javascript:;" @click="onXxxClick(param)"></a><!-- 阻止單擊事件冒泡 --><a @click.stop="doThisFunc"></a><!-- 修飾符可以串聯 --><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 指令在表單控件元素上創建雙向數據綁定 --><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{/{ checked }/}</label><!-- 在 "change" 而不是 "input" 事件中更新 --><input v-model="msg" lazy>

關于 Vue，文檔寫的再清楚沒有了，所以也沒有額外亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb