Vue 3 的模板语法是基于 HTML 的，同时结合了 Vue 的指令、数据绑定等功能，使得模板的开发更加直观和高效。Vue 的模板语法让开发者可以通过声明式的方式轻松地操作和展示数据，而无需手动操作 DOM。

1. 插值表达式（Text Interpolation）

插值表达式允许你在模板中插入动态数据。它是 Vue 的最基础用法之一，通常使用 {{ }} 进行包裹。

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  }
};
</script>

当 message 数据变化时，页面上的文本会自动更新。

2. 属性绑定（Attribute Binding）

Vue 提供了 v-bind 指令，允许你动态绑定 HTML 元素的属性。你可以通过 v-bind 将数据与元素的属性进行绑定。

<template>
  <img v-bind:src="imageUrl" alt="Vue Logo">
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://vuejs.org/images/logo.png'
    };
  }
};
</script>

你可以使用简写形式 :src="imageUrl"，省略 v-bind 前缀。

<template>
  <img :src="imageUrl" alt="Vue Logo">
</template>

3. 条件渲染（Conditional Rendering）

Vue 提供了 v-if、v-else-if 和 v-else 指令，用于基于条件渲染 DOM 元素。

<template>
  <p v-if="isVisible">This text is visible when isVisible is true.</p>
  <p v-else>If isVisible is false, this will be shown.</p>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

v-if 只会在条件为 true 时渲染该元素。

4. 列表渲染（List Rendering）

Vue 使用 v-for 指令来渲染一个列表，它遍历数组或对象并渲染每一项。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange']
    };
  }
};
</script>

使用 v-for 渲染列表时，key 是一个非常重要的属性，它帮助 Vue 跟踪每个元素的身份，提高渲染性能。

5. 双向数据绑定（Two-way Data Binding）

Vue 提供了 v-model 指令，它用于实现表单控件与数据之间的双向绑定。v-model 使得表单输入的值与组件的数据保持同步。

<template>
  <input v-model="message" />
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  }
};
</script>

当你输入框中的内容发生变化时，message 会自动更新，反之亦然。

6. 事件处理（Event Handling）

Vue 提供了 v-on 指令，用于监听 DOM 事件并执行方法。你可以使用 @ 来简写 v-on。

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
};
</script>

在上面的代码中，@click 是 v-on:click 的简写形式，用于监听按钮的点击事件。

7. 动态绑定类和样式（Class and Style Binding）

你可以通过 v-bind:class 和 v-bind:style 动态绑定元素的 CSS 类和样式。

动态绑定类

<template>
  <div :class="{ active: isActive, 'text-danger': hasError }">Hello, Vue 3!</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    };
  }
};
</script>

动态绑定样式

<template>
  <div :style="{ color: color, fontSize: fontSize }">This is a styled div.</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red',
      fontSize: '20px'
    };
  }
};
</script>

8. 自定义事件（Custom Events）

Vue 组件支持自定义事件，可以通过 v-on 来监听子组件的自定义事件。

<template>
  <child-component @customEvent="handleEvent"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(payload) {
      console.log('Custom event received:', payload);
    }
  }
};
</script>

子组件可以通过 this.$emit('customEvent', payload) 来触发事件。

9. 插槽（Slots）

插槽是 Vue 提供的一种机制，允许你将父组件的内容插入到子组件的特定位置。你可以使用 slot 标签来定义插槽，并通过 v-slot 指令在父组件中提供内容。

默认插槽

子组件：

<template>
  <div>
    <slot></slot>  <!-- 默认插槽 -->
  </div>
</template>

父组件：

<template>
  <child-component>
    <p>This is some content passed to the child.</p>
  </child-component>
</template>

具名插槽

子组件：

<template>
  <div>
    <slot name="header"></slot>  <!-- 具名插槽 -->
    <slot></slot>  <!-- 默认插槽 -->
  </div>
</template>

父组件：

<template>
  <child-component>
    <template v-slot:header>
      <h1>This is the header content.</h1>
    </template>
    <p>This is the default content.</p>
  </child-component>
</template>

10. 动态组件（Dynamic Components）

Vue 允许你动态地切换不同的组件，使用 component 标签和 :is 属性可以实现动态组件的渲染。

<template>
  <component :is="currentComponent"></component>
</template>

<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';

export default {
  data() {
    return {
      currentComponent: FirstComponent
    };
  },
  components: {
    FirstComponent,
    SecondComponent
  }
};
</script>

11. 过滤器（Filters）

在 Vue 3 中，过滤器（filters）已经被移除，但是你可以使用计算属性和方法来替代它们。

<template>
  <p>{{ message | uppercase }}</p>  <!-- 旧版过滤器 -->
</template>

<script>
export default {
  data() {
    return {
      message: 'hello vue'
    };
  },
  computed: {
    uppercase() {
      return this.message.toUpperCase();
    }
  }
};
</script>

总结

Vue 3 的模板语法通过声明式数据绑定、事件处理和条件渲染等功能，极大地提高了开发效率和可维护性。通过使用 Vue 提供的指令，你可以轻松实现动态更新界面、处理用户交互以及控制视图渲染的逻辑。同时，Vue 还提供了灵活的方式来组织组件内容和进行代码复用，如插槽和动态组件等。