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