vue指令：v-cloak渲染指令(v-cloak 指令是解决屏幕闪动的好方法)

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>[v-clock]{display: none;}</style>
</head>
<body><div id="app" v-clock>{{a}}</div><script src = "js/vue.js"></script><script>var vue = new Vue({el: "#app",data: {a:'我是渲染的指令-v-cloak'}})</script>
</body>
</html>

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

vue指令：v-cloak渲染指令(v-cloak 指令是解决屏幕闪动的好方法)相关推荐

Vue中常用的8种v指令
Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text="变量/表达式" 文本的设置字符串变量+数字可以 ...
Vue指令之列表渲染
1. v-for 指令简介 v-for 指令基于一个数组来渲染一个列表. v-for 指令需要使用 item in/of items 形式的语法其中 items 是源数据数组,item 是被迭代的数 ...
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...
Vue核心技术-5,列表渲染指令 v-for
一,前言目前对前期目录进行了简单的梳理,周末会找时间调一下顺序, 顺便再补充一下遗漏的知识点,让过度更加平缓一些, 例如前面没有说计算属性,但目前的列表渲染就要用到了...囧在对目录梳理的过程中,发 ...
Vue2.0开发之——Vue基础用法-内容渲染指令(16)
一概述指令的概念内容渲染指令介绍二指令的概念指令(Directives)是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构 vue中的指令按照不同的用途,可以分为如下6大类 ...
Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...
Vue.js 学习笔记二，一些输出指令
Vue的一些输出指令 {{字段}},v-text指令,v-html指令 <html> <head><meta name="viewport" cont ...
Vue学习笔记之02-Mustache语法以及一些指令
Mustache语法又称大胡子语法就是用两个大括号来包裹变量从而挂钩Vue去解析里面的代码比如 <h2>{{message}}</h2><!-- Mustache ...
【vue系列-04】vue的表单数据收集，基本指令和自定义指令
vue的表单数据收集.指令一,vue的核心属性 1,收集表单数据 1.1,收集数据案例 1.1.1,type类型的输入框 1.1.2,radio类型的单选框 1.1.3,checkbox类型的复选框 ...

vue指令：v-cloak渲染指令(v-cloak 指令是解决屏幕闪动的好方法)

vue指令：v-cloak渲染指令(v-cloak 指令是解决屏幕闪动的好方法)相关推荐

最新文章

热门文章