Vue 获取DOM元素

获取DOM元素

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!-- <App></App> -->
        </div>
        <script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript">
            var subComponent = {
                template: `
                    <div></div>
                `
            };

            Vue.component('subCom', subComponent);

            var App = {
                data: function() {
                    return {

                    }
                },
                template: `
                    <div class='app'>
                        <button ref = 'btn2'>我是另外一个按钮</button>
                        <button ref = 'btn'>我是按钮1</button>
                        <button ref = 'btn'>我是按钮2</button>

                        <subCom ref = 'subc'></subCom>
                    </div>

                `,
                created: function() {
                    console.log(this.$refs.btn);  //返回的是undefined
                },
                beforeMount: function() {
                    console.log(this.$refs.btn);  //返回的是undefined
                },
                mounted: function() {
                    // 如果是给标签绑定ref属性，使用this.$refs.xxx 获取的是原生js的DOM对象
                    // ref 属性值 不能重名
                    // 如果是给组件绑定的ref属性 那么this.$refs.xxx获取的是组件对象
                    console.log(this.$refs.btn);
                    console.log(this.$refs.btn2);
                    console.log(this.$refs.subc);
                }
            }
            
            new Vue({
                el: '#app',
                data: function() {
                    return {

                    }
                },
                template: `<App />`,
                components: {
                    App
                }
            });
        </script>
    </body>
</html>

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div id="app">
        </div>
        <script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript">
            // 需求：input输入框 获取焦点
            var App = {
                data: function() {
                    return {
                        isShow: false
                    }
                },
                template: `
                    <div class='app'>
                        <input type="text"  v-show = 'isShow' ref = 'input'/>
                    </div>

                `,
                mounted: function() {
                    this.isShow = true;
                    console.log(this.$refs.input);

                    // $nextTick 是在DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick 可以在回调中获取到更新后的DOM
                    this.$nextTick(function() {
                        // 更新之后的DOM
                        this.$refs.input.focus();
                    })
                }
            }
            new Vue({
                el: '#app',
                data: function() {
                    return {

                    }
                },
                template: `<App />`,
                components: {
                    App
                }
            });
        </script>
    </body>
</html>

猜你喜欢