当前位置：首页 > VUE

vue 指令实现

2026-02-09 23:27:53VUE

Vue 指令实现

Vue 指令是带有 v- 前缀的特殊特性，用于在 DOM 元素上应用响应式行为。Vue 提供了一些内置指令（如 v-model、v-if），同时也支持自定义指令的注册。

内置指令示例

v-bind 动态绑定属性：

<div v-bind:class="{ active: isActive }"></div>

v-model 实现双向数据绑定：

<input v-model="message" placeholder="edit me">

v-for 渲染列表：

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

自定义指令实现

注册全局自定义指令：

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

注册局部指令（组件内）：

vue 指令实现

directives: {
  focus: {
    inserted: function (el) {
      el.focus();
    }
  }
}

使用自定义指令：

<input v-focus>

指令钩子函数

自定义指令提供以下钩子（均为可选）：

bind：指令第一次绑定到元素时调用
inserted：被绑定元素插入父节点时调用
update：所在组件 VNode 更新时调用
componentUpdated：所在组件及子组件 VNode 全部更新后调用
unbind：指令与元素解绑时调用

动态指令参数

指令参数可以是动态的：

<a v-bind:[attributeName]="url"> ... </a>

当 attributeName 值为 href 时，等价于：

vue 指令实现

<a v-bind:href="url"> ... </a>

指令修饰符

修饰符是以点开头的特殊后缀：

<form v-on:submit.prevent="onSubmit">...</form>

.prevent 修饰符会调用 event.preventDefault()

函数简写

当需要在 bind 和 update 时触发相同行为时：

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

对象字面量

指令可以接收任何合法的 JavaScript 表达式：

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

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color); // => "white"
  console.log(binding.value.text);  // => "hello"
});

标签: 指令 vue

分享给朋友：

vue实现购物按钮

Vue 购物按钮实现方法基础按钮实现使用 Vue 的模板语法创建基础按钮组件，绑定点击事件处理购物逻辑： <template> <button @click="addTo…

vue怎么实现选中删除

实现选中删除功能的方法在Vue中实现选中删除功能通常涉及以下几个关键步骤：数据绑定与选中状态管理使用v-model或v-for指令绑定列表数据，结合复选框或单选按钮实现选中状态管理。例如：…

vue实现一个标签选择

Vue 标签选择组件实现基础实现使用 Vue 的 v-for 和 v-model 指令可以快速实现标签选择功能： <template> <div class="tag-s…

vue实现视窗

Vue 实现视窗功能在 Vue 中实现视窗功能通常涉及监听浏览器窗口大小变化、响应式布局或创建自定义弹窗组件。以下是几种常见实现方式：监听浏览器窗口大小变化使用 Vue 的 mounted…

vue 实现pc

Vue 实现 PC 端应用的核心要点 Vue.js 是一个渐进式框架，适合构建 PC 端单页应用（SPA）或复杂的前端界面。以下是实现 PC 端应用的关键方法和注意事项：项目初始化与工程化配置使…

vue 实现toast

vue 实现 toast 的方法在 Vue 中实现 Toast 提示功能可以通过多种方式，以下是几种常见的实现方法：使用第三方库 Vue 生态中有许多成熟的 Toast 库，例如 vue-toa…

vue 指令实现