当一个Vue的实例被创建时，会将data的所有属性加入到响应式系统中，当这些值发生改变时，视图将会产生响应，即更新为新的值。
初始化后，直接增加data里的属性时不生效的， 不过通过vue的实例对象app增加属性是有效的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo1</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 获取变量的值 -->
{{value}}
{{value2}}
{{value3}}
</div>
<script type="text/javascript">
var data = {value: 1123};
var app = new Vue({
el: "#app", // 元素的id
data: data
})
// data.value="3333" 生效
// app.value=6666 生效
// app.value2=9999 生效
// app.value3=8888 生效
data.value2 = 0000 // 不生效
data.value3 = 23232 // 不生效
</script>
</body>
</html>
vue暴露的方法
vue实例暴露了一些有用的实例属性和方法，它们都有前缀 $，以便与用户定义的属性和方法区分开来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo1</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 获取变量的值 -->
{{value}}
</div>
<script type="text/javascript">
var data = {value: 1123};
var app = new Vue({
el: "#app", // 元素的id
data: data
})
data.value="3333" //生效
// app.value=6666 生效
// app.value2=9999 生效
// app.value3=8888 生效
//data.value2 = 0000 // 不生效
//data.value3 = 23232 // 不生效
app.$watch('value', function(newVal, oldVal){ // 监控value的变化
console.log( newVal + ',' + oldVal)
})
data.value = 1231231 // 生效
</script>
</body>
</html>
网友评论