5.1 模板基础

在Vue.js框架中，模板（Templates）是构建用户界面的核心。它们以声明式的方式将DOM的渲染逻辑与Vue实例的数据绑定起来，使得开发者能够以更简洁、更直观的方式构建动态网页。当使用TypeScript与Vue结合时，模板的基础概念保持不变，但你可以享受到TypeScript带来的类型安全和强大的代码提示功能。本章节将深入探讨Vue模板的基础，包括模板语法、指令、插值、条件渲染、列表渲染以及事件处理等内容，并展示如何在TypeScript环境中应用这些概念。

5.1.1 模板语法概览

Vue.js使用基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。模板的语法由两部分组成：插值（Interpolation）和指令（Directives）。

• 插值：文本插值使用双大括号{{ }}作为标记，用于将数据渲染到模板中。例如，{{ message }}会将Vue实例中data对象里的message属性的值渲染到对应的DOM节点中。

• 指令：指令是带有v-前缀的特殊HTML属性，用于在模板中添加响应式行为。例如，v-bind用于响应式地更新HTML属性，v-model用于在表单输入和应用状态之间创建双向数据绑定。

5.1.2 数据绑定与插值

在Vue模板中，数据绑定是核心功能之一。通过插值表达式，你可以轻松地将Vue实例中的数据渲染到页面上。插值表达式不仅可以用于文本内容，还可以用于任何可以解析为文本的场景，如属性（使用v-bind）或样式（使用v-bind:style或v-bind:class）。

<template>
  <div>
    <!-- 文本插值 -->
    <p>{{ message }}</p>
    <!-- 属性绑定 -->
    <a v-bind:href="url">Vue 官网</a>
    <!-- 样式绑定 -->
    <p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">样式示例</p>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  data() {
    return {
      message: 'Hello, Vue!',
      url: 'https://v3.cn.vuejs.org/',
      activeColor: 'red',
      fontSize: 20
    };
  }
});
</script>

5.1.3 指令详解

Vue提供了多种内置指令，用于在模板中添加各种响应式行为。下面是一些常用指令的简要说明：

• v-bind：用于响应式地更新HTML属性。可以简写为:。
• v-model：创建表单输入和应用状态之间的双向数据绑定。
• v-if、v-else-if、v-else：条件性地渲染元素。
• v-for：基于源数据多次渲染元素或模板块。
• v-on：监听DOM事件，并在触发时执行一些JavaScript代码。可以简写为@。
• v-show：根据表达式之真假值，切换元素的display CSS属性。
• v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。
• v-cloak：这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

5.1.4 条件渲染

Vue通过v-if、v-else-if、v-else指令实现条件渲染。这些指令会根据表达式的真假值来渲染或销毁元素及其子元素。

<template>
  <div>
    <p v-if="type === 'A'">A</p>
    <p v-else-if="type === 'B'">B</p>
    <p v-else>Not A/B</p>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  data() {
    return {
      type: 'A'
    };
  }
});
</script>

注意，v-if是惰性的，如果初始条件为假，则什么也不做，直到条件第一次变为真时才开始局部编译（编译被条件包裹的模板内容）。

5.1.5 列表渲染

v-for指令基于一个数组来渲染一个列表。Vue使用“就地更新”的策略，如果列表中项目的顺序改变，Vue将不会移动DOM元素来匹配列表的顺序，而是就地更新每个元素，并且确保每个元素与其相应数据项的绑定保持不变。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.text }}
    </li>
  </ul>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
interface Item {
  text: string;
}
export default defineComponent({
  data() {
    return {
      items: [
        { text: 'Apple' },
        { text: 'Banana' },
        { text: 'Cherry' }
      ]
    };
  }
});
</script>

在v-for中，:key是一个特殊的属性，它的值应该是每个列表项的唯一标识。这有助于Vue跟踪每个节点的身份，从而重用和重新排序现有元素，而不是销毁和重建它们。

5.1.6 事件处理

Vue使用v-on指令监听DOM事件，并在触发时执行一些JavaScript代码。v-on可以简写为@。

<template>
  <button @click="handleClick">点击我</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  methods: {
    handleClick() {
      alert('按钮被点击了！');
    }
  }
});
</script>

在TypeScript环境中，Vue组件的方法可以像上面那样直接在methods选项中定义，并且你可以享受到TypeScript的类型检查和自动完成功能。

总结

本章介绍了Vue模板的基础，包括模板语法、数据绑定、插值、指令、条件渲染、列表渲染以及事件处理等核心概念。在TypeScript环境下，这些基础概念依然适用，并且TypeScript的强大类型系统能够进一步提升代码的可读性和可维护性。通过掌握这些基础知识，你将能够开始构建更加复杂和动态的Vue应用。在接下来的章节中，我们将继续探索Vue的高级特性，如组件化开发、路由管理、状态管理等，以便你能够更深入地理解和应用Vue.js。