Vue自学之路6-vue模版语法（数据响应式)

16lz 2021-04-12

什么是响应式

html5中响应式：屏幕尺寸变化导致样式的变化。
数据的响应式（数据变化导致页面内容的变化）

什么是数据绑定：

　　数据绑定：将数据填充到HTML标签中，html的视图和数据相互作用，相互影响。

v-once：只编译一次，可以理解HTML中标签变为只读（数据变化不会在影响视图变化）。

<div id='app'>　　<!-- 显示的信息后续不需要修改，可以直接声明v-once，可以提高性能-->　　<div v-once>{{msg}}</div>　　<div>{{ msg + '---' + 'Vue' }}</div></div> <!-- 先下载vue.js --><script type='text/javascript' src='js/vue.js'></script><script>//1. html中书写标签//2. 引入vue.js//3. 使用vue进行数据渲染。var vm = new Vue({　　el: '#app', //绑定到id选择器　　data: {　　　　"msg": "hello world"　　　　}});</script>

打开Chrome的控制台（F12->console）

输入：vm.msg
会显示msg的值
输入: vm.msg=123
msg的值变化，导致页面view发生变化（带v-once的数据不会变化）

传送门：2021最新测试资料&大厂职位

博主：测试生财（一个不为996而996的测开码农）
座右铭：专注测试开发与自动化运维，努力读书思考写作，为内卷的人生奠定财务自由。
内容范畴：技术提升，职场杂谈，事业发展，阅读写作，投资理财，健康人生。
csdn：https://blog.csdn.net/ccgshigao
博客园：https://www.cnblogs.com/qa-freeroad/
51cto：https://blog.51cto.com/14900374
微信公众号：测试生财（定期分享独家内容和资源）

©著作权归作者所有：来自51CTO博客作者测试生财的原创作品，如需转载，请注明出处，否则将追究法律责任

好知识，才能预见未来

赞赏

0人进行了赞赏支持

更多相关文章

随机推荐