• 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作者自定义的网页标签属性。因此他的位置是在标签的左尖括号内部。
  • 相关阅读:
    使用git遇到的一些问题
    小程序的生命周期
    git status -s命令解析
    JavaScript 关闭浏览器窗口
    JavaScript 如何编写计算器
    JavaScript 数组对象的去重
    JavaScript 数组排序(从大到小,从小到大)
    JavaScript 常用的Math对象
    JavaScript 获取 当前日期和三十天以前日期
    JavaScript 获取数组的最大值和最小值
  • 原文地址:https://www.cnblogs.com/guojuboke/p/12300830.html
Copyright © 2020-2023  润新知