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>
			`
		})