vue实例的属性和方法

vue实例的属性和方法

1. 属性

vm.$el
#指定要绑定的元素 vm.$data
#Vue 实例的数据对象 vm.$options
#获取自定义属性的值
new Vue({
customOption: 'foo', 自定义属性
created: function () {
console.log(this.$options.customOption) // => 'foo'
}
})
vm.$refs
#获取所有ref属性的标签
<h2 ref="hello">你好</h2>
<p ref="world">世界</p>
console.log(vm.$refs);
//{hello: h2, world: p} // vm.$refs.hello.style.color='blue'; 给标签添加style

2. 方法

vm.$mount()
#手动挂载
//vm.$mount('#itany'); vm.$destroy()
#销毁实例 vm.$nextTick(callback)
#将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。
data:{
user:{
id:1001,
name:'tom'
}
}, vm.$set(object,key,value)
#添加属性值
Vue.set(this.user,'age',1) vm.$delete(object,key)
#删除属性值
Vue.delete(this.user,'age') vm.$watch(data,callback[,options])
#更新属性值 vm.$watch(data,callback[,options])
#监测数值变化
<!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);
}); </script> </body>
</html>
上一篇:SQL Server时间日期的数据类型和函数


下一篇:mysql优化 个人笔记 非礼勿扰 -m04