Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
1、$data和$el
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
2、$refs
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例
ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
<div id="app">
<p ref="header">头部</p>
<son ref='son'></son>
<div ref="footer">尾部</div>
</div>
<template id="son">
<div>{{msg}}</div>
</template>
var son = {
template:'#son',
data(){
return {
msg:'子组件数据'
}
},
}
var vm = new Vue({
el:'#app',
components:{
son
},
mounted(){
console.log(this.$refs.header) //<p ref="header">头部</p>
}
})
3、$nextTick() 处理异步更新数据
var son = {
template:'#son',
data(){
return {
msg:'子组件数据'
}
},
mounted(){
this.msg='更改后数据'
}
}
var vm = new Vue({
el:'#app',
components:{
son
},
mounted(){
console.log(this.$refs.son.$el.innerHTML) //子组件数据
this.$nextTick(()=>{
console.log(this.$refs.son.$el.innerHTML) //更改后数据
})
}
})