Vue 2.0学习笔记：使用$refs访问Vue中的DOM_Vue, Vue学习笔记, 会员专栏教程

作者：大漠日期：2017-12-18 点击：42739

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

通过前面对Vue的学习，到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法。首先要了解的是$refs属性。但是在深入到JavaScript部分之前，我们先看看模板。

<div id="app">
    <h1>{{ message }}</h1>
    <button @click="clickedButton">点击偶</button>
</div>

let app = new Vue({
    el: '#app',
    data () {
        return {
            message: 'Hi，大漠！'
        }
    },
    methods: {
        clickedButton: function () {
            console.log('Hi,大漠！')
        }
    }
})

在Vue的模板中，我们可以在模板中的任何元素中添加ref属性，这样就可以在Vue实例中引用这些元素。更具体地说，可以访问DOM元素。在上面的示例中的<button>中添加ref属性试试。这个按钮上已有绑定了一个click事件，这个事件让我们在浏览器的控制面板中打印出Hi, 大漠！信息。

<button ref="myButton" @click="clickedButton">点击偶</button>

注意，ref属性不是一个标准的HTML属性，只是Vue中的一个属性。实际上，它甚至不会是DOM的一部分，所以在浏览器中你查看渲染的HTML，你是看不到有关于ref的任何东西。因为在它前面没有添加:，而且它也不是一个指令。

在Vue实例上使用$refs属性可以通过myButton来引用这个按钮。来看看在浏览器的控制台中打印出来，它将是什么样子。

let app = new Vue({
    el: '#app',
    data () {
        return {
            message: 'Hi!大漠'
        }
    },
    methods: {
        clickedButton: function () {
            console.log(this.$refs);
        }
    }
})

如果你打开浏览器的控制台，我们可以看到这个属性是一个JavaScript的对象，它包含了ref属性的所有元素的引用。

使用$refs访问Vue中的DOM