Vue的指令

Vue.js 中的指令是一些特殊的标记，用于在模板中指定如何将数据应用到 DOM。

下面是一些基本的 Vue 指令：

v-bind: 动态绑定一个或多个属性，或一个组件 prop 到表达式，用于动态绑定 HTML 属性到表达式。常用于绑定 class, style 等属性。
```
<div v-bind:class="{ active: isActive }"></div>
```
这里，isActive 是一个变量，当它为 true 时，class="active" 被添加到 div 上。
v-model: 在表单控件或组件上创建双向绑定，创建表单输入和应用状态之间的双向绑定。
```
<input v-model="message" placeholder="编辑我">
```
这里，message 是一个变量，输入框的值将与其同步。
v-for: 基于一个数组渲染一个列表。
```
<ul><li v-for="item in items">{{ item.text }}</li>
</ul>
```
items 是一个包含对象的数组，每个对象都有一个 text 属性。
v-if, v-else-if, v-else: 根据表达式的真假值条件渲染元素。
```
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>
```
这里，显示的元素取决于 type 变量的值。
v-on: 监听 DOM 事件，并在触发时执行一些 JavaScript。
```
<button v-on:click="doSomething">点击我</button>
```
当按钮被点击时，doSomething 方法将被调用。
v-show: 根据表达式之真假值，切换元素的显示与隐藏。
```
<div v-show="isVisible">看见我了吗?</div>
```
如果 isVisible 是 true，则显示 div，否则隐藏。
v-pre: 跳过这个元素和它的子元素的编译过程。
```
<div v-pre>{{ this will not be compiled }}</div>
```
这里，花括号内的内容不会被 Vue 编译。
v-cloak: 在 Vue 实例结束编译时从绑定的 HTML 元素上移除。通常与 CSS 规则一起使用来隐藏未编译的 Mustache 标签。
```
<div v-cloak>{{ message }}</div>
```
在 Vue 实例准备好之前，用户不会看到未编译的 {{ message }}。
v-once: 只渲染元素和组件一次。在首次渲染之后，不再随数据的变化重新渲染。
```
<div v-once>这个将只被渲染一次 {{ message }}</div>
```
无论 message 如何变化，这个元素的内容只渲染一次。