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

在使用 vue 开发过程中，那基于 dom 实现的模版，总是无可避免的要遇到，也是一个令人欣喜的存在。vue.js 模板不仅都是可解析的有效的 html，且通过一些特殊的特性做了增强，这使得很多先行，需要借助 jquery 等类库在逻辑中操纵的部分，已然可以在模版中进行，不得不说这使得一定程度上，dom结构变的更加清晰明了。因此，这部分如果用运得当，对于 vue 组件化编写大有裨益；虽然说 vue官方已经有很完善的文档～ 数据绑定语法 ，但依然还是可以对这块儿再进行探讨，毕竟vue数据绑定，其实际功能比目测的文档中描述更为强大。

微注：本博客也基于 Hexo 驱动，其目测不支持多个大括号渲染，所以这里只好暂时先用 \ 做下转义了。另外，为了方便电脑端阅读，自此有对网页加入 Enter 键监听，用以切换 show / hide 侧边栏。

在文档中，我们可以轻易的知道，Vue 为数据，Class, Style，表单控件的绑定；属性的计算，条件、列表渲染；方法、事件处理等等等提供了诸多便捷的方法；所以我们可以很简洁的写出模版，例如这样的；

Bindind Message Using Mustache（双大括号）: {{ msg }}
This will never change(mustache with *): {\{* msg }\}
Bing htmlText using three Mustache label Like This : {\{\{ htmlText }\}\}
Html Attributes Using Mustache
{\{ message.split('').reverse().join('') }\}
Binding class using Mustache Label

谈及这数据的绑定就涉及到好几种符号®，比如：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 来绑定的话，就是这样： class="xx-{\{ className }\} ；

对于上一条，Vue 温馨的考量到字符串拼接麻烦又易错，所以对于 class 和 style 的绑定，除了支持字符串外，还额外增强使其能支持对象或数组，所以就可以有以下用法：

以上这写几点，有使用 jsfiddle 做一小 Demo 予以说明，这也是对部分特殊写法的一个小记录；其中有提到这样的写法：

ShopNC网上商店单用户版

ShopNC单用户商城系统是面向独立卖家而开发的B2C商城系统。系统运行稳定高效，功能强大，突出个性化配置要求，可以根据不同的营销策略，从模板、栏目、功能上进行调整，满足各类客户的需要。系统部署快捷方便，减轻了使用者的技术负担，简单的维护操作免去了用户的后顾之忧。本系统前台开放源码，后台加密的。产品特点快速安装，维护简单 分布提示安装，即使不熟悉技术的用户也可以自主安装系统。后台融合数据库等功能管

下载

这样的动态写法虽然看起来不是很优雅，用起来也不是很方便，但不失为一种用法，这其中也运用了 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 还提供了其它若干十分人性化的处理方案，譬如：

 
)

 //为最常用的按键提供别名
 


{\{ checked }\}
 

关于 Vue，文档写的再清楚没有了，所以也没有额外啰嗦的必要。但，使用之时毕竟还牵扯到很多插件、库、组件等，涉及诸多不同的机制，对于不是很熟悉的部分，偶尔会陷入一些麻烦；为此也会偶尔将遇到的这些问题，做下整理记录在 Vue 常见问题解决方案记录 。