Vue 常见指令

V-bind   //一般绑定data中的数据,用于响应式更新数据
V-if    //根据true或false来决定是否显示
V-on  //监听Dom事件,比如点击
V-show  //跟v-if类似,但html元素依然存在,相当于display:none
V-html   //插入html
V-for  //循环
V-text  //渲染文本内容
V-cloak   //和CSS规则如 [v-cloak] { display: none } 一起用,可以隐藏未编译的 Mustache 标签直到实例准备完毕

解读一下 

v-cloak:

cloak   遮盖物。斗篷

由于网速等原因,加载慢的时候,原本应该绑定data的Mustache标签,比如 {{name}} ,没把值赋上去,会直接显示源码。

这样屏幕会有一个跳动闪现数据的情况。

而加入v-cloak:

<div id="app" v-cloak>
    {{context}}
</div>

再声明

[v-cloak]{
    display: none;
}

就可以解决闪烁

posted @ 2022-04-15 17:44  RookieCoderAdu  阅读(38)  评论(0)    收藏  举报