第2课: 模板语法与数据绑定

文本插值

使用双大括号（Mustache语法）进行文本插值：

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ firstName + ' ' + lastName }}</p>
    <p>{{ count * 2 }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue3',
      firstName: '张',
      lastName: '三',
      count: 10
    }
  }
}
</script>

原始HTML（v-html）

<template>
  <div>
    <p>普通文本: {{ rawHtml }}</p>
    <p>HTML内容: <span v-html="rawHtml"></span></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<strong>加粗文本</strong>'
    }
  }
}
</script>

属性绑定（v-bind）

<template>
  <div>
    <!-- 完整语法 -->
    <img v-bind:src="imageUrl" v-bind:alt="imageAlt">

    <!-- 简写语法 -->
    <img :src="imageUrl" :alt="imageAlt">

    <!-- 动态属性名 -->
    <button :[attributeName]="value">按钮</button>

    <!-- 布尔属性 -->
    <button :disabled="isDisabled">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://vuejs.org/logo.svg',
      imageAlt: 'Vue Logo',
      attributeName: 'id',
      value: 'dynamic-id',
      isDisabled: true
    }
  }
}
</script>

Class绑定

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

    <!-- 数组语法 -->
    <div :class="[activeClass, errorClass]">
      数组语法
    </div>

    <!-- 数组与对象混合 -->
    <div :class="[{ active: isActive }, errorClass]">
      混合语法
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false,
      activeClass: 'active',
      errorClass: 'text-danger'
    }
  }
}
</script>

Style绑定

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

    <!-- 绑定样式对象 -->
    <div :style="styleObject">
      样式对象
    </div>

    <!-- 数组语法 -->
    <div :style="[baseStyles, overridingStyles]">
      数组语法
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: 30,
      styleObject: {
        color: 'blue',
        fontSize: '20px'
      },
      baseStyles: { color: 'green' },
      overridingStyles: { fontSize: '25px' }
    }
  }
}
</script>

双向绑定（v-model）

<template>
  <div>
    <!-- 文本输入 -->
    <input v-model="message" placeholder="输入文本">
    <p>输入的内容: {{ message }}</p>

    <!-- 多行文本 -->
    <textarea v-model="description"></textarea>

    <!-- 复选框 -->
    <input type="checkbox" v-model="checked">
    <p>选中状态: {{ checked }}</p>

    <!-- 单选按钮 -->
    <input type="radio" value="男" v-model="gender"> 男
    <input type="radio" value="女" v-model="gender"> 女
    <p>选择: {{ gender }}</p>

    <!-- 下拉选择 -->
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      description: '',
      checked: false,
      gender: '',
      selected: ''
    }
  }
}
</script>

v-model修饰符

<template>
  <div>
    <!-- .lazy: 在change事件后同步 -->
    <input v-model.lazy="msg">

    <!-- .number: 自动转换为数字 -->
    <input v-model.number="age" type="number">

    <!-- .trim: 自动过滤首尾空白字符 -->
    <input v-model.trim="username">
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '',
      age: 0,
      username: ''
    }
  }
}
</script>

组合式API写法

<template>
  <div>
    <p>{{ message }}</p>
    <input v-model="message">
    <button :disabled="isDisabled">按钮</button>
  </div>
</template>

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

const message = ref('Hello Vue3')
const isDisabled = ref(false)
</script>

练习

1. 创建一个表单，包含姓名、年龄、性别输入框，使用v-model实现双向绑定
2. 实现一个动态样式切换，点击按钮改变文字颜色和大小
3. 创建一个待办事项输入框，显示输入的内容
4. 使用v-bind绑定图片src和alt属性