Vue入门学习（二）

获取DOM元素

1. 在template中标识元素 ref=“xxx”
2. 通过this.refs.xxx获取DOM对象

$元素

• $refs：获取组件内的元素，获得原生DOM对象或组件对象
• $parent: 获取当前组件对象的父组件
• $children：获取子组件
• $root: 获取new Vue() 的实例
• $el: 组件对象的DOM元素，获取DOM对象

    <div id="app"></div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let TempTest = {
            template: `<div>
                <h1>我是子组件</h1>
            </div>`
        }

        Vue.component('tempTest', TempTest)

        let App = {
            template: `<div>
                <tempTest ref="tmp" />
                <button ref="btn">我是按钮</button>
            </div>`,
            // 此处才能获取this.$refs.xxx的DOM元素
            mounted: function() {
                // 获取ref为tmp子组件的DOM对象
                console.log(this.$refs.tmp)
                // 获取组件内的ref为btn的DOM对象
                console.log(this.$refs.btn)
            }
        }

        new Vue({
            el: '#app',
            components: {
                app: App
            },
            template: `<app/>`
        })
    </script>

$nextTick()

该函数是在页面渲染完后才执行，可以确保因加载不及时而无法获取DOM对象的错误

    <div id="app"></div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let App = {
            template: `<div>
                <input type="text" v-if="isShow" ref="input" />
            </div>`,
            data: function() {
                return {
                    isShow: false
                }
            },
            mounted: function() {
                this.isShow = true
                // 出现无法获取DOM对象的错误，因为vue再执行完上条指令后，DOM对象不一定立刻出现，此时容易出现DOM对象不存在而又调用DOM对象的错误；focus()是获取DOM对象焦点的方法
                // this.$refs.input.focus()
                // 正确的做法应该是通过$nextTick()函数包裹起来，该函数是等vue程序执行完，即页面渲染完后才执行，最后才根据实际值进行DOM对象错做，避免了DOM对象不存在的bug
                this.$nextTick(function() {
                    this.$refs.input.focus()
                })
            }
        }

        new Vue({
            el: '#app',
            components: {
                app: App
            },
            template: `<app/>`
        })
    </script>