vue3自定义全局指令和局部指令


1.全局指令


el:指令绑定到的DOM元素,可以用于直接操作当前元素,默认传入钩子的就是el参数,例如我们开始实现的focus指令,就是直接操作的元素DOM
binding:这是一个对象,包含以下属性:
value:在元素上使用指令时,传递给指令的值。例如:

<div v-reserve:fo.bb="hello">456789</div>

传递给reserve指令的值就是hello,我们可以拿到值并做相关处理
oldValue:之前的值,一般用于beforeUpate和updated钩子函数中,例如:beforeUpdate(el, {oldValue: ‘’})
arg:传递给指令的参数,非必需,例如

,那么传递给指令的参数就是foo
modifiers:一个由修饰符构成的对象,例如

app.directive('reserve', {
  mounted(el, binding) {
    console.log(el,binding);
  }
})

在这里插入图片描述


2.局部指令


<el-input v-model="hello" ref="inputRef2" v-focus:inputRef='2'></el-input>

const vFocus = {
  mounted: (el:any,binding:any) => {
  	console.log("%c 🅿️: binding ", "font-size:16px;background-color:#ee4f91;color:white;",el,binding)
  }
}

相关推荐

  1. Vue3全局组件定义指令

    2024-07-09 18:14:04       45 阅读
  2. Vue3定义全局指令

    2024-07-09 18:14:04       29 阅读
  3. vue3定义指令

    2024-07-09 18:14:04       43 阅读
  4. vue3定义指令

    2024-07-09 18:14:04       47 阅读
  5. VUE3 定义指令

    2024-07-09 18:14:04       23 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-09 18:14:04       4 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-09 18:14:04       5 阅读
  3. 在Django里面运行非项目文件

    2024-07-09 18:14:04       4 阅读
  4. Python语言-面向对象

    2024-07-09 18:14:04       4 阅读

热门阅读

  1. 【Hive实战】 HiveMetaStore的指标分析

    2024-07-09 18:14:04       11 阅读
  2. mongodb-docker-compos-安装

    2024-07-09 18:14:04       14 阅读
  3. aws slb

    2024-07-09 18:14:04       8 阅读
  4. django学习入门系列之第四点《案例 登录》

    2024-07-09 18:14:04       15 阅读
  5. Rust破界:前端革新与Vite重构的深度透视(中)

    2024-07-09 18:14:04       10 阅读