在用vue搭建页面时有一些变量是一开始是空的，页面一挂载mounted就赋值的，如这种情况
html
<div class="productBox" v-for="(item,index) in prolists" :key="index">
<p class="productName">{{item.name}}</p>
<p class="createTime">{{item.createdDate}}</p>
</div>
js
var vm=new Vue({
el:'#globel',
data:{
prolists:[]
},
created:function(){
console.log(this.prolists);//空数组对象
//单页面就没有导入axios
$.ajax({
method: "GET",
url:"xxxxx",
success:function(result){
var prodata=JSON.parse(result);
vm.prolists=prodata.data;
console.log(this.prolists);//未定义，因为this是ajax实例
console.log(vm.prolists);
}
});
},
methods:{
}
})
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的， Vue 的设计受到了MVVM的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
当创建一个 Vue 实例时要经过一系列的初始化过程，在实例生命周期的不同阶段被调用，如 created、 [mounted(https://cn.vuejs.org/v2/api/#mounted)、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
computed、methods、watch将被混入到 Vue 实例中。 this 上下文自动地绑定为 Vue 实例。
一定要弄清楚this的指向问题，如ajax请求里的this为ajax实例而不是vue实例，而定时器里的this是windows所以一般需要在后面bind(this)，所以记住函数中this的指向为谁调用就是谁。
你也可以在 API 文档 中浏览完整的选项列表。
数据赋值前闪一下
在数据被赋值之前页面里可能会先闪现{{item.name}} {{item.createdDate}}然后再被真实数据替代，很丑有木有。
所以说要在数据赋予之前让其隐藏有几种方法：
1、v-cloak
-
不需要表达式
-
用法：
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如
[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 -
示例：
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
不会显示，直到编译结束。
2、使用v-text
把<p class="productName">{{item.name}}</p>替换成<p class="productName" v-text="item.name"></p>完美解决
3、v-html（不建议）
更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
4、v-if 和v-show
根据表达式之真假值，切换元素的 display CSS 属性。
当条件变化时该指令触发过渡效果。
数据赋予前使其为false，之后赋值为true
网友评论