vue3双向绑定

// Vue3 双向绑定示例代码

// 首先，确保你已经安装了 Vue 3，并且在项目中引入了 Vue。

<template>
  <div>
    <!-- 使用 v-model 实现双向绑定 -->
    <input v-model="message" placeholder="输入一些文本">
    <p>你输入的内容是: {{ message }}</p>
  </div>
</template>

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

export default {
  setup() {
    // 定义一个响应式的变量 message
    const message = ref('');

    return {
      message
    };
  }
};
</script>

<!-- 解释说明：
1. `v-model` 是 Vue 中用于实现双向绑定的指令。
2. 在 `<input>` 元素上使用 `v-model="message"`，当用户在输入框中输入内容时，`message` 的值会自动更新；同时，`message` 的值也会实时反映在页面中的 `<p>` 标签中。
3. `ref` 函数用于创建一个响应式的数据属性。`ref` 返回的对象包含一个 `.value` 属性，Vue 会自动处理这个 `.value`，因此在模板中可以直接使用 `message` 而不需要写成 `message.value`。
4. `setup` 函数是 Composition API 的入口，所有的组合式 API（如 `ref`、`reactive` 等）都在这里使用。
-->