简单谈谈Vue 模板各类数据绑定

『天下武功，唯快不破』√，这一直是对武学造诣方面的追捧，虽然对于这个丝毫不会；更是对待现实工作不懈渴求，乃至苛求。因为这已不是遁隐修行，而是职场卖命，唯有先快速解决需求，方能攫取更为充盈的时间去深究技术机理，以使臻于更强，更强而优于快，如此优良循环得以形成。言归正传，作为前端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 指令。