(详解)Vue自定义指令

一、背景

在我们日常开发中,会遇到特殊的操作例如,图片懒加载,和类似v-model等等这样的自定义指令

 二、提前预习(必看)

自定义指令跟组件一样,也是有生命周期的,我们的操作都是定义在对应的生命周期中,然后进行操作的,然后通过钩子函数传参进行绑定事件等等(先了解下)

2.1自定义指令生命周期

  • created:在绑定元素的 attribute 或事件监听器被应用之前调用;
  • beforeMount:当指令第一次绑定到元素并且在挂载父组件之前调用;
  • mounted:在绑定元素的父组件被挂载后调用,大部分自定义指令都写在这里;
  • beforeUpdate:在更新包含组件的 VNode 之前调用;
  • updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用;
  • beforeUnmount:在卸载绑定元素的父组件之前调用;
  • unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次;
     

2.2 生命周期四个参数

这里七个钩子函数,钩子函数中有回调参数,回调参数有四个,含义基本上和 Vue2 一致:

  • el:指令所绑定的元素,可以用来直接操作 DOM(可以进行事件绑定)。

  • binding:我们通过自定义指令传递的各种参数

  • vnode:Vue 编译生成的虚拟节点。

  • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

三、 自定义指令

3.1私有自定义指令

3.1.1定义指令

在每个 vue 组件中,可以在 directives 节点下声明私有自定义指令。示例代码如下:

<script>
export default {directives: {// 自定义私有指令focus,在使用的时候要用 v-focus 。focus: {mounted(el, binding, vnode) => {//el是对应的dom,可以通过el给对应添加事件监听 el.addEventListener// binding.value 就是通过 = 绑定的值,在传值的时候传到这 binding.value//vnode是节点}},},
}
</script>

3.1.2使用自定义指令

在使用自定义指令时,需要加上 v- 前缀。示例代码如下:

<!-- 声明自定义私有指令focus,在使用的时候要用 v-focus 。 -->    
<input v-focus/>

3.2全局自定义指令

3.2.1定义指令

全局共享的自定义指令需要通过“单页面应用程序的实例对象”进行声明,示例代码如下:

import { createApp } from 'vue'const app = createApp({/* ... */
})// 注册(对象形式的指令)
app.directive('my-directive', {/* 自定义指令钩子 */mounted(el, bindings) {}})// 注册(函数形式的指令)
app.directive('my-directive', (el, binding, vnode) => {//el是对应的dom,可以通过el给对应添加事件监听 el.addEventListener// binding.value 就是通过 = 绑定的值,在传值的时候传到这 binding.value//vnode是节点})

3.2.2使用自定义指令

在使用自定义指令时,需要加上 v- 前缀。示例代码如下:

<!-- 声明自定义私有指令focus,在使用的时候要用 v-focus 。 -->    
<input v-focus/>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/78362.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SeaArt.ai: 海艺AI绘画艺术图片模型创作平台

【产品介绍】 • 名称 SeaArt.ai • 具体描述 SeaArt.ai是一个基于人工智能技术的AI绘画工具&#xff0c;它可以根据你的描述或者关键词来生成符合你想象的图片。你可以选择不同的模式来创建不同类型的图片&#xff0c;比如人物、风景、建筑、神话、自…

投稿指南【NO.12_8】【极易投中】核心期刊投稿(组合机床与自动化加工技术)

近期有不少同学咨询投稿期刊的问题&#xff0c;大部分院校的研究生都有发学术论文的要求&#xff0c;少部分要求高的甚至需要SCI或者多篇核心期刊论文才可以毕业&#xff0c;但是核心期刊要求论文质量高且审稿周期长&#xff0c;所以本博客梳理一些计算机特别是人工智能相关的期…

Swift 新并发模型中 isolated 和 nonisolated 关键字的含义看这篇就懂了!

概览 在 Swift 新 async/await 并发模型中&#xff0c;我们可以利用 Actor 来避免并发同步时的数据竞争&#xff0c;并从语义上简化代码。 Actor 伴随着两个独特关键字&#xff1a;isolated 和 nonisolated&#xff0c;弄懂它们的含义、合理合规的使用它们是完美实现同步的必…

SpringMVC文件的上传下载JRebel的使用

目录 前言 一、JRebel的使用 1.IDea内安装插件 2.激活 3.离线使用 使用JRebel的优势 二、文件上传与下载 1 .导入pom依赖 2.配置文件上传解析器 3.数据表 4.配置文件 5.前端jsp页面 6.controller层 7.测试结果 前言 当涉及到Web应用程序的开发时&…

只依赖OPENCV的工作服安全帽检测YOLOV8S

工地安全帽工作服检测Y8S&#xff0c;采用YOLOV8S训练模型&#xff0c;然后使用OPENCV的DNN调用&#xff0c;彻底拜托PYTORCH依赖&#xff0c;可以在C,PYTHON,ANDROID上跑。附件是C生成的效果测试&#xff08;只需解压将图片或者视频放入VIDEOS文件夹&#xff0c;文件夹没图片或…

【UE 材质】制作飘动的旗帜

效果 步骤 1. 首先在建模软件中创建一个平面&#xff0c;注意分段数一定要多 2. 在UE中创建一个材质&#xff0c;这里命名为“Mat_Flag” 打开“Mat_Flag”&#xff0c;先将旗帜纹理连接到基础颜色 先选中导入的模型然后点击根据选中的模型预览材质 创建如下节点可以看到此时模…

如何让报表会说话?学会这一招就可以了

Smartbi电子表格软件进化到全新阶段&#xff0c;这轮更新最能吸引人的地方是什么呢&#xff1f;跟随小麦一起来感受下。 1、新增语音播放特性&#xff0c;让报表会说话 Smartbi电子表格软件最新上线超级实用的新特性——语音播报&#xff0c;即让报表自己开口说话~ 设想你打开…

matplotlib绘图

&#x1f433; 我正在和鲸社区参加“商业数据分析训练营活动” https://www.heywhale.com/home/competition/6487de6649463ee38dbaf58b &#xff0c;以下是我的学习笔记&#xff1a; 学习主题&#xff1a;matplotlib绘图 日期&#xff1a;2023.9.13 关键概念/知识点&#xf…

JS_socket.io简单使用

安装socket.io npm install --save socket.iodemo目录 ├── index.js ├── node_modules ├── package.json └── views└── index.html服务端代码 ./index.js const http require(http); const fs require(fs); const socketIO require(socket.io); const se…

TikTok的生态封闭:如何应对新的商业格局

TikTok&#xff08;抖音国际版&#xff09;已经成为全球范围内最受欢迎的社交媒体平台之一&#xff0c;拥有数以亿计的活跃用户。然而&#xff0c;最近TikTok宣布了一项重大战略调整&#xff0c;即开始构建生态封闭&#xff08;walled garden&#xff09;模式。 这一变化将对出…

bit、bin 、mcs文件区别

FPGA里面的可执行文件都涉及到 *.bit&#xff0c; *.mcs&#xff0c; *.bin 和 *.elf。 bit文件 bit 文件一般用于JTAG在线进行调试的时候&#xff0c;是把bit文件是烧写到FPGA中进行在线调试。 bin文件 bin 文件是二进制文件&#xff0c;按顺序只包含原始字节流&#xff0c…

linux目录内容详解

目录 从上到下&#xff0c;你所看到的目录如下 /bin /bin 目录是包含一些二进制文件的目录&#xff0c;即可以运行的一些应用程序。 你会在这个目录中找到上面提到的 ls 程序&#xff0c;以及用于新建和删除文件和目录、移动它们基本工具。还有其它一些程序&#xff0c;等等。…

循环神经网络

循环神经网络&#xff08;Recurrent Neural Networks&#xff0c;RNN&#xff09;是一种强大的深度学习模型&#xff0c;适用于处理序列数据&#xff0c;如时间序列、文本、语音等。RNN具有记忆能力&#xff0c;可以捕捉序列中的时间依赖关系&#xff0c;并广泛应用于自然语言处…

批量剪辑视频:AI智剪技巧全掌握

在视频剪辑的工作中&#xff0c;我们常常需要处理大量的视频文件。传统的剪辑方式既耗时又费力&#xff0c;而如今&#xff0c;随着人工智能技术的发展&#xff0c;AI智剪成为了一种省时省力的视频剪辑方法。下面&#xff0c;我们就来详细了解一下如何使用固乔智剪软件进行批量…

UGUI画布加载优化

在Unity中&#xff0c;UGUI画布的加载优化可以通过以下几种方式来实现&#xff1a; 1. 合理使用画布渲染模式&#xff1a;UGUI画布有三种渲染模式&#xff0c;分别是Screen Space - Overlay、Screen Space - Camera和World Space。在使用时&#xff0c;应根据场景需求选择最适…

Linux下创建普通用户遇到的问题及解决办法

在Linux下只有root一个超级用户&#xff0c;但是可以创建多个普通用户的&#xff0c;具体的创建方法如下。 先切换到root用户&#xff0c;使用下面的命令创建用户名为user1(本文均以此用户名为例&#xff0c;注意后续键入指令时不要弄错了)的普通用户。 su root useradd user1 …

Flask: 上传文件的功能怎么做?

介绍 无论你是处理允许用户上传头像的社交媒体网站、管理用户文件的云存储服务,还是接收数据进行处理的企业应用程序,文件上传都是促进这些交互的基本功能。 Flask 是一个轻量级且灵活的 Python Web 框架,因其易用性和灵活性而成为开发人员的热门选择。它提供了一组强大的工…

Qt——对话框简介

对话框&#xff1a;交互界面的便捷窗口 在现代计算机应用程序中&#xff0c;对话框是用户界面设计的重要组成部分&#xff0c;用于与用户进行信息交互和数据输入。对话框可以分为独立对话框和定制对话框两大类&#xff0c;它们为用户和应用程序之间的交流提供了便捷的窗口。 …

数据结构(C语言)——栈的两种实现方式

下面来介绍栈的两种实现方式&#xff1a; 一、数组 #include<stdio.h> #include<stdlib.h> #define E int #define MAX_STACK 5 //数据结构-栈&#xff08;数组实现&#xff09; typedef struct my_stack {E *sta;//栈大小为5int pos;//栈顶位置 }my_stack; //初…

ARM的异常处理

概念 处理器在正常执行程序的过程中可能会遇到一些不正常的事件发生 这时处理器就要将当前的程序暂停下来转而去处理这个异常的事件 异常事件处理完成之后再返回到被异常打断的点继续执行程序 异常处理机制 不同的处理器对异常的处理的流程大体相似&#xff0c;但是不同的处理器…