点击上方“道源趣谈”，“设为星标”

加“星标★”，每天早晨08：35，好文必达

1.vue中的数据属性

vue采用的是响应式的方式，将数据与试图绑定，当数据变更时，视图会跟着作出响应，重新渲染视图，在vue中所有的数据都是放到data这个属性中，所以data中的属性也被称为vue的数据属性

1.1定义外部变量,赋值给Vue中data

//在外部定义一个对象 var person = { name : "sh", age : 20 }; var vm = new Vue({ el:'#app',//指定选择器 data: person //将person对象复制给Vue中的data })

上面使用js的方式定义了一个person对象，然后复制给Vue的data属性，即表示data对person对引用，那么我们就可以通过person这个对象在外部操作vue中的数据

1.2通过外部变量操作vue中的数据属性

//在外部定义一个对象 var person = { name : "sh", age : 20 }; var vm = new Vue({ el:'#app',//指定选择器 data: person //将person对象复制给Vue中的data }) //修改person中的属性的值,Vue绑定对视图会重新渲染 person.name = "hong";

可以看到，视图中对name值变成了hong

1.3直接通过vue对象变量操作data数据属性值

上面我们定义了一个外部变量赋值给Vue的data属性，从而可以直接使用外部变量来修改vue的数据，我们也可以直接使用vue对象来操作vue中的属性

            //在外部定义一个对象            var person = {                name : "sh",                age : 20            };            var vm = new Vue({                el:'#app',//指定选择器                data: person //将person对象复制给Vue中的data            })            //修改person中的属性的值,Vue绑定对视图会重新渲染            person.name = "hong";            //也可以通过Vue函数创建的对象来修改data引用的对象的属性            //比如            vm.age = 100        

上面通过Vue创建的vm对象，操作了vue中的age属性的值，下面的视图也跟着改变了

1.4 vue中属性赋值的注意地方

//在外部定义一个对象 var person = { name : "sh", age : 20 }; //给person对象添加一个属性并赋值 person.birthday = "2010-10-10"; var vm = new Vue({ el:'#app',//指定选择器 data: person //将person对象复制给Vue中的data }) person.idCard = "123123123123";

因为在渲染视图前，并没有idCard这个属性，所以控制台报错

在上面person.birthday在 person赋值给Vue的data属性前定义，所以会被加入到Vue的响应式系统中，而person.idCard这个属性是在person赋值给Vue的data后才定义的，所以不会被加入到Vue的响应式系统中，因此不会被渲染到视图上，如果要想被渲染，则需要在person赋值给data前进行定义(属性值可以为空)

//在外部定义一个对象 var person = { name : "sh", age : 20, idCard : null //如果知道要用idCard属性,则可以事先定义 }; //给person对象添加一个属性并赋值 person.birthday = "2010-10-10"; var vm = new Vue({ el:'#app',//指定选择器 data: person //将person对象复制给Vue中的data }) person.idCard = "123123123123";

1.4冻结对象，使其属性不能被修改

在vue中定义了一个Object.freeze()方法，来指定冻结某个对象，让其属性无法被修改

//在外部定义一个对象 var person = { name : "sh", age : 20, }; //冻结person对象 Object.freeze(person); var vm = new Vue({ el:'#app',//指定选择器 data: person //将person对象复制给Vue中的data }) //这里修改person的name属性无效 person.name ="hong";

Object.freeze()冻结某个对象需要在这个对象加入vue响应式系统前进行冻结，比如，如果person对象加入vue的响应式系统后才调用Object.freeze(person),那么对person的属性变量的修改还是会被渲染的，比如：

//在外部定义一个对象 var person = { name : "sh", age : 20, }; var vm = new Vue({ el:'#app',//指定选择器 data: person //将person对象复制给Vue中的data }) //冻结person对象 Object.freeze(person); //这里修改person的name属性，会被渲染 person.name ="hong";

2.vue中的实例属性

vue中除了数据属性外，vue还暴露了一些实例属性和实例方法供我们使用,通过$可以操作vue中的实例属性和实例方法

2.1通过$操作vue实例属性

//在外部定义一个对象 var person = { name : "sh", age : 20, }; var vm = new Vue({ el:'#app',//指定选择器 data: person //将person对象复制给Vue中的data }) //通过$访问vue提供的实例属性 console.log(vm.$el) vm.$data.name = "hyj"; console.log(vm.$data.name)

2.2通过$调用vue暴露的实例方法

//在外部定义一个对象 var person = { name : "sh", age : 20, }; var vm = new Vue({ el:'#app',//指定选择器 data: person //将person对象复制给Vue中的data }) //通过$调用vue提供的实例方法,watch方法监听vm数据属性name的值的变化 vm.$watch('name',function(newValue,oldValue){ console.log(newValue +'==='+oldValue); }); person.name = "hyj";

3.vue的实例方法

在vue实例中，通过methods属性指定的方法为vue的实例方法，vue的实例方法可以在{{}}中调用,也可以在vue的指令中调用

var vm = new Vue({ el:'#app',//指定选择器 methods:{//定义实例方法 message:function(){ return "aa"; }, click1:function(){ console.log("ff"); } } });

在实例方法中可以通过this对象来访问数据属性

body>        

var vm = new Vue({ el:'#app',//指定选择器 data:{ name:"lis" }, methods:{ message:function(){ return this.name;//通过this调用数据属性 } } });