Vue之获取DOM元素与更新DOM后事件的特殊情况 

 <!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>
posted @ 2019-06-26 16:03  云--澈  阅读(5700)  评论(2)  编辑  收藏  举报