Vue.js 是一个流行的前端框架，它基于标准 HTML 拓展了一套模板语法，以便于开发者可以以声明式的方式构建用户界面。以下是 Vue.js 中的一些主要模板语法特性：
1. **插值 (Interpolation)**:
使用双大括号 `{{ }}` 来插入数据。例如：
```html
<h1>{{ message }}</h1>
```
2. **指令 (Directives)**:
Vue 提供了一些指令来扩展 HTML 功能，常用的指令包括：
- `v-bind`: 动态绑定属性。例如：
```html
<img v-bind:src="imageSrc">
```
- `v-model`: 双向绑定表单输入数据。例如：
```html
<input v-model="inputValue">
```
- `v-if`, `v-else-if`, `v-else`: 条件渲染。例如：
```html
<p v-if="isVisible">可见内容</p>
```
- `v-for`: 列表渲染。例如：
```html
<ul>
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
```
- `v-show`: 根据条件显示或隐藏元素，例如：
```html
<div v-show="isVisible">这会根据isVisible的值显示或隐藏</div>
```
- `v-on`: 事件绑定，例如：
```html
<button v-on:click="handleClick">点击我</button>
```
3. **事件修饰符**:
在事件绑定中，可以使用修饰符来简化处理，例如：
```html
<button v-on:click.stop.prevent="handleClick">点击我</button>
```
4. **计算属性和侦听器**:
通常在模板中可以使用计算属性，而不是在模板直接进行复杂的表达式。
5. **组件**:
Vue 支持自定义组件，可以在模板中像使用 HTML 标签一样使用这些组件。例如：
```html
<my-component></my-component>
```
6. **插槽 (Slots)**:
允许在父组件中传递内容到子组件。例如：
```html
<my-component>
<template v-slot:header>
<h1>标题</h1>
</template>
</my-component>
```
7. **过滤器 (Filters)**:
可以在插值表达式中使用过滤器来格式化数据，例如：
```html
<p>{{ message | capitalize }}</p>
```
8. **动态组件**:
可以根据条件渲染不同的组件，例如：
```html
<component :is="currentComponent"></component>
```
Vue 模板语法旨在使得 HTML 结构与 JavaScript 逻辑的结合更加简单和直观。这些特性使得 Vue 能够实现简单而强大的数据绑定和组件化开发。