当前位置：首页 > 全部内容 > 正文

Vue.js 内置指令与自定义指令详解：v-bind、v-on、v-model及钩子函数

作者：组件花园

时间：2026-10-22

浏览：255

本文系统梳理Vue.js核心指令体系，涵盖v-bind属性绑定、v-on事件监听、v-model表单双向绑定及条件列表渲染指令。重点解析自定义指令的全局与局部注册机制，详解bind、update等生命周期钩子函数的参数与使用场景，并提供class/style绑定、事件修饰符及表单修饰符的实战示例。

文章目录

Vue 指令概述

Vue.js 提供了丰富的指令（Directives）以简化数据驱动 DOM 的开发流程。常见的内置指令包括 v-bind、v-on、v-model、v-if、v-for 和 v-once 等，它们的核心职责是在表达式值发生变化时自动执行相应的 DOM 更新行为，从而最大程度减少手动增删改 DOM 的操作。深入理解自定义指令的编写方式，有助于更好地掌握内置指令的工作原理。

内置指令

指令名称 描述 使用
v-model 绑定数据 <\input v-model="message">
v-text 输出文本,不能解析标签 <\p v-text="message"></p>
v-html 输出文本,可解析标签 <\p v-html="message">/p>
v-once 只绑定一次数据 <\p v-once >{{message}}</p>
v-bind 绑定属性 <\img v-bind:src="imgurl"> 或 <\img :src="imgurl">
v-if 控制是否显示容器 值转为布尔为false时 注释该容器，反之显示 <\div v-if="true"></div>
v-show 控制是否显容器，改变的时display:none/block <\div v-show="true"></diiv>
v-for 循环遍历数组、对象 <\li v-for="(val,key) in arr">{{val}}</li>
v-cloak 在还没有执行到vue代码的时候隐藏元素,可解决‘闪烁'问题 <\p v-cloak>{{message}}</p>

自定义指令注册与钩子

自定义指令

当内置指令无法满足特殊需求时，可以通过自定义指令直接对 DOM 进行底层操作。

注册

自定义指令的注册方式与组件类似，分为全局注册和局部注册两种，主要区别在于调用方法名为 directive。具体写法如下：


// 全局注册 自定义指令
Vue.directive(‘mydir',{
  // 指令选项
});
// 全局注册 自定义指令函数
Vue.directive('mydir', function () {
 // 这里将会被 `bind` 和 `update` 调用
})
// 局部注册（只针对组件内元素）
export default {
  directives: {
    mydir: {
      // 指令选项
    }
  }
}

需注意，全局注册指令必须在 Vue 实例初始化（new Vue()）之前完成。此外，定义指令名称时若使用驼峰式命名会引发报错，因此通常采用小写形式。

指令选项

自定义指令由一组可选的钩子函数组成，开发者可根据实际需求选择使用特定的钩子。例如，在全局注册一个指令时，其选项结构如下：


Vue.directive('mydir', {
 bind: function () {
  // 只调用一次，指令第一次绑定到元素时调用，用于在绑定元素时执行一次的初始化动作。
  },
 update: function () {
  // 第一次是紧跟在 bind 之后调用，获得的参数是绑定的初始值，
  // 之后被绑定元素所在的模板更新时调用，而不论绑定值是否变化，可以忽略不必要的模板更新。  
  }, 
 inserted: function () {
  // 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
  },
 componentUpdated: function () {
  // 被绑定元素所在模板完成一次更新周期时调用。
  },
 unbind: function () {
  // 只调用一次， 指令与元素解绑时调用。
  }
})

上述每个钩子函数均接收若干参数，具体包括：

  1. el：指令所绑定的 DOM 元素，可用于直接操作 DOM；
  2. binding：包含指令详细信息的对象；
  3. vnode：Vue 编译生成的虚拟节点；
  4. oldVnode：上一次渲染的虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

示例


// 一个带自定义指令的元素
<div v-mytest:foo.m1.m2="1+1">MyDirective</div>

// 部分 JS 代码
export default {
  directives:{
   mytest: {
    bind: function (el, binding, vnode) {
     console.log(el)
     console.log(binding)
     console.log(vnode)
    }
   }
  }
}

控制台输出截图：

Vue 指令概述

其中，binding 对象输出的属性包含：

  1. rawName: "v-mytest:foo.m1.m2" // 自定义指令
  2. name: "mytest" // 指令名称
  3. arg: "foo" // 指令的参数
  4. modifiers: {m1: true, m2: true} // 指令的修饰符
  5. expression: "1+1" // 指令绑定值的字符串形式
  6. value: 2 // 指令的绑定值

v-bind 属性绑定详解

v-bind || : 绑定属性

Vue 内置指令 v-bind 用于动态更新 HTML 元素的属性。通过语法 v-bind:someAttr = "someData" 或其简写形式 :someAttr = "someData"，可以在 someData 发生变化时自动更新绑定的 someAttr 属性。

基本用法

绑定单一的属性值


<a :href="url" rel="external nofollow" rel="external nofollow" :id="linkID">链接</a>

测试 data 如下：


// js
data : {
  url: 'https://www.baidu.com/',
  linkID : 'myid'
}

元素渲染输出：


<a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" id="myid">链接</a>

对象语法

v-bind 最常用的场景是绑定 class 或 style 属性以动态改变样式。例如，可以通过为 :class 设置一个对象来动态切换 class 的值：


<!-- class 绑定 -->
<div :class="{colorRed: isRed}"></div>

当 isRed 为 true 时，渲染输出：


<div class="colorRed"></div>

对象中可以传入多个属性值来动态切换 class：


<!-- class 绑定，传入多个属性 -->
<div :class="{ classA: isA, classB: isB }">

当 isA、isB 变化时 classA、classB 会动态更新，若两者均为 true，则渲染结果为：


<div class="classA classB"></div>

同理，对于 style 可以传入对象属性，并且支持字符串拼接：


<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>

对于元素中的各个对象，可以统一使用 v-bind 进行绑定：


<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

数组语法

class 可以传入多值，通过为 :class 绑定一个数组即可使用 class 列表。


<div :class="[activeA, activeB]"></div>

例如当 {activeA: 'class1', activeB: 'class2'} 时，渲染结果为：


<div class="class1 class2"></div>

还可以在数组语法中使用三元表达式切换 class，例如：


<div :class="[isA ? activeA : '', activeB]">

在 class 有多个条件时使用三元表达式较为繁琐，可以在数组语法中结合对象语法：


<div :class="[{activeA: isA}, activeB]">

修饰符

v-bind 的修饰符较少，API 中仅提供 .prop、.camel 和 .sync，且多用于组件。使用方式示例：


<!-- 通过 prop 修饰符绑定 DOM 属性 (property) -->
<div v-bind:text-content.prop="text"></div>

<!-- .camel 修饰符(2.1.0+)将 v-bind 属性名称 kebab-case 驼峰化为 camelCase -->
<svg :view-box.camel="viewBox"></svg>

<!-- .sync 修饰符(2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器-->
<text-document v-bind:title.sync="doc.title"></text-document>
<!-- 批量绑定，将 doc 对象中的每一个属性 (如 title) 都作独立的 prop ，各自添加 v-on 监听器-->
<text-document v-bind.sync="doc"></text-document>

v-on 事件监听与修饰符

v-on || @ 监听事件

v-on 用于动态绑定事件监听器。使用 v-on:someEvent = "someFunction" 或其简写形式 @someEvent = "someFunction" 即可监听 someEvent 以进行交互。

基本用法

@someEvent 调用的方法名后面可以不跟（），例如：


<a :href="url" rel="external nofollow" rel="external nofollow" :id="linkID">链接</a>
<!-- 监听一个事件 -->
<button @click="changeFun">change button</button>

可以在 methods 中添加函数：


// 部分 JS 代码
methods :{
 changeFun : function () {
  this.linkID = 'changeID' // 指向当前组件本身
 }
}

点击 button 按钮后 a 元素的 id 改变：


<a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" id="changeID">链接</a>

当然 v-on 还可以使用对象语法监听多个事件：


<!-- v2.4.0+ -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

对于在 HTML 元素上监听的事件，当 ViewModel 销毁时，所有的事件处理器会自动删除，无需手动清理。

修饰符

Vue 可以将原生事件对象参数 event 传入事件方法中，并提供了特殊变量 $event 用来访问元素 DOM 事件。此外，可以通过一些事件修饰符来实现特定的事件，如 .stop、.prevent、.capture、.once 等，常用的使用示例：


<!-- 停止单击事件冒泡，调用 event.stopPropagation()-->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为，调用 event.preventDefault() -->
<button @submit.prevent="doThis"></button>

<!-- 添加事件侦听器时使用 capture 事件捕获模式 -->
<button @click.capture="doThis"></button>

<!-- 点击回调只会触发一次 -->
<button @click.once="doThis"></button>

<!-- 只当点击鼠标左键时触发(2.2.0) -->
<button @click.left="doThis"></button>

<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

此外，v-on 还提供按键修饰符来监听键盘事件，键值为 .keyCode，常用有 .enter、.delete、.tab、.esc、.space、.down 等，如下：


<!-- 只有在 `keyCode` 是 5 时调用 `vm.submit()` -->
<input v-on:keyup.5="submit">

<!-- 为重要的 keyCode 如 enter 提供别名-->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

此外还有系统修饰符监听键盘事件，不同的系统其键盘/系统修饰符不一样。这些按键修饰符可以任意组合使用。

条件渲染与列表渲染

v-if、v-show 条件渲染

条件渲染 v-if 根据表达式的值的真假条件渲染元素，在表达式为真时渲染，为假时移除。


<p v-if="status === 1">当 status 为 1 时显示此行</p>

<p v-else-if="status === 1">当 status 为 2 时显示此行</p>

<p v-else>其它情况默认显示此行</p>

v-show 也是条件渲染，但只切换元素的 CSS 属性 display，无论条件真假都会被编译，相比于 v-if 更适用于频繁切换场景。


<p v-show="status === 1">当 status 为 1 时显示此行</p>

当 data: {status: 2} 时隐藏，但依旧会被编译，渲染结果为：


<p style="display: none;">当 status 为 1 时显示此行</p>

显然在 Vue.js 内置的 <template> 元素上可以使用 v-if，但不能使用 v-show，可以思考下为什么。

v-for 列表渲染

列表渲染指令 v-for 常用于数组遍历或枚举一个对象的循环显示，必须结合 in 使用特定语法 alias in expression 为当前遍历的元素提供别名：


<!-- 遍历一个数组 -->
<div v-for="item in items">{{ item.text }}</div>

<!-- 提供第二个的参数为数组的索引 -->
<div v-for="(item, index) in items">{{ index }} - {{ item.text }}</div>

<!-- 遍历对象属性 -->
<div v-for="value in object">{{ value }}</div>

<!-- 提供第二个可选的参数：对象的键名 -->
<div v-for="(value, key) in object">{{ key }}: {{ value }}</div>

<!-- 提供第三个的可选参数：对象的索引 -->
<div v-for="(value, key, index) in object">{{ index }}. {{ key }}: {{ value }}</div>

可以用 of 替代 in 作为分隔符

当 v-for 和 v-if 在同一节点一起使用时，v-for 的优先级比 v-if 更高。

v-model 表单双向绑定

v-model 表单控件双向绑定

v-model 其实也是一个特殊的语法糖，其实实现的数据双向绑定也可用 v-bind 和 v-on 实现，但 v-model 在不同表单上会有更加智能的处理。

文本框

经典的使用案例是对 <input>、<textarea> 文本框的双向数据绑定：


<!-- 输入框 -->
<input type="text" v-model="message" placeholder="edit me">
<!-- 文本域 -->
<textarea v-model="message" placeholder="edit me"></textarea>
<!-- 实时更新 -->
<p>Message is: {{ message }}</p>

动态选择

对于单选按钮，复选框及选择框的选项，v-model 配合 Vue 实例的数据作为 value 属性值实现不同效果，即会忽略所有表单元素的 value、checked、selected 特性的值。


<!--单选按钮的互斥效果-->
<div id="example-radio">
 <input type="radio" id="one" value="One" v-model="picked">
 <label for="one">One</label>
 
 <input type="radio" id="two" value="Two" v-model="picked">
 <label for="two">Two</label>
 
 <!-- picked 显示的是 value 的值 -->
 <p>Picked: {{ picked }}</p>
</div>

<!--多选按钮-->
<div id='example-checkbox'>
 <input type="checkbox" id="one" value="One" v-model="checkedNames">
 <label for="jack">Jack</label>
 <input type="checkbox" id="two" value="Two" v-model="checkedNames">
 <label for="john">John</label>

  <!-- Checked 显示的是 value 组成的数组 -->
 <p>Checked: {{ checkedNames }}</p>
</div>

修饰符

v-model 的修饰符的使用限制在 <input>、<select>、<textarea> 和组件。

  1. .lazy - 取代 input 监听 change 事件
  2. .number - 输入字符串转为数字
  3. .trim - 输入首尾空格过滤

其他常用指令

v-pre、v-cloak、v-once

这三个指令的共同点是无需表达式，用法如下：


<!-- 不显示未编译的标签直到实例初始化完 -->
<div v-cloak>{{ message }}</div>
<!-- 需要配合 CSS 隐藏样式 [v-cloak]{ display: none;}-->

<!-- 只渲染一次，随后的渲染将被视为静态内容并跳过 -->
<div v-once>{{ message }}</div>

<!-- 不会被编译，直接显示显示原始{{ }}标签 -->
<div v-pre>{{ message }}</div>

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

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

electron-builder打包与发布Electron应用

Vue结合el-table实现表格行拖拽排序（基于sortablejs）

详解如何在Vue中进行表单自定义验证

UniApp 项目中 vue.config.js 配置指南

uni-app全局变量的四种实现方式总结

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法