zoukankan      html  css  js  c++  java
  • 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作者自定义的网页标签属性。因此他的位置是在标签的左尖括号内部。
  • 相关阅读:
    Linux下g++编译与使用静态库和动态库(仅命令)
    Shell算数运算
    (转载)解决/usr/bin/ld: cannot find -lxxx 问题
    (转)C语言中的EOF和feof()
    204 Count Primes
    228 Summary Range
    235 Lowest Common Ancestor of a Binary Search Tree
    242 Valid Anagram
    简易计算器实现优化
    原生JS操作cookie
  • 原文地址:https://www.cnblogs.com/guojuboke/p/12300830.html
Copyright © 2011-2022 走看看