首页 > 其他分享 >Vue自定义指令

Vue自定义指令

时间:2023-09-30 12:11:06浏览次数:51  
标签:Vue 自定义 钩子 配置 指令 mydirec1 mydirec2 组件

定义指令

全局定义

// 指令名称为:mydirec1
Vue.directive('mydirec1', {
  // 指令配置
})

// 指令名称为:mydirec2
Vue.directive('mydirec2', {
  // 指令配置
})

之后,所有的组件均可以使用mydirec1mydirec2指令

<template>
  <!-- 某个组件代码 -->
  <div>
    <MyComp v-mydirec1="js表达式" />
    <div v-mydirec2="js表达式">
      ...
    </div>
    <img v-mydirec1="js表达式" />
  </div>
</template>

局部定义

局部定义是指在某个组件中定义指令,和局部注册组件类似。

定义的指令仅在该组件中有效。

<template>
  <!-- 某个组件代码 -->
  <div>
    <MyComp v-mydirec1="js表达式" />
    <div v-mydirec2="js表达式">
      ...
    </div>
    <img v-mydirec1="js表达式" />
  </div>
</template>

<script>
export default {
  // 定义指令
  directives: {
    // 指令名称:mydirec1
    mydirec1: {
      // 指令配置
    },
    // 指令名称:mydirec2
    mydirec2: {
      // 指令配置
    }
  }
}
</script>

和局部注册组件一样,为了让指令更加通用,通常我们会把指令的配置提取到其他模块。

<template>
  <!-- 某个组件代码 -->
  <div>
    <MyComp v-mydirec1="js表达式" />
    <div v-mydirec2="js表达式">
      ...
    </div>
    <img v-mydirec1="js表达式" />
  </div>
</template>

<script>
  // 导入当前组件需要用到的指令配置对象
  import mydirec1 from "@/directives/mydirec1";
  import mydirec2 from "@/directives/mydirec2";
	export default {
    // 定义指令
    directives: {
      mydirec1,
      mydirec2
    }
  }
</script>

指令配置对象

没有配置的指令,就像没有配置的组件一样,毫无意义

vue支持在指令中配置一些钩子函数,在适当的时机,vue会调用这些钩子函数并传入适当的参数,以便开发者完成自己想做的事情。

常用的钩子函数:

// 指令配置对象
{
  bind(){
    // 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  },
  inserted(){
    // 被绑定元素插入父节点时调用。
  },
  update(){
    // 所在组件的 VNode 更新时调用
  }
}

查看更多的钩子函数

每个钩子函数在调用时,vue都会向其传递一些参数,其中最重要的是前两个参数

// 指令配置对象
{
  bind(el, binding){
    // el 是被绑定元素对应的真实DOM
    // binding 是一个对象,描述了指令中提供的信息
  }
}

bingding 对象

查看更多bingding对象的属性

配置简化

比较多的时候,在配置自定义指令时,我们都会配置两个钩子函数

{
  bind(el, bingding){
    
  },
  update(el, bingding){
    
  }
}

这样,在元素绑定和更新时,都能运行到钩子函数

如果这两个钩子函数实现的功能相同,可以直接把指令配置简化为一个单独的函数:

function(el, bingding){
  // 该函数会被同时设置到bind和update中
}

利用上述知识,可满足大部分自定义指令的需求

更多的自定义指令用法见官网

标签:Vue,自定义,钩子,配置,指令,mydirec1,mydirec2,组件
From: https://www.cnblogs.com/bingquan1/p/17737719.html

相关文章

  • MySQL常用指令
    注意所有的命令都要用分号结尾!!!!1、查看MySQL中有那些数据库:showdatabases(默认自带了四个数据库)2、如何使用某个数据库:use数据库名称3、如何创建数据库:createdatabase数据库名称4、导入SQL指令:sourceSQL指令(SQL指令可以是文件的路径,但是文件的路径一定不要有中文!!)5、不看表......
  • vue_error_Runtime directive used on component with non-element root node. The di
    翻译:'运行时指令,用于非元素根节点的组件。这些指令将无法发挥预期的作用';这个错误发生在我将v-show放在自定义组件上时,我想是因为自定义组件在渲染时会被自定义组件的内部元素替换,因此设置是无效的解决:在自定义组件外加一个div,把v-show写在div上......
  • 基于vue和element-ui开发仿桌面文件夹组件
    ......
  • ARM汇编 --- 跳转指令 B、BL、BX、BLX的区别
    ARM的跳转指令介绍跳转指令用于实现程序流程的跳转,在ARM程序中有两种方法可以实现程序流程的跳转:(1)使用专门的跳转指令。(2)直接向程序计数器 PC写入跳转地址值。通过向程序计数器PC写入跳转地址值,可以实现在4GB的地址空间中的任意跳转,在跳转之前结合使用 MOVLR......
  • vue前端框架ruoyi介绍
    Ruoyi是一个基于Vue.js和SpringBoot框架构建的开源前后端分离的企业级快速开发平台。它遵循了前后端分离的架构模式,将前端和后端进行解耦,使得系统更加灵活、可扩展和易于维护。Ruoyi的前端部分采用了Vue.js框架,这是一个流行的JavaScript前端框架,专注于构建用户界面。Vue......
  • FastAPI学习-24.自定义异常处理器 exception_handler
    前言添加自定义处理器,要使用 Starlette的异常工具。安装自定义异常处理器假设要触发的自定义异常叫作 UnicornException。且需要FastAPI实现全局处理该异常。此时,可以用 @app.exception_handler() 添加自定义异常控制器:fromfastapiimportFastAPI,Requestfromfa......
  • 基于vue和element-ui的搜索下拉滚动条组件
    ......
  • Vue源码学习(八):生命周期调用
    好家伙, Vue源码学习(七):合并生命周期(混入Vue.Mixin)书接上回,在上一篇中,我们已经实现了合并生命周期现在,我们要在我们的初始化过程中,注册生命周期 1.项目目录 红框为本篇涉及到的.js文件 2.先来看/utils/index.jsexportconstHOOKS=["beforeCreated......
  • 【Vue】全系列Vue教程-数据监视
    hello,我是小索奇哈,精心制作的Vue系列持续发放,涵盖大量的经验和示例,由浅入深进行讲解。本章给大家讲解的是数据监视,前面的章节已经更新完毕,后面的章节持续输出,有任何问题都可以留言或私信哈,一起加油~数据监视Vue实现数据监测的核心是通过defineProperty()劫持属性的getter&setter,......
  • 单片机MCS-51指令集
    HexBytesMnemonicOperands001NOP012AJMPcodeaddr023LJMPcodeaddr031RRA041INCA052INCdataaddr061INC@R0071INC@R1081INCR0091INCR10A1INCR20B1INCR30C1INCR40D1INCR50E1IN......