vue实例的属性和方法
1.属性
- vm.$el ===> 用于获取vue实例内el指定的dom对象
- vm.$data ===> 用于获取vue实例内的数据对象 data
- vm.$options ===> 用于获取vue实例内的自定义属性或方法
vm.$options方法实例:
var vm = new Vue({
el: "#app",
data:{
msg:"hello vue!"
},
name:"yang",
age:27,
show:function(){
console.log("自定义show方法");
}
})
console.log(vm.$el); // 获得了el的dom对象
console.log(vm.$data); // 获得了data对象
console.log(vm.$options); // 获得了自定义的属性对象
console.log(vm.$options.name); // 获得了自定义的name,值为:yang
vm.$options.show(); // 获取了自定义的show方法,并执行值为:自定义show方法
- vm.$refs ===> 用于所有添加过ref属性的元素
vm.$refs方法实例:
<div class="box" id="app">
<div class="hehe" ref="divDom"></div>
<p class="hehe" ref="pDom"></p>
</div>
var vm = new Vue({
el: "#app",
data:{
}
})
console.log(vm.$refs) // 获取到了所有带有 ref的dom标签
console.log(vm.$refs.pDom) // 获取到了带有ref属性并且值为pDom的标签
console.log(vm.$refs.divDom) // 获取到了带有ref属性并且值为divDom的标签
// 可以这样设置
vm.$refs.pDom.style.color = "red";
2.方法
- vm.$mount ===> 手动挂载vue实例
有两种写法分别为:
1)、
var vm = new Vue({
// el: "#app", // 注释了挂载到dom对象
data:{
msg:"hello vue!"
}
})
vm.$mount("#app"); // 这样也可以挂载到dom对象
2)、
var vm = new Vue({
// el: "#app", // 注释了挂载到dom对象
data:{
msg:"hello vue!"
}
}).$mount("#app"); // 在实例最后调用$mount("需要挂载的dom");
- vm.$destroy() ===> 用于销毁vue实例
- vm.$nextTick(callback) ===> 用于数据更改,dom更新完成后执行
var vm = new Vue({
// el: "#app", // 注释了挂载到dom对象
data:{
msg:"hello vue!"
}
}).$mount("#app");
vm.msg = "hello world!"; // 这里更改了数据
// 这里获取DOM的内容为:hello vue!,因为dom数据还没更新完成
console.log(vm.$refs.pDom.innerHTML);
// 这里获取DOM的内容为:hello world!,因为dom数据已经更新完成
vm.$nextTick(function(){
console.log(vm.$refs.pDom.innerHTML);
});
- vm. s e t ( o b j e c t , k e y , v a l u e ) 动 态 地 为 对 象 新 增 一 个 值 , 并 且 页 面 上 的 模 版 会 实 时 地 动 态 更 新 渲 染 值 v m . set(object, key, value) 动态地为对象新增一个值,并且页面上的模版会实时地动态更新渲染值 vm. set(object,key,value)动态地为对象新增一个值,并且页面上的模版会实时地动态更新渲染值vm.set 实例用法
<div class="box" id="app">
<button @click="addFn">添加一个属性</button>
{{user.name}}
{{user.num}}
</div>
var vm = new Vue({
el: "#app",
data:{
user:{
name:"yang"
}
},
methods:{
addFn:function(){
/* this.user.num = "9527"; // 页面上的模版无法渲染
console.log(this.user); // 能打印出来,但是也页面上的模版未渲染出来 */
// this.$set(this.user, "num", "9527"); // 页面上的模版渲染出来了值
Vue.set(this.user, "num", "9527") //vm.$set 的全局写法
}
}
})
-
vm.$delete(object, value)
删除一个已有的属性,dom也会实时更新vm.$delete 实例用法
<div class="box" id="app">
<button @click="deleteFn">删除一个属性</button>
{{user.name}}
</div>
var vm = new Vue({
el: "#app",
data:{
user:{
name:"yang"
}
},
methods:{
deleteFn: function(){
// vm.$delete(this.user, "name"); // 删除页面上已有的一个属性,dom也会实时更新
Vue.delete(this.user, "name"); // vm.$delete 全局写法
}
}
})
- vm.$watch(data, callback(newValue,oldValue), [option])
监视数据的变化
<input type="text" v-model="msg"> // 绑定 vm.$watch 写法1
{{msg}}
<input type="text" v-model="id"> // 绑定 watch 写法2
{{id}}
<input type="text" v-model="user.name"> // 绑定 watch 写法2
{{user.name}}
var vm = new Vue({
el:"#app",
data:{
msg:"hello vue!",
id:"1001",
user:{
name:"yang"
}
},
/* watch:{ // 写法2:vue实例提供的一个选项 - 普通监视数据变化
id:function(newValue, oldValue){
console.log("id更改之后的值"+ newValue +",id更改之前的值"+ oldValue);
}
} */
watch:{ // 写法2:vue实例提供的一个选项 - 深度监视对象数据变化
user:{
handler:function(newValue, oldValue){
console.log("user更改之后的值"+ newValue +",user更改之前的值"+ oldValue);
},
deep: true
}
}
})
// 写法1:vue实例提供的$watch方法 - 普通监视数据变化
vm.$watch("msg",function(newValue, oldValue){
console.log("msg更改之后的值"+ newValue +",msg更改之前的值"+ oldValue);
})
// 写法1:vue实例提供的$watch方法 - 深度监视对象数据变化
vm.$watch("user",function(newValue, oldValue){
// 监视一个对象后,这里的newValue 和 oldValue将会指向同一指针,也就是指向了同一个值,更改前后值会一样
console.log("user更改之后的值"+ newValue +",user更改之前的值"+ oldValue);
},{
deep:true
})