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>

View Code

　　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>

View Code

转载于:https://www.cnblogs.com/xuanan/p/7854148.html

vue实例的属性和方法相关推荐

Vue2.x源码学习笔记-Vue实例的属性和方法整理
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...
Vue实例的属性及模板渲染
Vue实例的属性及模板渲染 1 概述 2 el:与DOM元素绑定 3 data:定义双向绑定的数据 4 computed:计算属性 5 methods:定义Vue实例的方法 6 Vue中的三种模板 6 ...
vue系列：vue的常用属性和方法
vue系列:vue的常用属性vm.$ el.vm.$ data.vm.$ options.vm.$ refs和方法vm.$ mount().vm.$ nextTick().vm.$ set().vm. ...
python methodtype_Python的实例定属性和方法或类绑定方法
一.给实例对象绑定属性和方法: 1.给实例绑定属性:先定义一个Student类 #!/usr/bin/python class Student(object): pass 然后绑定属性: s = St ...
java基础之类、对象、实例、属性、方法等概念理解
在之前的文章里,讲过一些java基础概念,并写了一个简单的java入门代码,通过这些代码,对类和方法的定义做了部分说明. java基础介绍及第一个java程序如果是了解java的同学,可能就没什么问 ...
python-面向对象名词解析（类、实例、属性、方法、对象）
面向对象的概念总结类: 一系列对象的特征与技能的抽象如何理解:我们把现实生活中的物体可以抽象成一个个对象,如学校中的学生: 1.归类--我们可以把学生都归成一个学生类. 2.抽 ...
vue的methods属性的方法中出现回调函数，在回调函数内部获取data中的数据
在vue中,可能会遇到在methods属性中书写的方法中出现回调函数的情况,如以下代码: data(){return{gemometry: ""} } methods: {draw ...
动态给实例添加属性和方法
from types import MethodType#创建一个空类 class Person(object):__slots__ = ("name","age&quo ...
二、Vue（发送AJAX请求、Vue生命周期、计算属性、属性和方法、自定义指令、过渡(动画)）
一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用 ...

vue实例的属性和方法

vue实例的属性和方法相关推荐

最新文章

热门文章