碎碎念ZWS

回顾先前开发的基于VUEJS v1.0 的项目中踩过的坑，vue已经更新到2.0+稳定版，新项目开发建议采用新版本，本文仅供基于1.0开发的旧项目维护参考。

vue开发页面解析时出现花括号

也就是：Vue.js由于延时显示了\{\{message\}\}引用界面解决方法

在使用Vue写应用时发现一个问题，每当进入一些有延时的（如网络API请求）操作时，会先闪一下未编译的 Mustache 标签\{\{message\}\}，这让人很不爽。

在博客园搜索到对应方法：

<!-- 定义[v-cloak]的style： -->
<style>[v-cloak] {
       display: none;
   }</style>
   <!-- 使用了Mustache标签的地方加上v-cloak： -->
   <div v-cloak>{{ message }}</div>

作者说：这样，Vue就可以隐藏未编译的 Mustache 标签直到实例准备完毕。实测效果很棒。

然鹅，碎碎念实测完全无效！

解决方法很简单：

采用v-text 代替直接{{}}套用变量即可，
如`<span>\{\{val\}\}</span>`改写为`<span v-text="val"></span>`

猎豹浏览器下的vue坑

猎豹浏览器不支持带过滤器的字段拼接作为动态参数，如:style="'background-image: url(' + g.icon | default_img + ')'"；

当时解决方法：

放弃`v-bind:`写法,采用`Mustache`写法，作为唯一的变量值（`\{\{g.icon | default_img\}\}`），即可顺利执行：
`style="background-image: url(\{\{g.icon | default_img\}\})"`

这是写法不规范造成

应该写成：

<div :style=`background-image: 'url(${g.icon | default_img}'`)></div>

vue的v-for循环输出json数组中相同元素

当使用vue的v-for循环输出json数组中的元素，因为json数组中存在相同元素导致vue输出渲染报错，查看Vue文档中API部分，发现可以通过添加track-by="$index"强制排序，可以正常输出重复的内容。

在VUE2.0中，此指令已经废除，替换用法为:key=$index。

`track-by=$index`
如果没有唯一的键供追踪，可以使用`track-by="$index"`，它强制让`v-for`进入原位更新模式：片断不会被移动，而是简单地以对应索引的新值刷新。
这种模式也能处理数据数组中重复的值。
这让数据替换非常高效，但是也会付出一定的代价。因为这时`DOM`节点不再映射数组元素顺序的改变，不能同步临时状态（比如`<input>`元素的值）以及组件的私有状态。因此，如果`v-for`块包含`<input>`元素或子组件，要小心使用`track-by="$index"`。