vue.js v-cloak指令
可以使用 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指令的更多相关文章
- Vue.js之常用指令
vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...
- 1.Vue.js的常用指令
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...
- Vue.js简介及指令
1.Vue.js的特点 Vue.js是一个Javascript MVVM(Model-View-ViewModel)库,与传统Jquery的区别在于,Vue.js舍弃了繁杂的DOM操作, 如取DOM值 ...
- Vue.js:自定义指令
ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...
- Vue.js——常用的指令
1.v-on:指令监听DOM事件,并在触发时运行一些javaScript代码. <div id='myView'> <img src="img/se.png" v ...
- vue.js 四(指令和自定义指令)
官方的指令说明已经很简单了,这里再写一遍,也是自己加深一下印象 v-text 就是写入单纯的文本,可以忽略这个指令直接双花括号代替 <span v-text="msg"> ...
- vue.js常用指令
本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- Vue.js模板语法介绍
Vue.js模板.指令 模板语法概述 1.如何理解前端渲染? 把数据填充到HTML标签中,一般我们使用Ajax将数据从后台查询出,结合模板() 2.前端渲染方式 2.1.原生js拼接字符串 使 ...
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
随机推荐
- 前端通过将json转成excel文件下载
方法一: 将table标签,包括tr.td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html,代码如下 ...
- Java程序员必会常用Linux速查手册
目錄 系统服务管理 文件管理 查看日志 压缩与解压 磁盘和网络管理 防火墙 ftp操作 软件的安装与管理 其他 系统服务管理 systemctl 输出系统中各个服务的状态: systemctl lis ...
- 剑指offer58:对称的二叉树。判断一颗二叉树是不是对称的,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的
1 题目描述 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. 2 思路和方法 定义一种遍历算法,先遍历右子结点再遍历左子结点:如对称先序 ...
- 第五章:标准I/O库
本章用于解析C语言标准I/O库,之所以在UNIX类系统的编程中会介绍C语言标准库,主要是因为UNIX和C之间具有密不可分的关系. 标准I/O库相比于操作系统的I/O库,具有更高的效率和可移植性,前者是 ...
- “Using 声明”在 C# 7.3 中不可用。请使用 8.0 或更高的语言版本。
Core3.0升级至3.1时候报错:“Using 声明”在 C# 7.3 中不可用.请使用 8.0 或更高的语言版本. 参照微软文档:https://docs.microsoft.com/zh-cn/ ...
- Tree Generator™ CodeForces - 1149C (线段树,括号序列)
大意: 给定括号序列, 每次询问交换两个括号, 求括号树的直径. 用[ZJOI2007]捉迷藏的方法维护即可. #include <iostream> #include <algor ...
- Unity插件研究-EasyTouch V5
抽空研究了下Easy Touch 5插件,发现确实很好用,下面是相应的用法: 1. Easy Touch Controls:实现虚拟摇杆的组件 在项目的"Hierarchy"窗口下 ...
- 一步一步写News App(一)
一. 新建一个安卓工程,安卓版本全部选2.3.3 二.第一步,添加一个tabhost控件 在MainActivity中声明TabHost tabHost; 然后新建一个private void ini ...
- Java Web-JSTL
Java Web-JSTL 概念 Java Server Pages Tag Library:JSP标准标签库 是由Apache组织提供的开源.免费JSP标签 用于简化和替换JSP页面上的Java代码 ...
- 前端html转pdf
转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...