Vue.js 的指令（Directives）是一种特殊的属性，它能够将特定的行为应用到 DOM 上。Vue.js 已经内置了一些指令，同时也可以自定义指令。
在 Vue.js 中，指令的基本使用格式如下：
```html
<element v-directive="value"></element>
```
其中 `v-directive` 是指令的名称，`value` 是指令的参数。
以下是一些 Vue.js 内置的常用指令：
1. `v-model`：双向数据绑定。在表单元素上创建双向数据绑定。根据输入类型和校验规则，触发不同的响应。用法如下：
```html
<input v-model="message" placeholder="edit me">
```
2. `v-show`：根据表达式的值的真假，切换元素的 display CSS 属性。用法如下：
```htmlhtmlbutton属性
<div v-show="isTrue">Visible</div>
```
3. `v-if` / `v-else` / `v-else-if`：条件渲染。根据表达式的值的真假，有条件地渲染元素。`v-if` 是“惰性”的，即如果表达式中涉及到的数据改变，那么只有当下次渲染时才会重新求值。`v-else` 只有与 `v-if` 或另一个 `v-else` 结合使用才有效。`v-else-if` 与 `v-else` 类似，它们都是多表达式条件。用法如下：
```html
<div v-if="type === 'A'">Render A</div>
<div v-else-if="type === 'B'">Render B</div>
<div v-else>Render others</div>
```
4. `v-for`：列表渲染。基于源数据多次渲染元素或者模板块。数据源可以是数组或者对象。用法如下：
```html
<div v-for="item in items">{{ item }}</div>
```
5. `v-on`：监听 DOM 事件。绑定事件。用法如下：
```html
<button v-on:click="counter += 1">Add 1</button>
```
6. `v-bind`：绑定 HTML 属性。动态地绑定一个或多个特性，或一个组件 prop 到表达式。用法如下：
```html
<img v-bind:src="imageSrc">
```

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。