vue中自定义指令/常用指令

在 Vue 中，自定义指令是一种可以扩展 Vue 的行为的方式，通过自定义指令，我们可以直接操作 DOM、添加事件监听器、执行动画等。同时，Vue 也提供了一些常用的内置指令，用于处理常见的 DOM 操作和数据绑定。

### 自定义指令
1. **全局指令**：通过 `app.directive` 方法定义全局指令，可以在整个应用中使用。
   ```javascript
   app.directive('my-directive', {
     mounted(el, binding) {
       // 指令绑定到元素时触发
     },
     updated(el, binding) {
       // 元素更新时触发
     }
   });
   ```
   
2. **局部指令**：在组件选项中使用 `directives` 定义局部指令，只在该组件内部可用。
   ```javascript
   directives: {
     'my-directive': {
       mounted(el, binding) {
         // 指令绑定到元素时触发
       },
       updated(el, binding) {
         // 元素更新时触发
       }
     }
   }
   ```

### 常用内置指令
1. **v-if / v-else / v-else-if**：条件渲染。
   ```html
   <div v-if="condition">Content</div>
   <div v-else>Alternate content</div>
   ```

2. **v-for**：循环渲染。
   ```html
   <ul>
     <li v-for="item in items" :key="item.id">{{ item.text }}</li>
   </ul>
   ```

3. **v-model**：双向数据绑定。
   ```html
   <input type="text" v-model="message">
   ```

4. **v-on**：绑定事件监听器。
   ```html
   <button v-on:click="handleClick">Click me</button>
   ```

5. **v-bind**：动态绑定 HTML 属性。
   ```html
   <a v-bind:href="url">Link</a>
   ```

6. **v-show**：根据表达式的真假值切换元素的显示状态。
   ```html
   <div v-show="isVisible">Visible content</div>
   ```

以上是在 Vue 中常用的自定义指令和内置指令，通过合理使用指令可以更好地管理和控制组件的行为和样式。