vue实例的属性和方法
1. 属性
vm.$el
vm.$data
vm.$options
vm.$refs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="https://unpkg.com/vue"></script>
<script> window.onload = function(){ var vm = new Vue({
el:'#app',
data:{
msg:'Hello Word !',
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); //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>
</head> <body> <div id="app">
{{msg}} <h2 ref="hello">你好</h2>
<p ref="world">世界</p> <hr> <h1 ref="title">标题：{{name}}</h1> </div> </body> </html>
2. 方法
vm.$mount()
vm.$destroy()
vm.$nextTick(callback)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="https://unpkg.com/vue"></script>
<script> window.onload = function(){
/**
* 方法
*/
//vm.$mount() 手动挂载vue实例
// vm.$mount('#itany'); var vm = new Vue({
data:{
msg:'欢迎来到武汉',
name:'Tom'
}
}).$mount('#app'); //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>
</head> <body> <div id="app">
{{msg}} <h1 ref="title">标题：{{name}}</h1> </div> </body> </html>
vm.$set(object,key,value)
vm.$delete(object,key)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="https://unpkg.com/vue"></script>
<script> window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
user:{
id:10010,
name:'Tom'
}
},
methods: {
//通过普通方式为对象添加属性时vue无法实时监视到
doUpdate:function(){
//this.user.name = 'Jam';
this.$set(this.user,'name','Jam');
},
doAdd:function(){
//this.user.age = 23;
//this.$set(this.user,'age',18); //通过vue实例的$set方法为对象添加属性，可以实时监视
//Vue.set(this.user,'age',18)
if(this.user.age){
this.user.age++;
}else{
Vue.set(this.user,'age',1)
}
},
doDelete(){
if(this.user.age){
Vue.delete(this.user,'age');
}
}
}
})
} </script>
</head> <body> <div id="app">
<h1>{{user.name}}</h1>
<h1>{{user.age}}</h1> <button v-on:click="doUpdate">修改属性</button>
<button v-on:click="doAdd">添加属性</button>
<button v-on:click="doDelete">删除属性</button>
</div> </body> </html>
vm.$watch(data,callback[,options])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="https://unpkg.com/vue"></script>
<script> window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
name:'Tom',
age:22,
user:{
id:10010,
name:'Maria'
}
},
watch:{ //方式2：使用vue实例提供的watch选项
age:function(newVal,oldVal){
console.log('age原值：'+oldVal+'，age新值：'+newVal);
},
user:{
handler:(newVal,oldVal) => {
console.log('user原值：'+oldVal.name+'，user新值：'+newVal.name);
},
deep:true //深度监视，当对象中的属性发生变化时也会监视
}
}
})
//方式1：使用vue实例提供的$watch()方法
vm.$watch('name',function(newVal,oldVal){
console.log('name原值：' + oldVal,'name新值：' + newVal);
},true)
} </script>
</head> <body> <div id="app"> <input type="text" v-model="name">
<h2>{{name}}</h2> <hr> <input type="text" v-model="age">
<h2>{{age}}</h2> <hr> <input type="text" v-model="user.name">
<h2>{{user.name}}</h2> </div> </body> </html>