vue/自定义指令

需求: 页面有个input元素,现在要鼠标光标聚焦在上面,让每个页面上的标签都可以聚焦光标,比如,从A页面跳转到B页面的时候,我们依然要聚焦。如果要一遍遍地操作dom就会很麻烦。
这个时候,为了方便开发,我们可以使用vue提供的自定义指令。

 自定义指令有两种,分为全局注册和局部注册。

1、全局注册

1.1 在main.js 中 注册

// 1、注册指令
// 1.1 全局注册
Vue.directive('focussss',{inserted(el){el.focus()}
})

1.2 使用

   <input v-focussss type="text" ref="inp">

 

2、局部注册

2.1 在当前要使用指令的主键内,注册

  export default {components: {},data() {return {};},computed: {},watch: {},methods: {},directives:{focusdsg:{inserted(el) {el.focus()}}}}

2.2 使用

 <input v-focusdsg type="text" ref="inp">

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

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

相关文章

“入门C++编程需要多长时间?如何高效学习?“

文章目录 每日一句正能量前言一、c 发展方向二、学c语言编程难吗&#xff1f;三、多久能学会编程&#xff1f;四、“浸泡”理论五、C语言特有特性六、学习方式后记 每日一句正能量 低头要有勇气&#xff0c;抬头要有底气。做人要能屈能伸&#xff0c;顺景时不嚣张&#xff0c;逆…

【Unity2022】Unity实现手机游戏操控摇杆(实现操控轮盘)

文章目录 运行效果预览创建物体脚本获取RectTransform处理玩家拖动事件完整代码 获取输入运行其他文章 运行效果预览 首先展示一下本文章实现的效果&#xff1a; 创建物体 创建两个UI图像&#xff0c;一个用于表示背景&#xff0c;作为父物体&#xff0c;命名为JoyStick&am…

python 二分查找

1.二分查找首先被查找的序列是一个有序的。 2.明确序列的左右边界 3.找出序列中间的元素&#xff0c;判断如果是要查找的元素&#xff0c;返回元素 4.如果中间元素&#xff0c;大于或者小于查找的元素&#xff0c;那么改变左右边间&#xff0c;直到中间的数等于查找的元素。…

基于SpringBoot的补习班线上报名系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…

十四天学会C++之第一天(入门和基本语法)

C的起源和历史 C诞生于20世纪80年代初&#xff0c;它的创造者是计算机科学家Bjarne Stroustrup。当时&#xff0c;Stroustrup在贝尔实验室工作&#xff0c;他希望为C语言添加一些功能&#xff0c;以便更好地支持系统开发。这个愿望促使他创建了C。 C的名字来源于它的基因&…

Nginx实现动静分离

一、概述 1、什么是动静分离 动静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来&#xff0c;动静资源做好了拆分以后&#xff0c;我们就可以根据静态资源的特点将其做缓存操作&#xff0c;这就是网站静态化处理的核心思路。 动静分离简单的概…

机器学习基础概念与常见算法入门【机器学习、常见模型】

机器学习基础概念与算法 机器学习是计算机科学领域的一个分支&#xff0c;它致力于让计算机系统具备从数据中学习和改进的能力&#xff0c;而不需要显式地进行编程。与传统编程相比&#xff0c;机器学习有着根本性的不同之处。 机器学习与传统编程的不同 传统编程&#xff1…

基于C++ Qt的积分抽奖系统源码,实现了用户注册、商品购买、积分抽奖等功能

基本介绍 完整代码下载&#xff1a;基于C Qt的积分抽奖系统 这个是我大二上学期的课程作业仓库&#xff0c; 目的是实现一个超市积分抽奖系统&#xff0c; 基本的功能是实现一个能够在超市购物的同时进行抽奖的积分系统&#xff0c; 主要用到的技术栈就是Qt和c&#xff0c; 叠…

火山引擎 ByteHouse 与白鲸开源完成兼容性认证,加速数据价值释放

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 数据作为新型生产要素&#xff0c;已快速融入生产、分配、流通、消费和社会服务管理等各环节&#xff0c;深刻改变着生产方式、生活方式和治理方式。越来越多企业也…

Hive【Hive(五)函数-高级聚合函数、炸裂函数】

高级聚合函数 多进一出&#xff08;多行输入&#xff0c;一个输出&#xff09; 普通聚合函数&#xff1a;count、sum ... 1&#xff09;collect_list&#xff08;&#xff09;&#xff1a;收集并形成 list 集合&#xff0c;结果不去重 select sex,collect_list(job) from e…

JAVA学习(3)-全网最详细~

回顾 昨天学了 Java 中的数据类型-整型 int - integer,以及什么是标识符identifier和它的命名规则,什么是保留字(reserved word key word),最后还谈到了Java变量包括局部变量和成员变量(在类内部,方法外部的变量),变量必须要初始化,否则会报错.如果有遗忘或者是感兴趣的小伙伴…

Python PEP8 代码规范常见问题及解决方案

Win11查看安装的Python路径及安装的库 Python3(基础|高级)语法实战(|多线程|多进程|线程池|进程池技术)|多线程安全问题解决方案 Python PEP8 代码规范常见问题及解决方案 Python3操作MySQL8.XX创建表|CRUD基本操作 Python3操作SQLite3创建表主键自增长|CRUD基本操作 anac…

ESLint自动修复代码规范错误

基于 vscode 插件 ESLint 高亮错误&#xff0c;并通过配置 自动 帮助我们修复错误 在设置中 settings.json添加这段代码就自动修复错误 // 当保存的时候&#xff0c;eslint自动帮我们修复错误 "editor.codeActionsOnSave": { "source.fixAll": true }, /…

Ubuntu安装samba服务器

为了window系统下能够像访问本地目录一样访问ubuntu系统下的目录&#xff0c;这里我通过安装samba服务器&#xff0c;将ubuntu系统的文件目录通过网络挂载的方式共享出来&#xff0c;以便在window下就能够对ubuntu系统的文件进行读写等访问操作&#xff0c;这里记录一下samba服…

嵌入式技术面试基本规则

潜规则1&#xff1a;面试的本质不是考试&#xff0c;而是告诉面试官你会做什么 经验不够的小伙伴特别容易犯的一个错误&#xff0c;不清楚面试官到底想问什么&#xff0c;其实整个面试中面试官并没有想难倒你的意思&#xff0c;只是想通过提问的方式来知道你会什么。 比如stm…

thinkphp5实现ajax图片上传,压缩保存到服务器

<div class"warp"><input type"file" id"file" accept"image/*" onchange"upimg(this)" /></div> <img src"" /> <script>//上传图片方法function upimg(obj){var fileData obj.…

HTTP的请求方法,空行,body,介绍请求报头的内部以及粘包问题

目录 一、GET与POST简介 二、空行和body 三、初识请求报头以及粘包问题 四、认识请求报头剩余部分 一、GET与POST简介 GET https://www.sogou.com/HTTP/1.1 请求报文中的方法&#xff0c;是最常规的方法&#xff08;获取资源&#xff09; POST&#xff1a;传输实体主体的方法…

插入排序:简单而有效的排序方法

在计算机科学中&#xff0c;排序算法是一个重要且常见的主题&#xff0c;它们用于对数据进行有序排列。插入排序&#xff08;Insertion Sort&#xff09;是其中一个简单但有效的排序算法。本文将详细解释插入排序的原理和步骤&#xff0c;并提供Java语言的实现示例。 插入排序的…

systrace/perfetto抓取方式分享

背景 近来有一些同学反馈性能分析&#xff0c;现在大部分都是其实已经开始使用perfetto了&#xff0c;连sdk上都已经找不到哦systrace相关工具&#xff0c;让马哥可以分享一些这个相关内容&#xff0c;其实以前企业里面那时候大部分都是使用老版本systrace的&#xff0c;相比新…

sheng的学习笔记-【中文】【吴恩达课后测验】Course 1 - 神经网络和深度学习 - 第二周测验

课程1_第2周_测验题 目录&#xff1a;目录 第一题 1.神经元计算什么&#xff1f; A. 【  】神经元计算激活函数后&#xff0c;再计算线性函数&#xff08;zWxb&#xff09; B. 【  】神经元计算一个线性函数&#xff08;zWxb&#xff09;&#xff0c;然后接一个激活函数…