js div加载html_说说 Vue.js 中的 v-cloak 指令

可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。

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

html：

{{context}}

js：

效果：

我们使用 v-cloak 指令来解决屏幕闪动的问题吧O(∩_∩)O~

js 不变，在 div 中加入 v-cloak 指令。

html：

{{context}}

css：

[v-cloak]{    display: none;}

使用 v-cloak 指令之后的效果(demo)：

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中(webpack、vue-router)只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。

作者：deniro
链接：https://www.jianshu.com/p/f56cde007210
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

js div加载html_说说 Vue.js 中的 v-cloak 指令相关推荐

js动态加载css文件和js文件的方法
今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...
js 延期执行_JS延迟加载(setTimeout) JS最后加载
为了让一个广告几秒以后再执行所以做个延迟加载的东东,用了JS实现,还蛮好用的,算是分享,也是记录吧. 第一 JS延迟加载 setTimeout("document.getElementByI ...
php延迟加载js,延时加载JavaScript代码提高速度
延时加载js代码提高速度,具体内容如下所示: 如果网页中存在大量的javascript代码会极大的影响网页的访问速度,下面就简单介绍一下如何处理此问题. 一.延时加载js文件: 可以使用定时器函数se ...
网站性能分析（下）-让网站并行加载但顺序执行JS
如果网站不支持JavaScript,复杂的功能将无法正常工作.在开发当中通常有几个脚本会写在HTML文件的头部.你嵌入的越多,网站的速度潜在的变得越慢.因此提高并行加载速度变得非常有必要,在前面的文章 ...
知识点讲解五：处理js异步加载问题
文章目录前言环境代码思路原代码前言在新闻网站中大多采用的是异步加载模式,新闻条目会随滚动条的滚动而逐渐加载.当爬虫访问这类网站时得到的HTML数据仅仅是我们看到的页面数据,只有当我们向下滚 ...
ArcGIS JS API加载GeoServer发布的WFS服务
文章目录前言主要代码总结参考链接前言 WFS(Web Feature Service),OGC标准下的要素服务.其支持的主要操作如下: GetCapabilities (discovery ...
ajax预加载html seo,前端性能优化 — JS预加载和懒加载
JS预加载需求:有时我们需要实现例如快速快速切换页面.图片之类的功能时,能尽快的加载出我们所需的图片会极大提升用户体验,这时用预加载将图片先缓存到浏览器,用户使用需显示图片时无疑会顺畅很多. 核心: ...
echarts的中国地图，点击进入省级地图，按需加载对应的省js，可返回中国地图
这是我项目中用到的示例图: 原理:创建两个省份的数组,在点击某个省份的时候,遍历获取对应省份的数据js,并加载此数据js,同时重新初始化echarts渲染此省份的数据效果 1.省份数组,用于遍历获取对 ...
原生JS实现加载进度条
分享一个原生JS实现的动态加载进度条特效,效果如下: 实现的代码如下: <!DOCTYPE html> <html><head><meta http-equi ...

js div加载html_说说 Vue.js 中的 v-cloak 指令

js div加载html_说说 Vue.js 中的 v-cloak 指令相关推荐

最新文章

热门文章