ref

view：v-ref:xxx
data：this.$ref.xxx 这样就ok啦

1、document.getElementById("id")
2、this.$refs.xx

1、document.getElementById("id")
2、this.$refs.xx

还有一些特殊的，比如this.$root、this.$parent、this.$children

Vue中获取DOM节点有多种方式，以下是几种常见的方法：

通过ref属性： 在Vue组件中，可以使用ref属性来标识一个DOM元素，并通过this.$refs来获取对应的DOM节点。

<template>
  <div ref="myElement">Hello, World!</div>
</template>

<script>
export default {
  mounted() {
    const element = this.$refs.myElement;
    // 使用element来操作DOM节点
  },
};
</script>

通过事件参数： 在事件处理函数中，事件参数会自动传递给处理函数，可以通过事件参数来访问和操作DOM节点。

<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      const button = event.target;
      // 使用button来操作DOM节点
    },
  },
};
</script>

通过原生JavaScript方法： 可以使用原生JavaScript的DOM操作方法来获取DOM节点。例如，可以使用document.getElementById、document.querySelector等方法来选择和获取DOM节点。

<template>
  <div id="myElement">Hello, World!</div>
</template>

<script>
export default {
  mounted() {
    const element = document.getElementById('myElement');
    // 使用element来操作DOM节点
  },
};
</script>

需要注意的是，Vue鼓励将DOM操作尽量放在组件的生命周期钩子函数中进行，例如mounted钩子函数，在组件挂载后执行DOM操作。这样可以确保DOM已经被正确地渲染和挂载，避免操作未被正确渲染的DOM节点。

另外，需要注意避免直接操作DOM节点，而是尽量使用Vue的数据驱动方式进行开发，通过修改数据来改变DOM的状态和内容。直接操作DOM节点可能会绕过Vue的响应式系统，导致数据和视图不同步，影响应用的稳定性和可维护性。