Vue.js学习系列(十二)---属性和方法

属性和方法

每个Vue实例都会代理data对象里所有的属性

var data = { a: 1 }

var vm = new Vue({

el:'#app',

data:mydata

})

vm.a === data.a // -> true

因为其响应式,无论是改变vm.a还是mydata.a,他们的值都会一起改变,但是!如果某属性是在创建了该实例后被添加进去的,则该属性不会触发视图更新

//同样设置属性也会影响到原始数据

vm.a = 2

mydata.a // -> 2

//反之亦然

mydata.a = 3

vm.a // -> 3

除了data属性,Vue实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀$,以便与代理的data属性区分。例如:

var data = { 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 (newVal, oldVal) {

//这个回调将在`vm.a`改变后调用

})

注意,不要在实例属性或者回调函数中(如vm.$watch('a', newVal => this.myMethod()))使用箭头函数。因为箭头函数绑定父上下文,所以this不会像预想的一样是Vue实例,而是this.myMethod未被定义。

实例属性和方法的完整列表中查阅官方API.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容