简单谈谈Vue 模板各类数据绑定
『天下武功，唯快不破』√，这一直是对武学造诣方面的追捧，虽然对于这个丝毫不会；更是对待现实工作不懈渴求，乃至苛求。因为这已不是遁隐修行，而是职场卖命，唯有先快速解决需求，方能攫取更为充盈的时间去深究技术机理，以使臻于更强，更强而优于快，如此优良循环得以形成。言归正传，作为前端ER，一度觉得，这Vue的诞生，好比一柄倚天利器，其易上手，写以及运行也都很高效，十分让人爱不释手；但这易上手，倒不等于容易精通，蛮多东西都需悉心学习、练习、理解，才能运用自如。
在使用Vue开发过程中，那基于Dom实现的模版，总是无可避免的要遇到，也是一个令人欣喜的存在。Vue.js模板不仅都是可解析的有效的HTML，且通过一些特殊的特性做了增强，这使得很多先行，需要借助jQuery等类库在逻辑中操纵的部分，已然可以在模版中进行，不得不说这使得一定程度上，Dom结构变的更加清晰明了。因此，这部分如果用运得当，对于Vue组件化编写大有裨益；虽然说Vue官方已经有很完善的文档～数据绑定语法，但依然还是可以对这块儿再进行探讨，毕竟Vue数据绑定，其实际功能比目测的文档中描述更为强大。
微注：本博客也基于Hexo驱动，其目测不支持多个大括号渲染，所以这里只好暂时先用\做下转义了。另外，为了方便电脑端阅读，自此有对网页加入Enter键监听，用以切换show/hide侧边栏。
在文档中，我们可以轻易的知道，Vue为数据，Class,Style，表单控件的绑定；属性的计算，条件、列表渲染；方法、事件处理等等等提供了诸多便捷的方法；所以我们可以很简洁的写出模版，例如这样的；
<span>BindindMessageUsingMustache（双大括号）:{{msg}}</span>
<span>Thiswillneverchange(mustachewith*):{\{*msg}\}</span>
<div>BinghtmlTextusingthreeMustachelabelLikeThis:{\{\{htmlText}\}\}</div>
<divid="item-{\{id}\}">HtmlAttributesUsingMustache</div>
<div>{\{message.split('').reverse().join('')}\}</div>
<divclass="{\{className}\}">BindingclassusingMustacheLabel</div>
谈及这数据的绑定就涉及到好几种符号®，比如：Mustache语法标签的{\{}\},三Mustache标签，引号(单双)，括号()，对象{}，甚至数组[]；初始用起来，挺容易使人迷惑的，如果没认真读文档的话；用了蛮久之后，回过头再读文档，有以下感悟，如有不准确处，请慷慨予以指正：
三Mustache标签，是用来将传来数据解析成HTML的，用以更新元素的innerHTML，这个很清晰明了；也很常用；在内部，它会被编译为锚节点上的一个v-html指令。
Mustache之{\{}\},是要将数据解析为纯文本，用以更新元素的textContent，这个用的最多且广；在内部，它被编译为textNode的一个v-text指令。
引号(包括单双)，这是Vue可来承载字符串，用来映射对应实例中定义的各类对象(Number，布尔值，字符串，数据，对象等等)和方法；也用来解析特定语法：譬如:v-for=”iteminitems”；还能支持部分简单的表达式：v-if=”Math.random()>0.5”;当涉及有多层引号之时，就得不同引号相互套用，一般采用双引号套单引号；比如：<div:style="{fontSize:fontSize+'px'}"></div>；
括号()，这个用到的地方，比如v-for="(index,item)initems"，再比如：<ahref="#"@click="onXXClick(param)"></a>之类的；
当涉及到解析class,style时候，本来这类属性是html自带本来就需具有引号，所以要用Mustache来绑定的话，就是这样：class="xx-{\{className}\}；
对于上一条，Vue温馨的考量到字符串拼接麻烦又易错，所以对于class和style的绑定，除了支持字符串外，还额外增强使其能支持对象或数组，所以就可以有以下用法：
<divclass="static"v-bind:class="{'class-a':isA,'class-b':isB}"></div>
<divv-bind:class="[classA,classB]">
以上这写几点，有使用jsfiddle做一小Demo予以说明，这也是对部分特殊写法的一个小记录；其中有提到这样的写法：
<div:style="{'width':`${100/this.count}%`}">TextDesc</div>
这样的动态写法虽然看起来不是很优雅，用起来也不是很方便，但不失为一种用法，这其中也运用了Es6语法；然而这种写法使用用起来，还是挺使得人很是沮丧的，即便用了babel转化，某些时候却不能得到正确的解析，Vue给出了如下警告：
Invalidexpression.Generatedfunctionbody:{‘width':scope.${100/this.count}%}
如此写时OKay时挂掉，这部分至今还是没能搞明白，列于此处，也是提醒自己要多多深入探究下vue；另外，Vue在解析表达式方面，也有很需要注意的地方(不支持正则)，作者予以提供了computedproperty；所以也是建议，涉及Style的动态部分，还是用函数解决，写在templete中，即便可以，却也导致其样式结构看起来错综复杂。
当然，大多情形之下，并不是很肯定将各种class,style的操纵，放置于Template中，即便使用jade等一些模版语言辅助，也会使得整个Dom结构看起来，没那么清晰明朗，能方便切类予以实现的，最好用这种方式，毕竟简洁才美。但，总有些略为复杂的需求，相比于在逻辑中去循环遍历，以操弄Dom来动态改变，那么在模版中去操纵style反而显得会更优雅；我们已经知道，Mustache语法，可以解析表达式；表达式中可以以String来映射对象，数组，想必也可以对应调用其实例中的方法，试一试？
如上例所示，果然，Vue真是贴心；记得上次做某个看似颇有些复杂的需求，试用此法，将判断逻辑固定methods中，免去了再次遍历的无奈，很是优雅的解决问题。这岂能不令人欢喜？更何况，Vue还提供了其它若干十分人性化的处理方案，譬如：
<ahref="javascript:;"@click="onXxxClick(param)"></a>
<!--阻止单击事件冒泡-->
<a@click.stop="doThisFunc"></a>
<!--修饰符可以串联-->
<av-on:click.stop.prevent="doThat">
<divslider(@mouseover="pause&&pausePlay()",@mouseout="pause&&goPlay()"></div>)
<inputv-on:keyup.13="submitFuncName">
<inputv-on:keyup.enter="submitFuncName">//为最常用的按键提供别名
<!--用v-model指令在表单控件元素上创建双向数据绑定-->
<inputtype="checkbox"id="checkbox"v-model="checked">
<labelfor="checkbox">{\{checked}\}</label>
<!--在"change"而不是"input"事件中更新-->
<inputv-model="msg"lazy>
关于Vue，文档写的再清楚没有了，所以也没有额外啰嗦的必要。但，使用之时毕竟还牵扯到很多插件、库、组件等，涉及诸多不同的机制，对于不是很熟悉的部分，偶尔会陷入一些麻烦；为此也会偶尔将遇到的这些问题，做下整理记录在Vue常见问题解决方案记录。
很久很久以前，荀子《劝学》中有言道：君子生非异也善假于物也，纵隔千年万载，大有其理。在前端行走的这大半年，十二分感谢有Vue这般的器具存在，使得总产生一种感觉，有这利器存在，任何需求插来都不虚。据学以致用的道理，那么就先言及于此，边用边学边感慨。