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

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

html:

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

  

js:

<script>
    var vm = new Vue({
        el: '#app',
        data: {
                 context: 'Hello  World~'
         }
    })
</script>

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

js 不变,在Div中加入v-cloak指令。

html:

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

css:

[v-cloak]{
    display: none;
}

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

vue.js v-cloak指令的更多相关文章

  1. Vue.js之常用指令

    vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...

  2. 1.Vue.js的常用指令

      Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...

  3. Vue.js简介及指令

    1.Vue.js的特点 Vue.js是一个Javascript MVVM(Model-View-ViewModel)库,与传统Jquery的区别在于,Vue.js舍弃了繁杂的DOM操作, 如取DOM值 ...

  4. Vue.js:自定义指令

    ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...

  5. Vue.js——常用的指令

    1.v-on:指令监听DOM事件,并在触发时运行一些javaScript代码. <div id='myView'> <img src="img/se.png" v ...

  6. vue.js 四(指令和自定义指令)

    官方的指令说明已经很简单了,这里再写一遍,也是自己加深一下印象 v-text 就是写入单纯的文本,可以忽略这个指令直接双花括号代替 <span v-text="msg"> ...

  7. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

  8. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  9. Vue.js模板语法介绍

    Vue.js模板.指令 模板语法概述 1.如何理解前端渲染? ​ 把数据填充到HTML标签中,一般我们使用Ajax将数据从后台查询出,结合模板() 2.前端渲染方式 2.1.原生js拼接字符串 ​ 使 ...

  10. Vue.js——60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

随机推荐

  1. 前端通过将json转成excel文件下载

    方法一: 将table标签,包括tr.td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html,代码如下 ...

  2. Java程序员必会常用Linux速查手册

    目錄 系统服务管理 文件管理 查看日志 压缩与解压 磁盘和网络管理 防火墙 ftp操作 软件的安装与管理 其他 系统服务管理 systemctl 输出系统中各个服务的状态: systemctl lis ...

  3. 剑指offer58:对称的二叉树。判断一颗二叉树是不是对称的,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的

    1 题目描述 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. 2 思路和方法 定义一种遍历算法,先遍历右子结点再遍历左子结点:如对称先序 ...

  4. 第五章:标准I/O库

    本章用于解析C语言标准I/O库,之所以在UNIX类系统的编程中会介绍C语言标准库,主要是因为UNIX和C之间具有密不可分的关系. 标准I/O库相比于操作系统的I/O库,具有更高的效率和可移植性,前者是 ...

  5. “Using 声明”在 C# 7.3 中不可用。请使用 8.0 或更高的语言版本。

    Core3.0升级至3.1时候报错:“Using 声明”在 C# 7.3 中不可用.请使用 8.0 或更高的语言版本. 参照微软文档:https://docs.microsoft.com/zh-cn/ ...

  6. Tree Generator™ CodeForces - 1149C (线段树,括号序列)

    大意: 给定括号序列, 每次询问交换两个括号, 求括号树的直径. 用[ZJOI2007]捉迷藏的方法维护即可. #include <iostream> #include <algor ...

  7. Unity插件研究-EasyTouch V5

    抽空研究了下Easy Touch 5插件,发现确实很好用,下面是相应的用法: 1. Easy Touch Controls:实现虚拟摇杆的组件 在项目的"Hierarchy"窗口下 ...

  8. 一步一步写News App(一)

    一. 新建一个安卓工程,安卓版本全部选2.3.3 二.第一步,添加一个tabhost控件 在MainActivity中声明TabHost tabHost; 然后新建一个private void ini ...

  9. Java Web-JSTL

    Java Web-JSTL 概念 Java Server Pages Tag Library:JSP标准标签库 是由Apache组织提供的开源.免费JSP标签 用于简化和替换JSP页面上的Java代码 ...

  10. 前端html转pdf

    转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...