Vue-26、Vue内置指令v-cloak与v-once以及v-pre-编程知识

Vue-26、Vue内置指令v-cloak与v-once以及v-pre

1、v-cloak

本质上是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-cloak</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript" src="./js/dayjs.min.js"></script><style><!-- 选中所有具有v-cloak的标签 -->[v-cloak]{display: none;}</style>
</head>
<body>
<div id="root"><h1 v-cloak>{{name}}</h1>
</div>
<script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{name:'尚硅谷',},})
</script>
</body>
</html>

2、v-once

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-once</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript" src="./js/dayjs.min.js"></script><style></style>
</head>
<body>
<div id="root"><h2 v-once>初始化的n值是：{{n}}</h2><h2 >当前的n值是：{{n}}</h2><button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{n:1,},})
</script>
</body>
</html>

在这里插入图片描述

v-once 所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v-onec所在结构的更新，可以用于优化性能。

3、v-pre

跳过其所在节点的编译过程
可利用他跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-once</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript" src="./js/dayjs.min.js"></script><style></style>
</head>
<body>
<div id="root"><h2 v-pre>vue其实很简单 </h2><h2 >当前的n值是：{{n}}</h2><button v-pre @click="n++">点我n+1</button>
</div>
<script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{n:1,},})
</script>
</body>
</html>