数据与方法
当一个Vue实例被创建时,它将data 对象中的所有的属性加入到Vue的响应式系统中。当这些属
性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
< !DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type= "text/javascript" charset= "utf-8"></script>
</head>
<body>
<div id="app"> //通过`<div>`标签声明一个a变量
{{ a }}
</div>
<script type="text/javascript">
var data={ a:1 } //我们的数据对象,在new vue之前创建一个data对象
var vm = new Vue({ //该对象被加入到一个Vue实例中
el: ' #app', //使用id选择器选中div标签
data: data //属性data用于保存数据,在标签中声明了哪些变量,就需要注册这些变量并初始化赋值
});
data.a="HI !" //改变之前声明的变量a的属性,视图会重新进行渲染
//获得这个实例上的属性
//返回源数据中对应的字段
vm.a="test" ;
data.a == vm.a ; // 此时data渲染的视图和vm渲染的一样
//设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
//反之亦然
data.a=3
vm.a //=> 3
</script>
</body>
</html>
当这些数据改变时,视图会进行重渲染。值得注意的是只有当实例被创建时data 中存在的属性才
是响应式的。也就是说如果你添加一个新的属性,比如:
vm.b = 'hi
就需要在new vue之前进行一个声明,创建一个var data={ b:1 }的对象,这样该属性才可以是响应式的。
再来多学一招!
如果大家不想存在的属性是响应式的,就可以使用bject.freeze() ,这会阻止修改现有的属性,也意味若响应系统无法再追踪变化。
var obj={
foo:” bar'
Object. freeze(obj)
new Vue((
el: #app
data: obj
))
HTML
<div id=" app " >
<p> {{ foo }} </p>
<!--这里的foo”不会更新! -->
<button v-on:click="foo =' baz ' " >Change it</button>
</div>
除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀$,以便与用户定义
的属性区分开来。例如:
vardata={a:1}
var vm = new Vue({
el:‘#example' 。
data: data
})
vm.$data === data // => true
vm.$el === document . getElementById(' example') // =>true
// $watch 是一个实例方法
vm. $watch('a', function (newValue, oldValue) {
// 这个回调将在'vm.a" 改变后调用
代码中的watch是非常有用的方法,直译就是观察的意思,它可以观察一个变量的变化,并且可以获取变化之前和变化之后的结果,可以在控制台看到变化结果,语法格式如上述代码所示。
看个例子
< !DOCTYPE htm1>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script srcm"vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{a}}
</div>
<script type="text/javascript">
var data={a:1};
var vm = new Vue({
el
: "#app",
data : data
});
vm. $watch('a', function(newVal, oldVal){
console. 1og(newVa1, o1dVal);
}) //将watch放在变量变化之前
vm. $data.a = "test"
</script>
</body>
</html>
如图,可以看到变化的结果,控制台会有所记录。
以后你可以在API参考中查阅到完整的实例属性和方法的列表。
好啦,本次分享你get到了吗?