Vue.js 中的 v-cloak 指令及使用详解

先来看下vue.js 中的v-cloak 指令

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

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

html：

<div id="app">
  {{context}}
</div>

js：

<script>
  var app = new Vue({
    el: '#app',
    data: {
      context:'互联网头部玩家钟爱的健身项目'
    }
  });
</script>

效果：

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

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

html：

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

css：

[v-cloak]{
  display: none;
}

使用 v-cloak 指令之后的效果（ demo ）：

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

下面看下Vue中v-cloak使用详解

这次给大家带来Vue中v-cloak使用详解，Vue中v-cloak使用的注意事项有哪些，下面就是实战案例，一起来看一下。

v-cloak 的作用和用法

用法：

这个指令保持在元素上直到关联实例结束编译。和 css 规则如[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。官方API{{msg}}

setTimeout(() => {
 newVue({
  el:'#app',
  data: {
   msg:'hello'
  }
 })
},2000)

v-cloak 可以解决这一问题，在 css 中加上HTML 绑定 Vue实例，在页面加载时会闪烁然后才会出现加载完成字样，为了效果更明显，我们可以延后加载 Vue 实例

[v-cloak] {
 display: none;
}

Vue1.x 与 Vue2 中 v-cloak 的不同在 html 中的加载点加上 v-cloak，就可以解决这一问题

Vue1 中，允许将 Vue 实例挂载在 body 上，而 Vue2 是不允许的，想对整个页面实例化，需要另外用一个 p 来容纳整个页面内容，对其进行实例化

这样在使用 v-cloak 时，同样需要用到这种方法

为什么我用的 v-cloak 无效？

在实际项目中，我们常通过 @import 来加载 css 文件

@import"style.css"
@import"index.css"

为了避免这种情况，我们可以将[v-cloak]写在 link 引入的 css 中，或者写一个内联 css 样式，这样就得到了解决。而 @import 是在页面 DOM 完全载入后才会进行加载，如果我们将[v-cloak]写在 @import 加载的 css 文件中，就会导致页面仍旧闪烁。

总结

以上所述是小编给大家介绍的Vue.js 中的 v-cloak 指令及使用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue v-on监听事件详解

    在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下简单的监听事件代码. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <scrip

  • VueJS事件处理器v-on的使用方法

    本文介绍了VueJS事件处理器v-on的使用方法,分享给大家,具体如下: 事件监听可以使用 v-on 指令. v-on:click表达式 HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootc

  • vue基础之事件v-onclick=

    vue基础之事件v-onclick="函数"用法示例

    本文实例讲述了vue基础之事件v-onclick=函数用法.分享给大家供大家参考,具体如下: v-on:click/mouseout/mouseover/dblclick/mousedown..... 事件: v-on:click="函数" v-on:click/mouseout/mouseover/dblclick/mousedown..... new Vue({ el:'#box', data:{ //数据 arr:['apple','banana','orange','pear'

  • Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法 v-cloak   这个指令是防止页面加载时出现 vuejs 的变量名而设计的,但有时候添加了这个指令仍会显示变量,这是怎么回事呢?. v-cloak 用法: HTML代码: <div v-cloak> {{ message }} </div> CSS代码: [v-cloak] { display: none; } 这样直至div内变量编译完毕后才会显示. 但有时添加完毕后仍有部分变量会显示,这是怎么回事呢?通过控制台查看,原

  • Vue.js 中的 v-show 指令及用法详解

    1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc

  • Vue.js使用v-show和v-if的注意事项

    Vue.js使用v-show和v-if的注意事项

    关于两者的区别,官网是这样说的: 在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件.v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做--在条件第一次变为真时才开始局部编译(编译会被缓存起来). 相比之下,v-show 简单得多--元素始终被编译并保留,只是简单地基于 CSS 切换. 一般来说,v-if 有更高的切换

  • Vue.js中用v-bind绑定class的注意事项

    Vue.js中用v-bind绑定class的注意事项

    前言 在Vue.js版本:1.0.27,使用Vue.js中V-bind指令来绑定class和style时,Vue.js对其进行了增强.表达式结果出了字符串之外,还可以是对象或者数组. 这里自己对其进行了测试,发现有一下的问题: 如果使用对象语法对class进行绑定话,class名称必须加上引号,代表所对应的样式,否则会将其当做对象的属性,从而使得初始化报错. <!DOCTYPE html> <html lang="en"> <head> <me

  • VUE元素的隐藏和显示（v-show指令)

    VUE元素的隐藏和显示（v-show指令)

    除了click单击事件,还有mouseover,mouseover等鼠标事件. dbclick双击事件. v-on:click/mouseover/mouseover/mousedown/dbclick/... v-show指令 v-show="true/false" //控制元素显示/隐藏 示例代码: <!DOCTYPE html> <html> <head> <title></title> <meta charset

  • vue.js绑定事件监听器示例【基于v-on事件绑定】

    vue.js绑定事件监听器示例【基于v-on事件绑定】

    本文实例讲述了vue.js绑定事件监听器.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi

  • vue 2.0组件与v-model详解

    前言 大家可能乍一看这个标题,可能会有疑问:v-model和组件也能扯到一起?在打算写这篇文章的时候,也是这么想的.咱们按简历的那一套STAR法则来梳理一下这篇文章: 情景[Situation]: 编写通用的输入组件时,子组件要绑定到父组件的某个变量上dataA,当父组件要拿到自组件的值时不能通过this.$children.xxx取值然后付给dataA, 而是父组件可以直接this.dataA就可以取到当前子组件最新值. 任务[Task]: 实现在父组件直接this.dataA就可以取到当前子

  • Vue 进阶教程之v-model详解

    Vue 进阶教程之v-model详解

    Vue 官网教程上关于 v-model 的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下, 并介绍 Vue 2.2  v-model改进的地方,然后穿插的再说点 Vue 的小知识. 在 Vue 中,有许多方法和 Angular 相似,这主要是因为 Angular 是 Vue 早期开发的灵感来源.然而,Augular 中存在许多问题,在 Vue 中已经得到解决. v-model 用在 input 元素上时 v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model,但

随机推荐