Vue 获取DOM元素 ，给DOM增加事件的特殊情况

给标签绑定ref属性 使用this.$refs.xxx 获取原生的jsDOM对象
ref属性值不能重名

	Vue.component('subCom',{
        template:`<div class="subCom"></div>`
    })

    var App = {
        template:`
                <div class="app">
                    <button ref="btn">按钮1</button>
                    <subCom ref="abc"/>
                </div>`,
        created() {
            console.log(this.$refs.btn);
        },
        mounted() {
            console.log(this.$refs.btn);
            // 如果给组件绑定ref属性，那么this.$refs.xxx获取的是当前的组件对象 
            console.log(this.$refs.abc);
        },
    };
    new Vue({
        el:"#app",
        data() {
            return {
                
            }
        },
        components:{
            App
        },
        template:`<App></App>`
    })

$nextTick()
在DOM更新循环结束之后执行回调函数，在修改数据之后使用此方法
在回调中获取到更新后的DOM

	var App = {
        data() {
            return {
                isShow:false,
            }
        },
        template:`<div class="app">
                        <input type="text" v-show="isShow" ref="input">
                    </div>`,
        mounted() {
            this.isShow = true;
            this.$nextTick(()=>{
                // 数据更新之后表单获取焦点
                this.$refs.input.focus();
            })
        },
    };
    new Vue({
        el:"#app",
        components:{
            App
        },
        template:`<App/>`
    })