在vue中，我们可能需要获取某个元素的dom对象，以便进行一些操作，比如修改css样式或添加事件监听器等。本文将介绍在vue中如何获取元素对象。
1. 使用ref属性获取元素对象
Vue提供了一个特殊的属性ref，可以用来获取元素对象。在模板中，我们可以给元素加上一个ref属性：
在Vue实例中，我们可以使用$refs属性来访问这个元素对象：
export default {
methods: {
handleClick() {
this.$refs.myButton.style.backgroundColor = 'red';
}
}
}在这个例子中，当用户点击按钮时，我们修改了按钮的背景颜色为红色。通过this.$refs.myButton可以获取按钮的DOM对象，然后对其进行修改。
注意，$refs是一个对象，以ref属性的值作为键，对应的元素对象作为值。
立即学习“前端免费学习笔记（深入）”；
2. 通过事件参数获取元素对象
在Vue的事件处理函数中，事件参数会自动传递给回调函数。这个事件参数包含了当前事件的相关信息，其中包括触发事件的元素对象。
export default {
methods: {
handleClick(event) {
event.target.style.backgroundColor = 'red';
}
}
}在这个例子中，我们通过点击事件的参数event获取了触发点击事件的元素对象，然后修改了它的背景颜色。
注意，event.target指向的是当前触发事件的元素对象，而不是定义模板中的元素对象。
3. 使用$el属性获取组件根元素对象
当我们使用Vue组件时，组件本身也是一个类似于元素的对象。组件渲染后的根元素可以通过$el属性来获取。
import MyComponent from './MyComponent.vue';
export default {
mounted() {
const root = this.$refs.myComponent.$el;
root.style.backgroundColor = 'red';
},
components: {
MyComponent,
}
}在这个例子中，我们引入了自定义组件MyComponent，并在Vue实例中使用。通过refs属性获取到这个组件实例的引用，在mounted生命周期函数中使用$el属性获取到了组件渲染后的根元素对象，并对其进行操作。
注意，只有在组件渲染后才能获取到组件根元素对象，所以需要在mounted生命周期函数中进行操作。
总结
在Vue中，获取元素对象有多种方式：
- 使用
ref属性获取元素对象，通过$refs属性访问。 - 在事件处理函数中，通过事件参数获取触发事件的元素对象。
- 在Vue组件中，使用
$el属性获取组件渲染后的根元素对象。
这些方法都很简单易懂，可以根据具体情况选用。
