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>