Vue.js 模板语法基础

Vue.js 使用基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 模板都是合法的 HTML，能被遵循规范的浏览器和 HTML 解析器解析。

插值

文本插值：使用双大括号 {``{ }} 绑定数据，内容会被替换为对应属性的值。
html 复制代码
```
<span>{{ message }}</span>
```
原始 HTML：使用 v-html 指令输出原始 HTML，避免 XSS 攻击风险。
html 复制代码
```
<div v-html="rawHtml"></div>
```

指令

指令是带有 v- 前缀的特殊属性，其值预期是单个 JavaScript 表达式（v-for 例外）。

html 复制代码

<p v-if="seen">现在你看到我了</p>
<a v-bind:href="url">链接</a>
<button v-on:click="doSomething">按钮</button>

常用指令详解

条件渲染

v-if：根据表达式值的真假条件性地渲染元素。

html 复制代码

<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Type C</div>

列表渲染

v-for：基于源数据多次渲染元素或模板块。

html 复制代码

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

事件处理

v-on：监听 DOM 事件并执行相应方法。

html 复制代码

<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="greet">Greet</button>

计算属性和侦听器

计算属性

使用 computed 处理复杂逻辑，结果会被缓存。

javascript 复制代码

computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

侦听器

使用 watch 观察数据变化并执行异步或开销较大的操作。
javascript 复制代码
```
watch: {
  question: function (newVal, oldVal) {
    this.getAnswer()
  }
}
```

表单输入绑定

双向绑定

v-model 在表单输入元素上创建双向数据绑定。

html 复制代码

<input v-model="message" placeholder="edit me">
<textarea v-model="message"></textarea>
<select v-model="selected">
  <option disabled value="">请选择</option>
  <option>A</option>
  <option>B</option>
</select>

样式和类绑定

动态类名

通过对象语法或数组语法动态切换 class。

html 复制代码

<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<div :class="[activeClass, errorClass]"></div>

内联样式

使用对象语法或数组语法绑定样式。

html 复制代码

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="[baseStyles, overridingStyles]"></div>

组件通信

Props

父组件通过 props 向子组件传递数据。
javascript 复制代码
```
props: ['title', 'content']
```

自定义事件

子组件通过 $emit 触发父组件监听的事件。
javascript 复制代码
```
this.$emit('enlarge-text', 0.1)
```

插槽

使用 <slot> 分发内容，实现组件内容组合。
html 复制代码
```
<alert-box>
  Something bad happened.
</alert-box>
```

高级模板特性

动态组件

使用 <component> 元素动态切换不同组件。
html 复制代码
```
<component :is="currentComponent"></component>
```

过渡效果

使用 <transition> 包裹元素实现进入/离开过渡。
html 复制代码
```
<transition name="fade">
  <p v-if="show">hello</p>
</transition>
```

指令修饰符

修饰符是以点开头的特殊后缀，用于指出指令应该以特殊方式绑定。
html 复制代码
```
<form v-on:submit.prevent="onSubmit"></form>
<input v-model.trim="msg">
```

以上内容涵盖了 Vue.js 模板语法的核心概念和常用功能，通过灵活组合这些特性可以构建复杂的交互式界面。