Vue 简介

什么是 Vue

Vue 的特点

Vue 与其他框架对比

开发环境搭建

第一个 Vue 应用

模板语法

插值表达式

指令简介

计算属性

侦听器

条件与循环

条件渲染 v-if

v-show 的使用

列表渲染 v-for

key 的重要性

事件处理

事件监听

事件修饰符

按键修饰符

事件对象

表单绑定

双向绑定 v-model

文本输入框

单选与复选框

下拉选择框

表单修饰符

组件基础

组件的定义

组件的注册

组件的复用

组件的组织

组件通信

Props 传递数据

自定义事件 $emit

v-model 自定义

插槽 Slot

动态组件

生命周期

创建阶段

挂载阶段

更新阶段

销毁阶段

生命周期应用场景

Vue 实例

创建实例

data 与方法

实例属性

实例方法

this 指向问题

过渡与动

过渡类名

CSS 过渡

CSS 动画

动画库集成

列表过渡

自定义指令

指令注册

钩子函数

钩子参数

指令示例

过滤器

过滤器定义

过滤器使用

过滤器参数

常见过滤器示例

混入 Mixin

混入基础

选项合并

全局混入

混入策略

插件开发

插件基础

插件编写

插件使用

常用插件推荐

路由 Vue Router

路由基础

动态路由

嵌套路由

编程式导航

路由守卫

状态管理 Vuex

Vuex 简介

State 状态

Getter 派生

Mutation 同步更新

Action 异步操作

Module 模块化

指令注册

自定义指令可以通过全局注册或局部注册两种方式创建。选择哪种方式取决于指令的使用范围。

全局注册

全局注册的指令可以在任何组件中使用：

Vue.directive('focus', {
  inserted: function(el) {
    el.focus()
  }
})

使用：

<template>
  <div>
    <input v-focus>
  </div>
</template>

注册时机

全局注册通常在入口文件中进行：

import Vue from 'vue'
import App from './App.vue'

Vue.directive('focus', {
  inserted(el) {
    el.focus()
  }
})

new Vue({
  render: h => h(App)
}).$mount('#app')

批量注册

将多个指令放在一个文件中统一注册：

import Vue from 'vue'

const directives = {
  focus: {
    inserted(el) {
      el.focus()
    }
  },
  color: {
    bind(el, binding) {
      el.style.color = binding.value
    }
  },
  permission: {
    inserted(el, binding) {
      if (!binding.value) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  }
}

Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key])
})

局部注册

局部注册的指令只能在当前组件中使用：

<template>
  <div>
    <input v-focus>
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
}
</script>

组件内使用

<template>
  <div>
    <p v-highlight="'yellow'">高亮文本</p>
  </div>
</template>

<script>
export default {
  directives: {
    highlight: {
      bind(el, binding) {
        el.style.backgroundColor = binding.value
      }
    }
  }
}
</script>

函数简写

当只需要 bind 和 update 时执行相同逻辑，可以使用函数简写：

Vue.directive('color', function(el, binding) {
  el.style.color = binding.value
})

等价于：

Vue.directive('color', {
  bind(el, binding) {
    el.style.color = binding.value
  },
  update(el, binding) {
    el.style.color = binding.value
  }
})

对象字面量

如果指令需要多个值，可以传入对象：

<div v-demo="{ color: 'white', text: 'hello' }"></div>

<script>
Vue.directive('demo', {
  bind(el, binding) {
    console.log(binding.value.color)  // 'white'
    console.log(binding.value.text)   // 'hello'
  }
})
</script>

注册插件方式

将指令封装成插件：

const MyDirectives = {
  install(Vue) {
    Vue.directive('focus', {
      inserted(el) {
        el.focus()
      }
    })
    
    Vue.directive('click-outside', {
      bind(el, binding, vnode) {
        el.clickOutsideEvent = function(event) {
          if (!(el === event.target || el.contains(event.target))) {
            binding.value(event)
          }
        }
        document.body.addEventListener('click', el.clickOutsideEvent)
      },
      unbind(el) {
        document.body.removeEventListener('click', el.clickOutsideEvent)
      }
    })
  }
}

export default MyDirectives

使用插件：

import Vue from 'vue'
import MyDirectives from './directives'

Vue.use(MyDirectives)

全局 vs 局部选择

使用全局注册：

指令在多个组件中使用
通用性强的指令（如 focus、permission）
项目级的基础指令

使用局部注册：

指令只在特定组件中使用
组件特有的功能
避免全局污染

命名规范

Vue.directive('my-directive', {})  // 短横线命名

// 使用时
<div v-my-directive></div>

注意：注册时使用短横线命名，使用时加上 v- 前缀。

完整示例

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2>全局指令</h2>
    <input v-focus placeholder="自动聚焦">
    
    <h2>局部指令</h2>
    <p v-highlight="'#ffeb3b'">高亮文本</p>
  </div>

  <script>
    Vue.directive('focus', {
      inserted(el) {
        el.focus()
      }
    })

    new Vue({
      el: '#app',
      directives: {
        highlight: {
          bind(el, binding) {
            el.style.backgroundColor = binding.value
            el.style.padding = '10px'
          }
        }
      }
    })
  </script>
</body>
</html>

注意事项

命名冲突：避免与内置指令重名
全局污染：谨慎使用全局注册
性能考虑：指令中避免频繁 DOM 操作
清理工作：在 unbind 钩子中清理事件监听器

掌握指令注册后，接下来学习钩子函数，了解指令的生命周期。

上一章：自定义指令

下一章：钩子函数