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

什么是响应式

• 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

微信公众号：测试生财（定期分享独家内容和资源）

​