在 Vue 中，获取 DOM 元素的方法有：使用 ref 属性：通过 $refs 属性访问指定 ref 的元素。使用 querySelector 方法：通过 this.$el 访问根元素，再使用 querySelector() 方法获取子元素。使用 querySelectorAll 方法：通过 this.$el 访问根元素，再使用 querySelectorAll() 方法获取子元素列表。其他方法：使用 getElementById 或 getElementsByClassName 获取元素，或
如何使用 Vue 获取元素
在 Vue 中，我们可以使用以下方法获取 DOM 元素：
1. 使用 ref 属性
- 在模板中，在要获取的元素上设置
ref属性。 - 在 Vue 实例中，可以使用
$refs属性访问该元素。
export default {
mounted() {
console.log(this.$refs.myElement); // 获取元素
},
};2. 使用 querySelector 方法
立即学习“前端免费学习笔记（深入）”；
- 使用
this.$el访问根元素。 - 调用
querySelector()方法来获取子元素。
export default {
mounted() {
console.log(this.$el.querySelector('#my-element')); // 获取元素
},
};3. 使用 querySelectorAll 方法
- 使用
this.$el访问根元素。 - 调用
querySelectorAll()方法来获取所有匹配的子元素。
export default {
mounted() {
console.log(this.$el.querySelectorAll('.my-class')); // 获取元素列表
},
};4. 其他方法
-
使用
getElementById或getElementsByClassName：在 Vue 实例中，可以使用document对象获取元素。 - 使用 jQuery：如果你正在使用 jQuery，可以使用 jQuery 的选择器方法来获取元素。
注意：
- 确保在
mounted或created生命周期钩子中获取元素，因为在组件首次渲染之前，DOM 元素可能不存在。 - 使用
ref属性时，要使用 kebab-case（连字符分隔）的形式，例如my-element。
