Vue1.0新手踩坑回顾

回顾先前开发的基于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"`。
NOOLDEY

本文作者:NOOLDEY

做一个诗情画意的码农,皮皮猪,我们走!

原文链接: http://zhuweisheng.com.cn/framework/vue-old/

本站文章如无特殊声明均为原创,创作不易,转载请注明来源,谢谢!