在Vue.js框架中，获取DOM节点的需求并不少见，尤其是在进行DOM操作或者集成第三方非Vue库的时候。以下是几种在Vue中获取DOM节点的常见方法：
1. `ref` 属性
Vue提供了一个特殊的属性 `ref`，我们可以通过这个属性给元素或组件注册一个引用信息。这样就可以在父组件或者Vue实例中通过 `this.$refs` 访问到对应的DOM元素或组件实例。
// 在Vue实例中
mounted() {
this.$refs.myInput.focus(); // 获取input元素并聚焦
}
`ref` 是最直接也是Vue推荐的方式，特别是在Vue 2.x版本中。
2. `document.querySelector` 或 `document.getElementById`
如果你不想使用Vue特定的API，依然可以使用原生DOM API获取节点。
mounted() {
const myInput = document.querySelector('#myInput');
myInput.focus();
}
但需要注意的是，如果使用这种方法，通常应该在 `mounted` 钩子函数中操作DOM，确保DOM已经渲染到页面上。
3. `this.$el`
对于组件来说，`this.$el` 属性是对组件根元素的引用。
mounted() {
console.log(this.$el); // 访问组件的根元素
}
但是，这个方法仅当你需要访问组件的根元素时适用。
4. 获取子组件的DOM
如果你需要在父组件中获取子组件的DOM节点，可以通过 `ref` 和子组件的 `$el` 属性。
// 父组件的方法
mounted() {
console.log(this.$refs.childComp.$el); // 获取子组件的根元素
}
注意事项
- 避免在模板或计算属性中使用 `$refs`，因为它们在渲染期间不可用。
- 不要过度依赖 `$refs` 来访问DOM，这违背了Vue数据驱动的设计原则。
- 当使用 `v-for` 循环时，`ref` 会注册一个数组，其中包含相应的子节点。
通过上述方法，可以在Vue中灵活地获取DOM节点，实现各种复杂的交互和功能。然而，始终要牢记Vue的设计理念和最佳实践，优先考虑使用声明式数据绑定而非直接操作DOM。