vue.js响应式数据更新系统(四)

每个 Vue应用都是通过 Vue函数创建一个新的Vue实例开始的。

var vm = new Vue({
....
})

vue 没完全遵守mvvm模型,但也收到此模型的启发而设计,故常用vm(viewmodel)代表vue变量。

数据与方法

当一个Vue实例被创建时,它将data对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时,视图会产生“响应”,即匹配更新为最新值。

<div id="app">
	{{a}}
</div>

<script type="text/javascript">
	
var data = { a : 1 };
var vm = new Vue({
	el   : "#app",
	data : data
});
setTimeout(function(){data.a = "test"}, 2000)

</script>

a变量在初始化时就被加入到 data对象中,所以vue响应式系统将监控 a变量的值,当定时 2 秒后, 变量 a 的值变换, 相应的视图中的变量值也随之变换。
**只有在 new vue() 时加入data 对象中的 属性的值才会监控。

其他方法:

  1. 使用 Object.freeze() 使一个对象不响应式
  2. $watch方法 (变量名,回调函数)
vm.$watch("a", function(newVal, oldVal){
	console.log(newVal,oldVal);
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值