vue3 ref dom

<template>
  <div>
    <p ref="myParagraph">这是一个段落。</p>
    <button @click="changeText">点击我改变段落内容</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    // 使用 ref 创建对 DOM 元素的引用
    const myParagraph = ref(null);

    // 定义一个方法来改变段落的内容
    const changeText = () => {
      if (myParagraph.value) {
        myParagraph.value.textContent = "段落内容已更改！";
      }
    };

    // 在组件挂载后访问 DOM 元素
    onMounted(() => {
      console.log(myParagraph.value); // 输出: <p>这是一个段落。</p>
    });

    return {
      myParagraph,
      changeText
    };
  }
};
</script>

解释说明：

1. ref 的使用：在 Vue 3 中，ref 可以用于创建对 DOM 元素的引用。通过在模板中添加 ref="myParagraph"，我们可以在 JavaScript 中通过 myParagraph.value 访问到对应的 DOM 元素。
2. onMounted 钩子：onMounted 是 Vue 3 的组合式 API 中的一个生命周期钩子，它会在组件挂载后执行。在这个钩子中，我们可以安全地访问 DOM 元素。
3. 事件处理：通过 @click 绑定按钮的点击事件，在点击按钮时调用 changeText 方法，该方法会修改段落的内容。

如果你需要更多帮助或有其他问题，请随时告诉我！