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

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>

在浏览器中运行的效果如图所示:
关于Vue的学习—v-once、v-clock、v-pre_第1张图片
运行上面的示例代码,当打开浏览器页面时,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加载完成并编译之后,才会显示正常的数据内容,如图所示。

关于Vue的学习—v-once、v-clock、v-pre_第2张图片
为了解决上面代码运行的问题,我们可以为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>

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

关于Vue的学习—v-once、v-clock、v-pre_第3张图片

你可能感兴趣的:(Vue学习笔记,vue.js,前端)