在 Vue 中获取 DOM 元素

一、获取 DOM 元素。

1、在 template 中标识元素 ref="xxx"。

2、通过 this.$refs.xxx 获取元素。

3、在组件内通过 this.$el 可以获取整个组件的 DOM。

<div>
    <button>我是按钮</button>
    <button>我是另一个按钮</button>
    <div></div>
</div>

代码如下：

    <div id="app">
        <App></App>
    </div>
    <script type="text/javascript" src="../vue/vue.js"></script>
    <script type="text/javascript">
        var subComponent = {
            template:`<div></div>`
        };
        Vue.component('subCom',subComponent);
        var App = {
            template:`
                <div>
                    <button ref='btn'>我是按钮</button>
                    <button ref='btn2'>我是另一个按钮</button>
                    <subCom ref='subc'></subCom>
                </div>
            `,
            data(){
                return{ 
                }
            },
            beforeCreate:function(){
                // 组件创建之前
                console.log("创建之前：" + this.$refs.btn);
            },
            created:function(){
                // 组件创建之后
                // 使用该组件，就会调用created方法，在created这个方法中可以操作后端的数据，数据响应视图
                console.log("组件创建之后获取：" +this.$refs.btn);
            },
            beforeMount:function(){
                // 挂载数据到DOM之前会调用
                console.log("挂载数据到DOM之前" + this.$refs.btn);
            },
            mounted:function(){
                // 挂载数据到DOM之后会调用 Vue作用以后的DOM
                //如果给标签绑定ref属性，使用this.$refs.xxx获取的是原生js的DOM对象
                // 如果给组件绑定的ref属性，那么this.$refs.xxx 获取的是组件对象
                // ref属性值不能重名
                console.log(this.$refs.btn);
                console.log(this.$refs.btn2);
                console.log(this.$refs.subc);
            },
            beforeUpdate:function(){               
            },
            updated:function(){    
            },
        }
        new Vue({
            el:'#app',
            data(){
                return{
                }
            },
            template:``,
            components:{
                App,
            }
        });
    </script>

总结：一是  ref 在DOM 上获取的是原生 DOM 对象。二是  ref 在组件上获取的是组件对象，这个对象就相当于我们平时玩的this,也可以直接调用函数。

二、给 DOM 元素添加事件。

需求：input 输入框获取焦点事件。

this.$nextTick 是在DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick可以在回调中获取更新后的DOM。

    <div id="app">
        <App></App>
    </div>
    <script type="text/javascript" src="../vue/vue.js"></script>
    <script type="text/javascript">

        // 需求：input 输入框获取焦点
        var App = {
            template:`
                <div>
                    <input type="text" v-show = 'isShow' ref='input' />
                </div>
            `,
            data(){
                return{ 
                    isShow:false
                }
            },
            mounted:function(){
                this.isShow = true;

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