vue ref获取dom

Vue.js是一种流行的JavaScript框架，用于构建用户界面。在Vue中，我们可以使用ref属性来获取DOM元素的引用。ref是Vue提供的一种特殊属性，可以用于给DOM元素或组件实例添加一个引用标识。

使用ref获取DOM的步骤如下：

1. 在Vue模板中，找到需要获取引用的DOM元素，并为其添加ref属性。例如，我们有一个按钮元素需要获取引用，可以这样写：

`html

点击我

2. 在Vue实例中，可以通过$refs属性来访问DOM元素的引用。例如，我们可以在Vue实例的方法中使用$refs来获取按钮元素的引用：
`javascript
methods: {
  handleClick() {
    const button = this.$refs.myButton;
    // 使用button进行操作或访问
  }

在上面的代码中，我们通过this.$refs.myButton来获取按钮元素的引用，并将其赋值给button变量。然后我们就可以使用button变量来操作或访问按钮元素了。

需要注意的是，$refs是一个对象，其中的属性名对应着ref属性的值，属性值则是对应的DOM元素或组件实例。如果ref属性用在了一个组件上，那么$refs将会是一个组件实例的引用。

总结一下，使用ref属性可以方便地获取DOM元素的引用，从而在Vue中进行操作或访问。通过在模板中添加ref属性，并在Vue实例中使用$refs来访问引用，我们可以轻松地完成这个任务。