在Vue 2.0中轻元素的方法中轻松获取你可以在`mounted`钩子里操作DOM
在Vue 2.0中轻松获取DOM元素的方法
在Vue 2.0里，要拿到DOM元素，有几个常用的途径。下面我会用通俗易懂的方式给你讲解，并提供具体的例子。一、用模板引用（ref）来获取 Vue允许你在模板里给元素或组件起个名字，然后在Vue实例里通过这个名字找到它们。
举个例子，你给一个按钮加了个名字：
```html ```在Vue实例里，你就可以这样拿到这个按钮：
```javascript this.$refs.myButton.click(); ``` 二、利用生命周期钩子函数（如mounted） Vue提供了一系列生命周期钩子，比如`mounted`，在组件挂载到DOM后就会调用这个钩子。你可以在`mounted`钩子里操作DOM。比如，你可以在`mounted`里修改元素的样式：
```javascript mounted() { this.$refs.myElement.style.color = 'red'; } ``` 三、直接用原生JavaScript方法 有时候你可能直接想用原生JavaScript的方法，比如`getElementById`或`querySelector`来获取DOM元素。在Vue里这也是可以的，但记得要在组件挂载后使用这些方法。直接用原生方法修改元素的背景色：
```javascript document.getElementById('myElement').style.backgroundColor = 'blue'; ``` 为什么选择这些方法？来看看它们的优缺点 | 方法 | 优点 | 缺点 | |------------------|----------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------| | 模板引用（ref） | 易于阅读和维护，任何时间点都可以访问DOM元素或子组件。 | 可能会增加模板的复杂性。 | | 生命周期钩子函数 | 确保DOM元素已经挂载，避免获取不到元素的问题。 | 使用生命周期钩子可能会让代码逻辑显得不那么直接。 | | 原生JavaScript方法 | 在某些特殊场景下有效，可以直接操作DOM。 | 需要注意在组件挂载后使用，否则可能会得到未挂载的元素。 | 一个综合实例下面是一个整合了上述方法的例子，展示了如何在Vue 2.0中获取和操作DOM元素。
```html这是一个div