自定义指令Custom Directives

<script setup lang='ts'>
import { ref } from "vue"const state = ref(false)/*** Implement the custom directive* Make sure the input element focuses/blurs when the 'state' is toggled*
*/
// 以v开头的驼峰式命名的变量都可以作为一个自定义指令
const VFocus = {mounted:(el)=>el.focus(), // el是指令绑定到的元素updated:(el,binding)=>{ // 包含传递给指令的值、指令修饰符modifiers(v-directive.upper)、指令参数arg(v-directive:foo)等属性binding.value ? el.focus() : el.blur()}
}setInterval(() => {state.value = !state.value
}, 2000)</script><template><input v-focus="state" type="text">
</template>

自定义指令的对象提供了7个钩子函数:

created、beforeMounted、 mounted、 beforeUpdate、updated、beforeUnmount、unmounted

大多数情况仅需要使用mounted和updated。

对比vue的8个生命周期:

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted

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

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

相关文章

System作为系统进程陔如何关闭?

一、简介 system进程是不可以关闭的&#xff0c;它是用来运行一些系统命令的&#xff0c;比如reboot、shutdown等&#xff0c;以及用来运行一些后台程序&#xff0c;比如ntfs-3g、v4l2loopback等。system进程也被用于运行一些内核模块&#xff0c;比如nvidia、atd等。system进程…

mars3d加载arcgis发布的服务,⽀持4523坐标

问题 1.从这个服务地址加载&#xff0c;具体在哪⾥去转坐标呢&#xff1f; 加个 usePreCachedTilesIfAvailable&#xff1a;false 参数即可 坐标系为4490的arcgis影像服务图层&#xff0c;配置后瓦片加载不出来&#xff0c;没报错 甚至可以跳转 没有看出问题&#xff0c;或者测…

linux系统启动时运行web程序

1.修改rc.local文件 执行命令如果找不到会报错command not found &#xff0c;使用全路径即可 找不到的话 可以使用which 命令 找到路径 后台查看执行日志 2.修改rc.local文件的权限 chmod x rc.local 然后reboot 可以查到进程和启动日志

vue3:直接修改reative的值,页面却不响应,这是什么情况?

目录 前言&#xff1a; 错误示范&#xff1a; reactive() 的局限性 解决办法&#xff1a; 1.使用ref 2.reative多套一层 3.使用Object.assign 前言&#xff1a; 今天看到有人在提问&#xff0c;问题是这样的&#xff0c;我修改了reative的值&#xff0c;数据居然失去了响…

MySQL异步操作在C++中的应用

在开发高性能的C应用中&#xff0c;数据库操作的效率往往成为一个瓶颈。传统的同步数据库操作在等待数据库响应时会阻塞程序的执行&#xff0c;导致整体性能下降。为了解决这个问题&#xff0c;异步操作成为了一个重要的技术手段。 本文将详细介绍如何在C中使用MySQL的异步接口…

YOLOv5改进 | 注意力篇 | DAttention (DAT)注意力机制实现极限涨点

一、本文介绍 本文给大家带来的是YOLOv5改进DAT(Vision Transformer with Deformable Attention)的教程&#xff0c;其发布于2022年CVPR2022上同时被评选为Best Paper&#xff0c;由此可以证明其是一种十分有效的改进机制&#xff0c;其主要的核心思想是&#xff1a;引入可变形…

微信小程序置顶导航,替代原生导航栏

效果图&#xff1a; 思路&#xff1a;Navigation是小程序的顶部导航组件&#xff0c;当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏&#xff0c;wx.getSystemInfoSync获取可使用窗口高度 wxml代码&#xff1a; <!-- 头部 --> <view cla…

【docker】部署minio对象存储并用rclone同步

docker部署minio对象存储并用rclone同步 本文首发于 ❄️慕雪的寒舍 1.什么是minio&#xff1f; minio是一个开源的对象存储服务器&#xff0c;兼容S3协议。 官网&#xff1a;https://min.io/ 官方在开源的基础上也提供云端S3服务&#xff0c;分为个人和企业&#xff0c;有不…

【MySQL】图形化界面工具 DataGrip

使用 dataGrip: 1.添加数据源 2.连接本地数据库 user 是 root 密码是 123456 3.展示所有数据库 4.创建数据库 5.创建表 6.修改表 在需要修改的表上&#xff0c;右键选择 "Modify Table..." 如果想增加字段&#xff0c;直接点击号&#xff0c;录入字段信息&#x…

Ansible Galaxy?Ansible如何控制任务的并行执行?Ansible故障后的排查思路?

Ansible Galaxy是一个由各种Ansible管理员和用户编写的Ansible角色的公共库。它是一个包含数千个Ansible角色的归档文件&#xff0c;并且有一个可搜索的数据库&#xff0c;帮助Ansible用户识别可能帮助他们完成管理任务的角色。Ansible Galaxy包括指向新用户和角色开发人员的文…

前端面试(5)

1、移动端适配 1.1、设置meta缩放比例&#xff0c;将设备窗口调整为设计图大小。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width,initial-sc…

MetaAI发布Seamless:两秒内实现跨语言同声传译

在当今日益互联的世界中&#xff0c;语言差异常常成为沟通的障碍。MetaAI最新发布的语音翻译大模型Seamless&#xff0c;正是为打破这一障碍而生。Seamless不仅提供流畅、高效的多语言翻译功能&#xff0c;更在保留说话人韵律和风格方面取得突破&#xff0c;是AI同声传译领域的…

MX6ULL学习笔记(十三)Linux 自带按键驱动程序

一、Linux 内核自带按键驱动使能。 Linux 内核也自带了 KEY 驱动&#xff0c;如果要使用内核自带的 KEY 驱动的话需要配置 Linux 内核&#xff0c;不过 Linux 内核一般默认已经使能了 KEY 驱动&#xff0c;但是我们还是要检查一下。 使用如下命令打开 Linux 配置菜单&#xff…

mysql8升级测试

参考文档&#xff1a;https://mysql.net.cn/doc/refman/8.0/en/mysql-upgrade.html mysql5.7包&#xff1a; mysql-5.7.25-linux-glibc2.12-x86_64 <<<glibc2.12 mysql8包&#xff1a; mysql-8.0.35-linux-glibc2.28-x86_64.tar.xz <<< glibc2.2…

docker入门小结

docker是什么&#xff1f;它有什么优势&#xff1f; 快速获取开箱即用的程序 docker使得所有的应用传输就像我们日常通过聊天工具文件传输一样&#xff0c;发送方将程序传输到超级码头而接收方也只需通过超级码头进行获取即可&#xff0c;就像一只鲸鱼拖着货物来回运输一样。…

前端API请求缓存的5种方案

文章目录 一、前言二、[方案一]数据缓存三、[方案二]单promise 缓存四、[方案三]多promise 缓存五、[方案四]添加时间有关的缓存六、[方案五]基于修饰器的方案四七、最后 一、前言 开发 web 应用程序时&#xff0c;性能都是必不可少的话题。 对于webpack打包的单页面应用程序…

win中查看MD5、Linux中查看MD5

win中的MD5计算 1、用GitBash Git Bash Here md5sum.exe 我记得-孙燕姿.mp32、win自带命令 certutil -hashfile 我记得-孙燕姿.mp3 MD5Linux中MD5计算 md5sum 我记得-孙燕姿.mp3

离线编译安装opencv库及多版本切换[ubuntu]

系统版本&#xff1a;ubuntu18.04 库版本&#xff1a;opencv4.6.0 & opencv3.6.0 一、多版本安装前准备 1. 卸载已经安装的opencv版本[可选] 1.1 卸载从软件仓库中安装的opencv sudo apt-get purge libopencv* 1.2 卸载使用source自行编译安装的opencv 首先进入原先编译…

你好,C++(3)2.1 一个C++程序的自白

第2部分 与C第一次亲密接触 在浏览了C“三分天下”的世界版图之后&#xff0c;便对C有了基本的了解&#xff0c;算是一只脚跨入了C世界的大门。那么&#xff0c;怎样将我们的另外一只脚也跨入C世界的大门呢&#xff1f;是该即刻开始编写C程序&#xff1f;还是…… 正在我们犹…

springboot(ssm疗养院管理系统 养老院管理平台Java系统

springboot(ssm疗养院管理系统 养老院管理平台Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; 数…