Vue-14-给DOM元素添加事件的特殊情况

一、知识点部分

1. $nextTick()：基于更新后的视图来搞点事情，我们可以使用$nextTick(callback)。这里的回调函数（callback）将在数据更新完成，视图更新完毕之后被调用。（可以联想一下在angular1.x开发过程中，在接收到返回值的时候有时候需要使用setTimeout，在vue中使用$nextTick就可以解决问题了）我们可以通过$nextTick() 获取到更新之后的DOM。
2. 如果要在created()钩子函数中进行的DOM操作，由于created()钩子函数中还未对DOM进行任何渲染，所以无法直接操作。（这个地方存在疑问，还需要继续研究）。
3. 钩子的 this 指向调用它的 Vue 实例。

附上生命周期的图示：

二、代码部分

//Q：实现input加载之后获取到焦点
Vue.component("subCom",{
data(){
return{
isShow:false
}
},
template:`
<input type="text" v-show="isShow" ref="input" v-model="content" />
`,
created(){

},
beforeMount(){

},
mounted(){
//此时修改了isShow的值 所以input显示出来了
this.isShow = true;
console.log(this.$refs.input);//获取到的是数据未更新前的DOM<input type="text" style="display: none;"> 隐藏状态
this.$nextTick(function(){
//console.log(this.$refs.input);//获取到的是数据更新后的DOM<input type="text" style=""> 显示状态
this.$refs.input.focus();//组件渲染之后input获得焦点
})
}

})
new Vue({
el:"#app",
template:`
<div>
<subCom ref="subCom"/>
</div>
`
})