<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
/*
在Vue中提供了一种特别的方式来获取元素：
给元素加上个ref属性，那么就可以通过this.$refs.名字来获取到该元素
*/
/* 前面知道了Vue的生命周期的钩子函数，其中需要注意的是在DOM挂载后，事件可能不能正常的触发，
需要将其放入到$nextTick方法里：在下次 DOM 更新循环结束之后执行延迟回调。
在修改数据之后立即使用这个方法，获取更新后的 DOM。
*/
new Vue({
el: '#app',
data(){
return {
isShow: false
}
},
template:`
<div>
<input type='text' v-if='isShow' ref='inp'/>
</div>
`,
mounted() {
this.isShow = true;
// 若删掉外面的$nextTick方法，那么将不能识别出该输入框，
// 聚焦事件也不能正常执行
this.$nextTick(function() {
console.log(this.$refs.inp);
this.$refs.inp.focus();
});
}
})
</script>
</body>
</html>