> 1.可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除。
>
> 2.当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
~~~
<div id="app">
{{context}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
context:'互联网头部玩家钟爱的健身项目'
}
});
~~~
当网络慢时:
![](https://img.kancloud.cn/ad/a9/ada99c2458c3186c312b7dca8296c97d_345x85.gif)
我们使用 v-cloak 指令来解决屏幕闪动的问题吧O(∩\_∩)O~
js 不变,在 div 中加入 v-cloak 指令。
html:
~~~
<div id="app" v-cloak>
{{context}}
</div>
~~~
css:
~~~css
[v-cloak]{
display: none;
}
~~~
使用 v-cloak 指令之后的效果([demo](https://jsfiddle.net/deniro/joafmeph/)):
![](//upload-images.jianshu.io/upload_images/3386108-5ebe5bb452a25298.gif?imageMogr2/auto-orient/strip|imageView2/2/w/288/format/webp)
* * *
在简单项目中,使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中(webpack、vue-router)只有一个空的 div 元素,元素中的内容是通过路由挂载来实现的,这时我们就不需要用到 v-cloak 指令咯。
作者:deniro
链接:https://www.jianshu.com/p/f56cde007210
- vue
- 为什么要学vue
- 数据双向绑定
- vue指令
- v-bind创建HTML节点属性
- v-on绑定事件
- v-cloak
- v-text
- v-for和key属性
- v-if和v-show
- 案例1
- 自定义指令
- vue样式
- vue生命周期
- vue过滤器
- 自定义键盘修饰符
- 跨域请求
- vue组件
- 组件基础
- 引入vue文件组件
- 引入render函数作为组件
- 兄弟间组件通信
- 组件函数数据传递练习
- 路由
- 数据监听
- webpack
- vue校验
- vue笔记
- form表单中input前部分默认输入,切不可修改
- mixins
- 部署到nginx
- scope
- render
- 下载文件
- vue动态组件
- axios
- Promise
- vue进阶
- node-vue-webpack搭建
- vue事件
- 插槽
- vuex
- vuex基础
- vuex命名空间
- HTML递归?
- this.$nextTick异步更新dom
- elementui
- table
- 修改element ui样式
- form
- 优质博客
- vuex state数据与form元素绑定
- es6
- Promise