vue实例的属性和方法
一、 vue实例的属性和方法
1、属性
1、常用属性
vm.$el #获取的是个dom对象可以点下面的属性
vm.$data #获取的是个。。。。
vm.$options
vm.$refs
2、示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue实例的属性和方法</title> <script src="js/vue.js"></script> </head> <body> <div id="itany"> {{msg}} <h2 ref="hello">你好</h2> <p ref="world">世界</p> <hr> <h1 ref="title">标题：{{name}}</h1> </div> <script> /*var vm=new Vue({ // el:'#itany', data:{ msg:'welcome to itany' }, name:'tom', age:24, show:function(){ console.log('show'); } });*/ /** * 属性 */ //vm.属性名 获取data中的属性，简单写法 // console.log(vm.msg); //vm.$el 获取vue实例关联的元素 // console.log(vm.$el); //DOM对象 // vm.$el.style.color='red'; //vm.$data //获取数据对象data // console.log(vm.$data); // console.log(vm.$data.msg);//获取数据对象data下的属性 //vm.$options //获取自定义属性 // console.log(vm.$options.name); // console.log(vm.$options.age); // vm.$options.show(); //vm.$refs 获取所有添加ref属性的元素 // console.log(vm.$refs); // console.log(vm.$refs.hello); //DOM对象 // vm.$refs.hello.style.color='blue'; </script> </body> </html>
2、方法
1、与数据相关的方法
vm.$set(object,key,value) #为属性添加（修改）一个属性并且设置键和值，object为对象，key为键，value为值，由于通过绑定方法添加属性不会被实例对象所监视，所以通过$set方法就可以被监视。
vm.$delete(object,key) #删除实例属性
vm.$watch(data,callback[,options])#用来观察实例中属性值的变化
2、示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加和删除属性：$set、$delete</title> <script src="js/vue.js"></script> </head> <body> <div id="itany"> <button @click="doUpdate">修改属性</button> <button @click="doAdd">添加属性</button> <button @click="doDelete">删除属性</button> <hr> <h2>{{user.name}}</h2> <h2>{{user.age}}</h2> </div> <script> var vm=new Vue({ el:'#itany', data:{ user:{ id:1001, name:'tom' } }, methods:{ doUpdate(){ this.user.name='汤姆' }, doAdd(){ // this.user.age=25; //通过普通方式为对象添加属性时vue无法实时监视到 // this.$set(this.user,'age',18); //通过vue实例的$set方法为对象添加属性，可以实时监视，局部方法。this指代的是实例对象即vm // Vue.set(this.user,'age',22);//全局方法，也可写在实例外面，局部方法和全局方法用法相同但是就只缺一个$之差。vue指代的是vue对象 if(this.user.age){ this.user.age++; }else{ Vue.set(this.user,'age',1); } // console.log(this.user); }, doDelete(){ if(this.user.age){ // delete this.user.age; //无效 Vue.delete(vm.user,'age');//删除对象属性,vm=this Vue.delete(this.user,'age');//删除对象属性 } } } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>监视数据的变化：$watch</title> <script src="js/vue.js"></script> </head> <body> <div id="itany"> <input type="text" v-model="name"> <h3>{{name}}</h3> <hr> <input type="text" v-model="age"> <h3>{{age}}</h3> <hr> <input type="text" v-model="user.name"> <h3>{{user.name}}</h3> </div> <script> var vm=new Vue({ el:'#itany', data:{ name:'tom', age:23, user:{ id:1001, name:'alice' } }, watch:{ //方式2：使用vue实例提供的watch选项 age:(newValue,oldValue) => { console.log('age被修改啦，原值：'+oldValue+'，新值：'+newValue); }, user:{ handler:(newValue,oldValue) => { console.log('user被修改啦，原值：'+oldValue.name+'，新值：'+newValue.name); }, deep:true //深度监视，当对象中的属性发生变化时也会监视 } } }); //方式1：使用vue实例提供的$watch()方法 vm.$watch('name',function(newValue,oldValue){ console.log('name被修改啦，原值：'+oldValue+'，新值：'+newValue); }); vm.$watch('name',function(newValue,oldValue){ console.log('name被修改啦，原值：'+oldValue+'，新值：'+newValue); }.true); //如果监视的是个对象，就要启用深度监视，但是监视后得到的原值和新值都是一样 </script> </body> </html>
3、与生命周期相关的方法
vm.$mount() #手动挂载实例
vm.$destroy() #注销实例
vm.$nextTick(callback) #dom更新完后执行回调函数
4、示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue实例的属性和方法</title> <script src="js/vue.js"></script> </head> <body> <div id="itany"> {{msg}} <h2 ref="hello">你好</h2> <p ref="world">世界</p> <hr> <h1 ref="title">标题：{{name}}</h1> </div> <script> /*var vm=new Vue({ // el:'#itany', data:{ msg:'welcome to itany' }, name:'tom', age:24, show:function(){ console.log('show'); } });*/ /** * 方法 */ //vm.$mount() 手动挂载vue实例 // vm.$mount('#itany'); var vm=new Vue({ data:{ msg:'欢迎来到南京网博', name:'tom' } }).$mount('#itany'); //vm.$destroy() 销毁实例但是属性还在。 // vm.$destroy(); // vm.$nextTick(callback) 在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的DOM //修改数据 vm.name='汤姆'; //DOM还没更新完，Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间！！ // console.log(vm.$refs.title.textContent);//获取元素里面的文本 vm.$nextTick(function(){ //DOM更新完成，更新完成后再执行此代码 console.log(vm.$refs.title.textContent); }); </script> </body> </html>
