vue2中的自定义指令的基本语法、常见参数与使用场景，超详细教程！

已于 2024-09-01 13:10:40 修改
阅读量2.8k 收藏 75
点赞数 109
分类专栏： vue2/3 从基础到起飞 文章标签： vue.js 前端 javascript 前端框架 html5 ai
于 2024-05-18 00:17:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78542842/article/details/139014934
版权

🚀 个人简介：某大型国企资深软件开发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主、华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作    者：码喽的自我修养❣️
📝 专    栏：vue2/3 从基础到起飞

🌈 若有帮助，还请 关注➕点赞➕收藏  ，不行的话我再努努力💪💪💪

 

目录

一、前言

二、自定义指令

1.指令介绍

2.自定义指令

3.自定义指令语法

4.指令中的配置项介绍

5.代码示例

5.1 全局注册的方式

5.2 局部注册的方式 

三、自定义指令-指令的值

1.需求

2.语法

3.代码示例

四、自定义指令-v-loading指令的封装

1.场景

2.需求

3.分析

4.实现

5.完整代码

了解本专栏 订阅专栏 解锁全文 超级会员免费看
码喽的自我修养
关注
专栏目录
订阅专栏
vue2(5)之自定义指令v-focus&v-color&v-loading/默认插槽/具名插槽/作用域插槽/路由vueRouter基础使用/路由的封装与抽离
qq_66318904的博客
05-04 1022
这都是Vue给咱们内置的一些指令，可以直接使用自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令每个指令都有自己各自独立的功能概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能全局注册// // 1. 全局注册指令// inserted 会在 指令所在的元素，被插入到页面中时触发// el 就是指令所绑定的元素el.focus()})局部注册//在Vue组件的配置项中"指令名": {// 可以对 el 标签，扩展额外功能el.focus()
Vue2自定义指令及事例
qq_54598736的博客
10-11 1138
Vue2自定义指令及事例
Vue的自定义指令
qq_50260510的博客
06-09 240
Vue中自定义指令是什么
vue3/vue2自定义指令看这一篇就够啦~（包含一些实用的自定义指令）
最新发布
零凌林的博客
08-15 843
本文主要针对于vue的自定义指令如何使用进行了记录，包含了vue2和vue3不同的对比。同样也提供了一些实用的自定义指令，开箱即用，大家可以直接复制到自己的项目里注册使用
Vue2——Vue自定义指令
mantou_riji的博客
07-18 3347
需要在directives： 中进行指令的配置定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。 定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。尝试使用函数形式实现 但是focus函数需要等element的值修改成功并插入页面后执行才奏效，而使用函数的写法我们无法指定在elemen插入页面后执行focus函数才执行，所以这样写第一次是无法获取焦点的。所以需要采取对象的（键值对）写法： (1).bind:指令与元素成功绑定时调用。
VUE2的自定义指令
m0_66051368的博客
05-01 4390
自定义指令
VUE2 自定义指令
DTCloud
04-18 289
简写方式（有弊端） <h2>{{name}}</h2> <h2>当前的n值是：{{n}} </h2> <h2 v-big="n">放大10倍后的n值是：{{n}} </h2> <button @click="n++"> </button> data(){ return{ name: "张三" n: 1 } }, directives:{ //自定义指令被调
vue2中的自定义指令
weixin_52350720的博客
03-17 736
3.17打卡
Vue的土著指令和自定义指令实例详解
08-28
Vue中的指令系统是它的一大特色，分为土著指令（内置指令）和自定义指令。 1. 土著指令： - `v-text`：用于更新元素的textContent，不支持插值表达式，通常用来替换整个文本内容。 - `v-show`：根据表达式的真假...
Vue.js中的自定义指令以及使用场景
# 1. 简介 ## 1.1 Vue.js简介 Vue.js（通常简称为Vue）是一款用于...## 1.2 自定义指令的意义和作用 在Vue中，指令是一种特殊的标签属性，用于扩展HTML元素的行为。Vue内置了许多常用的指令（如`v-if`、`v-for`等
Vue中如何自定义(v-throttle)节流指令
鸭绒的博客
08-13 1825
背景：在开发中，我们经常会在搜索框中使用防抖或节流进行优化，因此为了方便，今天我们自定义一个(v-throttle)指令。 自定义指令语法：可参考官方文档 1.在项目的utils目录下定义util.js模块(通常该模块放一些通用的工具方法)： export const throttle = (callback, delay) => { let timer = null return (e) => { if (!timer) { timer = setTimeout.
Vue2中使用自定义指令
学而不思则罔,思而不学则殆
09-13 966
vue自定义指令。全局注册，局部注册。
Vue2 自定义指令
qq_45771053的博客
08-04 728
Vue2 自定义指令
VUE2自定义指令
qq_42451776的博客
07-04 579
文章目录vue2自定义全局指令VUE2自定义私有指令案例 vue2自定义全局指令 1.新建directives.js文件 const color = { inserted: function (el, binding, vnode) { el.style.color = binding.value }, } // 直接鉴权 let permission = { inserted(el, binding) { let value = binding.v
vue2.0自定义指令
qq_44039897的博客
03-31 1067
1、分类 （1）私有自定义指令 （2）全局自定义指令 2、 私有自定义指令 （1）基本使用 在每个vue组建中，可以在directives节点下声明私有自定义指令 形参中el是绑定了此指令原生的DOM对象，是固定写法 v-是一个固定写法，自定义对象不需要写v- 当指令第一次被绑定到元素上的时候，会立即触发bind函数 <h1 v-color>App 根组件</h1> ​ <script> export default {
vue的自定义指令
weixin_44395929的博客
04-04 169
一、vue自定义指令是什么 和官方规定好的v-on,v-show,v-if等指令类似,只是名称和方法由我们来定:比如v-focus。自定义指令一般用于对普通 DOM 元素进行底层操作 二、vue自定义指令使用方法 //分两种注册方式:全局注册和局部注册 全局注册 Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: func...
复习vue之自定义指令的生命周期
furfur-jiang的博客
07-18 1304
文章参考自官网，加入自己的例子和理解 钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 只会执行一次 update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。（注意是update，不是.
评论 104
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码喽的自我修养

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值