Vue入门（7）ref和$nextTick()

1.利用ref获取dom对象

1.给标签绑定ref="xxx"属性，可以用this.$refs.xxx获取到原生dom对象
2.如果给组件绑定ref="xxx"属性，this.$refs.xxx获取到的是当前的组件对象
3.ref属性值不能重名，否则后面会覆盖前面的

<div id="app"></div>
	
<script>
	var App = {
           data(){
               return {
               }
           },
           template:`
               <div class="app">
                   <button ref="btn">按钮</button>
               </div>
           `,
           created : function(){
               console.log(this.$refs.btn);//undefined
           },
           beforeMount : function() {
               console.log(this.$refs.btn);//undefined
           },
           mounted : function(){
               console.log(this.$refs.btn);//<button>按钮</button>
           }
       }

	new Vue({
		el: '#app',
		data: function(){
			return {

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

2.$nextTick()方法

在修改数据之后使用该方法，在dom更新循环结束后执行回调函数，在回调函数中获取到更新后的dom。

var App = {
    data(){
        return {
            isShow : false
        }
    },
    template:`
        <div class="app">
            <input type="text" v-show="isShow" ref="input"/>
        </div>
    `,
    mounted : function(){
        this.isShow = true;
        //this.$refs.input.focus()这样直接写是没效果的
        this.$nextTick(()=>{
            this.$refs.input.focus()
        })

    }
}