vue指令(5)v-once

理论知识

  • 数据响应式 所谓响应是指对每一次变化,都做出相应的动作变化。那么数据响应式是指当赋值给变量的数据发生变化时,代码中使用该变量的位置也发生数据更新。即数据动态变化。
  • 数据绑定 vue通过自定义指令,将数据和网页标签关联起来。
  • 基于数据绑定和数据响应式,vue实现了将变化的数据动态的写入变量,在浏览器中动态显示。
  • 在某些场合,可能只想让数据只响应一次,因此需要阻止vue的数据动态变化功能。于是作者创造了v-once指令,顾名思义,once,只响应一次。

实践

  • 该指令无需赋值,只用将该指令作为属性写入网页标签的左尖括号中即可。其后该标签只会初始化一次。
  • 在浏览器的调试界面,在console命令行下,输入代码中创建的vue对象所赋值的对象,查看vue实例。
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="vue.js"></script>
</head>
<body>
	<div id="app">
		<div v-once>{{ msg}} </div> // 在浏览器的console命令行下输入 app.msg=123,页面不发生变化
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data:{
				msg:'<h1>124</h1>'//是html片段
			}
		})
	</script>
</body>
</html>

总结

  • 指令的本质是vue作者自定义的网页标签属性。因此他的位置是在标签的左尖括号内部。
原文地址:https://www.cnblogs.com/guojuboke/p/12300830.html