关于Vue的学习—v-once、v-clock、v-pre

最新推荐文章于 2024-06-27 22:42:30 发布

代码园与文学坊

最新推荐文章于 2024-06-27 22:42:30 发布

阅读量282

点赞数

分类专栏：《Vue学习笔记》文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_45627039/article/details/131789480

版权

《Vue学习笔记》专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js的三个重要指令：v-once用于优化渲染性能，只渲染元素和组件一次；v-cloak用于解决数据加载时的源码显示问题，确保元素在Vue编译完成前保持隐藏；v-pre则跳过元素及其子元素的编译，提高编译速度。

摘要由CSDN通过智能技术生成

1.v-once

v-once指令只渲染元素和组件一次，随后的渲染，如果使用了此指令的元素、组件及其所有子节点，则都会当作静态内容并跳过。这个特性可以用于优化更新性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-once指令</title>
</head>
<body>
   <div id="app">
   	<p> <input type="type" v-model="message"/></p>
   	<p v-once> 只渲染一次: {{message}} </p>
   	<p> 可以改变: {{message}} </p>
   </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                message :"Hello"
            }
        })
    </script>
    
</body>
</html>

在浏览器中运行的效果如图所示:
在这里插入图片描述
运行上面的示例代码，当打开浏览器页面时，DOM元素中的{{message}}渲染了message属性的值，当使用v-model绑定的输入框再次改变message属性的值时，添加了v-once指令的标签则没有发生任何变化。

2.v-cloak

v-cloak指令将会保持在DOM元素上，直到关联实例结束编译后自动移除。v-cloak指令的使用场景非常有限，常用于解决网络较慢时数据的加载问题。用户在访问Vue.js实现的网站时，如果网络延迟，网页还在加载Vue.js，便会导致Vue来不及渲染，这时页面就会显示出Vue源代码，我们就可以使用v-cloak指令来解决这一问题。

  <div id="app">
		{{message}}
   </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                message :"hello world"
            }
        })
    </script>

当网络较慢时，在浏览器中打开页面，此时会在页面中出现Vue源码，直到Vue.js加载完成并编译之后，才会显示正常的数据内容，如图所示。

在这里插入图片描述
为了解决上面代码运行的问题，我们可以为DOM元素添加v-cloak指令，并使用属性选择器为指定的DOM元素设置隐藏样式。v-cloak指令可以保持在DOM元素上，直到编译结束才自动移除，这样就可以在Vue完成编译之前使指定的DOM元素处于隐藏状态，等编译完成后，CSS样式就对该DOM元素无效了。

	<style>
		[v-clock] {
			display: none;
		}
	</style>
	
   <div id="app">
		{{message}}
   </div>

3.v-pre

v-pre指令会跳过这个元素和它的子元素的编译过程，所以可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译，代码如下：

<span v-pre>{{this will not be compiled}}</span>

在浏览器中运行的效果如图所示。

在这里插入图片描述

代码园与文学坊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
关于Vue的学习—v-once、v-clock、v-pre

v-cloak指令可以保持在DOM元素上，直到编译结束才自动移除，这样就可以在Vue完成编译之前使指定的DOM元素处于隐藏状态，等编译完成后，CSS样式就对该DOM元素无效了。运行上面的示例代码，当打开浏览器页面时，DOM元素中的{{message}}渲染了message属性的值，当使用v-model绑定的输入框再次改变message属性的值时，添加了v-once指令的标签则没有发生任何变化。v-pre指令会跳过这个元素和它的子元素的编译过程，所以可以用来显示原始Mustache标签。
复制链接

扫一扫