Vue 数据绑定

数据绑定是 Vue 的核心特性之一。它建立了组件状态（数据）和渲染出的 DOM 视图之间的连接。当数据发生变化时，视图会自动更新，反之亦然（在使用 v-model 时）。

Vue 提供了多种类型的数据绑定：

1. 文本插值 (Text Interpolation)

这是最基本的数据绑定形式，使用双大括号 语法。它将数据以纯文本形式插入到元素的内容中。

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

const message = ref('Hello, Vue!')
</script>

<template>
  <span>{{ message }}</span>
</template>

2. 属性绑定 (Attribute Binding)

不能在 HTML 属性中使用双大括号。要动态地绑定一个或多个属性，需要使用 v-bind 指令，通常简写为冒号 :。

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

const imageId = ref('main-logo')
const isButtonDisabled = ref(true)
</script>

<template>
  <div :id="imageId"></div>
  <button :disabled="isButtonDisabled">Click me</button>
</template>

这同样适用于绑定布尔类型的属性。如果 isButtonDisabled 的值为 true，disabled 属性会被包含在 <button> 元素中；如果为 false，则该属性会被移除。

3. Class 与 Style 绑定

Vue 为 class 和 style 这两个属性提供了增强的绑定功能，因为它们是数据驱动样式的常用场景。v-bind 可以接收字符串、对象或数组。

绑定 Class

<script setup>
import { ref, reactive } from 'vue'

const isActive = ref(true)
const hasError = ref(false)

const classObject = reactive({
  active: true,
  'text-danger': false
})
</script>

<template>
  <!-- 对象语法 -->
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
  <div :class="classObject"></div>

  <!-- 数组语法 -->
  <div :class="[isActive ? 'active' : '', 'errorClass']"></div>
</template>

绑定 Style

<script setup>
import { ref, reactive } from 'vue'

const activeColor = ref('red')
const fontSize = ref(30)

const styleObject = reactive({
  color: 'red',
  fontSize: '13px'
})
</script>

<template>
  <!-- 对象语法 -->
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  <div :style="styleObject"></div>

  <!-- 数组语法 (可以将多个样式对象应用到一个元素上) -->
  <div :style="[baseStyles, overridingStyles]"></div>
</template>

4. 表单输入绑定 (Form Input Binding)

对于表单元素，我们可以使用 v-model 指令来创建双向数据绑定。这意味着当用户在输入框中输入内容时，绑定的数据会同步更新；反之，当数据改变时，输入框的内容也会更新。

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

const text = ref('')
const checked = ref(false)
const selected = ref('')
</script>

<template>
  <!-- 文本输入 -->
  <input v-model="text">
  <p>Text is: {{ text }}</p>

  <!-- 复选框 -->
  <input type="checkbox" v-model="checked">
  <label>Checked: {{ checked }}</label>

  <!-- 单选按钮 -->
  <input type="radio" value="One" v-model="picked">
  <input type="radio" value="Two" v-model="picked">

  <!-- 下拉列表 -->
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
  </select>
  <span>Selected: {{ selected }}</span>
</template>

v-model 会根据不同的输入元素类型，智能地使用不同的属性和事件来工作（例如，文本框的 value 和 input 事件，复选框的 checked 和 change 事件）。