今天看一篇文档中见到了了v-cloak指令，感觉很新鲜。由于使用的频率不高。但还是想了解下是做什么的。

众所周知，程序的指令一般都是语义化的，然后，我企图从cloak这个单词能找到点线索。

然后发现，英语不好的我，被难住了。。。不认识这个单词。。。于是我习惯的打开百度查一查。

cloak英[kləʊk]，美[kloʊk]

n.(尤指旧时的) 披风，斗篷; 遮盖物;

v.遮盖; 掩盖;

再看下对v-cloak的介绍。

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

然而，具体怎么实现呢，可是没见demo，还是不太明白意思。我就试着写了下，看了下效果。

未使用v-cloak的一般代码

veu接口调用

{{context}}

如上面的代码构成的html文件，我们看到的页面会在 {{context}}和天气之间闪烁一下，其主要原因就是使用cdn引入的vue.js文件的加载速度没有 {{context}}这个内容先渲染进页面。所以才导致了内容跳跃的问题。

当然，如何解决这个问题呢？有两种解决办法：

解决方案1：将cdn引入的代码移动到head标签内

如下方代码：

veu接口调用

{{context}}

解决方案2：使用v-cloak指令。

如下方代码：

veu接口调用

{{context}}

由于加载的效果间隔时间较短，没办法截图，各位读者可以直接复制上面的代码进行试验。

另外，我还注意到了传统的html代码不需要专门写编码格式为utf-8即可。但是引入了vue.js之后，不写这一行会出现乱码问题，大家可以注意一下！

mqtt js 中乱码_Vue.js 中的 v-cloak 指令——Vue学习之路相关推荐

vue.js文本居中_Vue.js的文本荧光笔库
vue.js文本居中 vue-text-highlight (vue-text-highlight) Text highlighter library for Vue.js. Vue.js的文本荧光笔 ...
vue.js确认对话框_vue.js精美的未保存的更改对话框
vue.js确认对话框 Vue未保存的更改对话框 (Vue Unsaved Changes Dialog) A beautiful unsaved changes dialog, inspired b ...
js add方法_Vue.js列表过渡
进入/离开 & 列表过渡示例一: <style>/* 移动的时间 */.fade-enter-active{transition: all .3s ease;}/* 移动的方向, ...
js获取当前日期_vue项目中获取前后N天日期
1.moment.js实现安装&引入 npm 获取今天日期 var 获取过去/未来N天的日期 // 过去文档 | Moment.js 中文网momentjs.cn PS:如果是在andv ...
js pug 代码_Vue项目中配置pug解析支持
Vue 的用法没有变化: transition(name="sider") div.hello h3 {{msg}} p(:style="{color:'#000'}&q ...
js foreach 跳出循环_VUE.js
Vue.js模板语法 vue.js使用了基于HTML的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据,其核心就是一个允许开发者采用简洁的模板语法来将数据渲染进DOM系统.使用各 ...
js 字符串插入_Vue.js 条件与循环
来源:阿里云大学--开发者课堂--Vue.js自学手册条件判断使用 v-if 指令: v-if 指令在元素和 template 中使用 v-if 指令: Vue 测试实例 - 阿里云大学(/ed ...
vue.js表格赋值_vue.js input框之间赋值方法
如下所示: demo.html Index Page 测试 {{ result1 }} 测试 {{ result2 }} demo.js new Vue({ el: "#demo" ...
vue.js组件数据绑定_Vue.js的增强的数据透视表组件
vue.js组件数据绑定 VUE数据透视表加 (vue-pivot-table-plus) A customized vue component for pivot table. 数据透视表的定制vu ...

mqtt js 中乱码_Vue.js 中的 v-cloak 指令——Vue学习之路

解决方案1：将cdn引入的代码移动到head标签内

解决方案2：使用v-cloak指令。

mqtt js 中乱码_Vue.js 中的 v-cloak 指令——Vue学习之路相关推荐

最新文章

热门文章