Vue2.0笔记——Vue常用实例属性，实例方法
实例属性
- vm.$el
- vm.$data
- vm.options
- vm.$refs
- vm.$root
vm.$el
该实例属性用于获取Vue实例使用的根DOM元素,即el选项所指的元素DOM
你好，这是四级标题
这是一个段落，我什么都不想说
vm.$data
Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。
即可以访问data选项中的数据。
data:{
msg:‘你好你好‘,
arr:[‘what‘,‘are‘,‘you‘,‘doing‘,‘?‘]
}
function getData(){
console.log(vm.$data.msg);
console.log(vm.$data.arr.join(‘ ‘));
}获得msg属性，获得arr数组，并通过join生成字符串。
vm.$options
用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处。：
var vm = new Vue({
el:‘#app‘,
data:{
msg:‘你好你好‘,
arr:[‘what‘,‘are‘,‘you‘,‘doing‘,‘?‘]
},
name:‘小小陈先森‘,
user:{name:‘小小陈先森‘,age:18,sex:‘男‘}，
show(){
console.log(this.user.sex);
}
})
console.log(vm.$options.name);
console.log(vm.$options.user.age);
console.log(vm.$options.show());这个自定义属性，就是跟data选项同级，定义的属性或方法函数。通过$options可以操作调用。
vm.$refs
返回持有注册过 ref 特性 的所有 DOM 元素和组件实例，该类型为Object，且只读。
因为有好多ref，所以通过.名称获得组件实例。
HelloWorld
console.log(vm.$refs.hello);
vm.$refs.name.value=‘whats‘;//.style.color=‘red‘;Vue实例中不需要任何设置，只要持有ref属性的元素在根节点元素中即可。
vm.$root
当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。
console.log(vm.$root);若果只有这个一个vm实例，那么么vm.$root将返回自己，返回自己，直接相当于vm。
其他几个实例属性，将在讲解组件的时候介绍，而且组件很重要。
实例方法(数据操作)
vm.$watch
语法:
vm.$watch( expOrFn, callback, [options] )观察Vue实例变化中的一个表达式或计算属性函数。监视某个属性，如果被更该，将执行回调函数。
表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。
- 第一个参数为表达式或计算属性函数，也可以是一个属性。
- 第二个参数为，触发的回调函数
- 第三个参数为，可添加的选项
data:{ msg:‘你好你好‘ } vm.$watch(‘msg‘,function(newVal,oldVal){ console.log(‘新值为:‘ + newVal + ‘,旧值为:‘ +oldVal); });你可以把第一个参数设置为计算属性函数。
vm.$watch( function(){ return Number(this.a) +Number(this.b); }, function(newVal,oldVal){ console.log(‘新值为:‘ + newVal + ‘,旧值为:‘ +oldVal); } );另外vm.$watch返回一个取消观察函数，用来停止触发回调:
var unwatch = vm.$watch(‘a‘, cb) // 之后取消观察 unwatch()一旦执行unwatch()函数，就不会触发回调,且不再监视它。
[options]可选参数，可以放值deep:true,用来深度监视。
immediate：true,立即以表达式的当前值触发回调。
另外vm.$watch方法与实例的watch选项具有相同的作用。
vm.$set
语法:
vm.$set( target, key, value )参数:
- {Object | Array} target
- {string | number} key
-
{any} value
设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新
示例：data:{ user:{ id:1001, name:‘tom‘ } } //通过普通方式为对象添加属性时vue无法实时监视到 this.user.age=25; //通过vue实例的$set方法为对象添加属性，可以实时监视 this.$set(this.user,‘age‘,18); //通过全局API方式设置，全局API在后面介绍 Vue.set(this.user,‘age‘,22);注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象
vm.$delete
语法:
Vue.delete( target, key )参数:
- {Object | Array} target
- {string | number} key/index
仅在 2.2.0+ 版本中支持 Array + index 用法。
删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。
//使用js的方式无效
delete this.user.age;
//使用vm.$delete
vm.$delete(this.user,‘name‘);
//使用全局API的方式
Vue.delete(this.user,‘age‘);目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。
实例方法(事件操作)
vm.$on,vm.$emit
语法:
vm.$on( event, callback )监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
语法:
vm.$emit( event, […args] )触发当前实例上的事件。附加参数都会传给监听器回调。
示例:
自定义事件
methods:{
test(event,num){
vm.$emit(‘test‘,num);
}
}
vm.$on(‘test‘,function(num){
console.log(‘已监听，并执行回调函数‘);
console.log(‘获得的值为:‘ + num);
});当单击p标签文字时，将触发自定义的单击事件test,我们可以在test函数里进行单击后的操作。
通过vm.$on监听这个自定义的test事件，可以执行回调函数，但是它需要通过vm.$emit方法来触发，第一个参数为自定义事件名，第二个参数为附加参数。
vm.$emit方法在父子组件中也用于子组件向上传递数据。
vm.$once
语法:
vm.$once( event, callback )监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。
示例:
methods:{
mouseover(){
console.log(‘移动到了此节点‘)
vm.$emit(‘mouseover‘);//可随时，在任何处触发.
}
}
vm.$once(‘mouseover‘,function(){
console.log(‘已监听，并执行回调函数‘);
});通过测试发现，第一次触碰按钮，将打印“移动到了此节点”，“已监听，并执行回调函数”,但是，等第二次在触碰则只打印“移动到了此节点”。将不会在调用监听的回调函数，因为它已不再被监听。
vm.$off
语法:
vm.$off( [event, callback] )移除自定义事件监听器。
- 如果没有提供参数，则移除所有的事件监听器；
- 如果只提供了事件，则移除该事件所有的监听器；
- 如果同时提供了事件与回调，则只移除这个回调的监听器。
实例方法(生命周期)
vm.$mount
语法:
vm.$mount( [elementOrSelector] )如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
这个方法返回实例自身，因而可以链式调用其它实例方法。
示例:
vm.$mount(‘#app‘);
//或
var vm=new Vue({
data:{
msg:‘小小陈先森‘,
name:‘tom‘
}
}).$mount(‘#app‘);查看Vue实例生命周期
vm.$forceUpdate()
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
vm.$nextTick( [callback] )
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的DOM。
举个小例子:
{
{name}}
data:{
name:‘小小陈先森‘
}
//js代码
vm.name=‘Tom‘;
console.log(vm.$refs.thisP.textContent);如果你没有添加最后一行的.textContent,那么你执行起来也没什么数据的错误。
设置为“Tom”值，console.log依然为“Tom”。如果你加上.textContent或的其内容。
你会发现，虽然设置了值为“Tom”，但打印控制台在依然为“小小陈先森”。
原因:
就如，该函数的介绍所说，当实例渲染加载完毕后显示Tom，但因为Vue数据更新后，需要渲染视图，所以需要等待这块DOM更新后才能显示出新值，而js代码执行较快，而直接通过.$refs获得了内容，没等得及DOM加载渲染完毕。
而此方法就是来处理它的。
代码:
vm.$nextTick(function(){
console.log(vm.$refs.thisP.textContent);
});将其放在回调函数里，等DOM执行完后，在执行回调函数。这样就额可以了。
vm.$destroy()
完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
触发 beforeDestroy 和 destroyed 的钩子函数。
在大多数场景中你不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。