Vue实例的属性和方法

一、 Vue实例的属性

用法 实例名.属性
例 vm.$data

$data 获取实例中的数据对象
也可简写为 vm.msg  直接跟data中的数据变量名

vm.$el

获取vm实例中绑定的dom对象
然后可操作dom对象 例修改他的字体颜色 vm.$el.style.color = 'red'

vm.$option

	获取实例中的选项
	例如methods data 或者自己写在data外的选项

vm.$refs

获取实例中所有添加了ref的Dom对象

<h4 ref='hello'></h4> html元素添加ref
vm.$refs.hello  js拿到

二、 Vue实例的方法

vm.$mount

作用为手动挂载元素到vue实例上

例如下方将vue实例通过后跟.mount挂载到class为app的html元素上

			let vm = new Vue({
				data(){
					 return{
						 msg:'xixixi',
					 }				
			}).$mount('.app')

vm.$destory

作用为销毁vue实例 但数据保留 不常用

vm.$nextTick( [callback] )

有些时候js代码执行太快 页面dom还没有渲染完 需要时间
nextTick方法 会在Dom更新完成后执行回调 一般应用于修改数据了之后使用该方法 以便获取更新后的Dom

vm.$set(object,key,value)

通过普通的方式直接为vue实例数据对象添加值 无法做到实时监听
例 this.user.age = 18；{{user.age}} 并无法渲染Dom
使用vm.$set(this.user,‘age’,‘18’); 则能让vue实例创建属性并监听

vm.$delete用法同上

实例名.$方法名 的形式一般用于具体实例中的方法
vue同样定义了全局方法 一般格式为 大写V 不加 $ Vue.set() 这是vue的设计模式
全局的大写不加 实例中的实例名跟 $方法名

数据监视方法 两种方式实现

第一种方法型 vm.$watch(数据变量名,{callback}[,option])
ps 用实例方法 只需增加option参数 .true 即可实现深度监视

   			vm.$watch('msg',(newValue,oldValue) => {
 				console.log('msg被修改了'+'原值'+oldValue+'新值'+newValue)
 			})

第二种选项型 定义一个名为watch实例选项

				watch:{
					msg:(newValue,oldValue) => {
							console.log('原值'+oldValue+'新值'+newValue)	     
					}
				}

对象的监视方式不同
若要监视一个对象 需要在watch也传入一个对象

				watch:{
					user:{
						handler:(newValue,oldValue) => { 
							console.log('原值'+oldValue.id+'新值'+newValue.id)	     
						},
						deep:true
					}
				},

handler处理的意思 里放监视的回调函数
deep 是否深度监视 为true
ps 对象里他是引用类型 地址空间一样 无法用之前的方式取得新值与旧值 取出来都是更改后的新值