理论知识
- 数据响应式 所谓响应是指对每一次变化,都做出相应的动作变化。那么数据响应式是指当赋值给变量的数据发生变化时,代码中使用该变量的位置也发生数据更新。即数据动态变化。
- 数据绑定 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作者自定义的网页标签属性。因此他的位置是在标签的左尖括号内部。