详解Vue2.x-directive的学习笔记_网络技术_宿州市腾雀网络科技有限公司

详解Vue2.x-directive的学习笔记

发布时间 - 2026-01-11 02:22:57 点击率：次

除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意，在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。

官方建议directive是对纯 DOM 元素进行底层操作使用，一般情况下还是建议使用组件的复用。

directive的意义

自定义指令是用来操作DOM的。

尽管数据驱动是Vue的核心之一，但是在实际情况下，并不是所有的情况都可以用数据来驱动视图，我们不可避免的会在有些情况下有操作DOM的需求，所以directive也就出现了。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。

官方栗子

code

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
 // 当绑定元素插入到 DOM 中。
 inserted: function (el) {
  // 聚焦元素
  el.focus()
 }
})

//局部指令
directive: {
 focus(el){
  el.focus()
 }
}

use

<input v-focus>
//input标签自动获得标签

是不是感觉很简单？相信自己，其实vue大法真心不难，难得是如何应用。下面先来简单看看的钩子函数。

钩子函数

bind：在该元素绑定指令时调用且仅调用一次，用于初始化
inserted：元素插入父节点时调用（可能仍在虚拟Dom中）
update：模板更新时调用
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用。

钩子参数

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
1. name: 指令名，不包括 v- 前缀。
2. value: 指令的绑定值
3. oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
4. expression: 绑定值的字符串形式。例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
5. arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
6. modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

实际应用

directive的语法就这么简单，在合适的钩子中做应该做的事就可以了。下面会列出两个使用指令的栗子

集成第三方插件

用了一段时间的vue，其实我都没有留意directive具体使用，一般来言真的很少使用到。直到有一次需要集成第三方插件到Vue时才发现，原来directive是集成第三方插件最合适也是最简单的方式。凡是关于第三方的集成，都可以尝试使用directive

import Vue from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

Vue.directive('highlight', {
 bind(el){
  hljs.highlightBlock(el);
 },
})

use

<pre>
 <code v-highlight>
   //code here
 </code>
</pre>

如上，我注册了一个全局的指令 highlight。指令的作用就是高亮代码，当元素带上'v-highlight'时，hljs就会去初始化该Dom。

当然我这是可以使用组件来实现这个功能，但绝对没有指令那么方便快捷，下面是一个简略的组件，可以看出，不仅定义和使用都比指令来的复杂。

<template>
  <pre>
    <code ref="code">
     <slot name="code"></slot>
    </code>
  </pre>
</template>
<script>
  import hljs from 'highlight.js'
  import 'highlight.js/styles/monokai-sublime.css'
  export default {
    mounted(){
     hljs.highlightBlock(this.$refs.code);
    }
  }
</script>

指令验证

如果需要一个可以复用的验证，我们也可以使指令来完成，下面来看一个简单的栗子：

Vue.directive('checkName', {
 //监控数据变化 
 update(el, binding){
   let regex = /^[a-zA-z]{6,10}$/g;
   //=value === oldValue, 避免重复更新
   if(binding.value !== binding.oldValue){
     el.style.border = regex.test(binding.value) ? '' : '1px solid red';
   }
 }
})

user

<input v-model='value1' v-checkName='value1'></input>
<input v-model='value2' v-checkName='value2'></input>
<input v-model='value3' v-checkName='value3'></input>
<input v-model='value4' v-checkName='value4'></input>

//当value的值不是6-10的字母的时，input的boder变为红色;

result

结果很明显，不符合规则的数据，input的边框变红了。

End

这里只是抄写下官方的文档，举两个栗子，就是那么简单，任性 (￣～￣) ！其实主要想说明白的一件事就是明确dirctive的意义：指令是用来操作DOM的，希望能起到抛砖引玉的作用吧。

参考

VUE-自定义指令

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Vue2 # directive # Vue # 对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍 # 在Vue2中注册全局组件的两种方法详解 # vue2实现directive自定义指令的封装与全局注册流程 # 自定义 # 绑定 # 第三方 # 复用 # 情况下 # 是一个 # 这是 # 定值 # 就会 # 也就 # 我都 # 修饰符 # 是用来 # 可以用 # 会在 # 真的很 # 抛砖引玉 # 用了 # 希望能 # 很简单

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：抖音电脑版登录入口_扫码登录安全快捷官方通道

下一篇：安装Nginx后配置文件路径及初始设置

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：抖音电脑版登录入口_扫码登录安全快捷官方通道

下一篇：安装Nginx后配置文件路径及初始设置