指令-自定义全局指令让文本框获取焦点|学习笔记

简介: 快速学习指令-自定义全局指令让文本框获取焦点

开发者学堂课程【Vue.js 入门与实战指令-自定义全局指令让文本框获取焦点】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8151


指令-自定义全局指令让文本框获取焦点


目录

一、具体方法

二、定义指令

三、总结

 

一、具体方法

提供了两种方式自定修饰符

1.x中自定义键盘修饰符【了解即可】

Vue.directive('on’).keyCodes,f2 = 113;

2.x中自定义键盘修饰符

通过Vue config,keycodes.名称=按键值来自定义案件修饰符的别名:

Vue.config.keycodes.f2=113;

使用自定义的按健饰符

第一种方法已经不适用,所以主要学习第二种方法。

让文本框获取焦点的方法:

可以使用 focus ,只需要获取到 DOM 元素,有一个 js 原生方法为:.focus

演示:

<input type=”text”class =”form-control”v-model=”keywords”id=”search”>Document.getElementById(“search”).focus

在 vis code ”.”出的淡蓝色的长方体图标表示属性,紫色的立方体图标表示方法。

如下图所示:

image.png

.Focus 是一个方法,可以使文本框获得焦点,但是 vue 不提倡这样的做法,所以要通过自定义指令来获取焦点。

@keyup,v-model 等都属于自定义指令,它们都是由 vue 提供的内置指令。

 

二、定义指令

<input type=”text”class =”form-control”v-model=”keywords”id=”search”v-focus>

给文本框加上 v-focus 属性,刷新页面,文本框就会获得焦点。

但是Vue 未提供这个指令,所以需要自己定义。

注意:

Vue中所有的指令,在调用时,都必须以 v- 开头。

 Vue.directive(‘focus’,{})//全局的过滤器不加S,私有过滤器加S,这里是全局的过滤器,不需要带 s。

使用 Vue.directive ()定义全局的指令 v-focus

其中:参数1为指令的名称,注意:在定义时,指令的名称前面,不需要加v-前缀,但是,在调用时,必须在指令名称前加上 v-前缀进行调用。

参数2是一个对象,这个对象上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作。

其中包括:

l bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

l Inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)

l update:所在组件的 VNode 更新时调用,但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。可以通过比较更新前后的值来忽略不必要的模板更新

  •  oonentUpdated:所在组件的VNode及其孩子的VNode全部更新时调用。
  •  unbind :只调用一次,指令与元素解绑时调用。

bind:function(el)//每当指令绑定到元素上时,会立即执行这个bind 函数,只执行一次。因为一个指令交给一个元素绑定只能绑定一次,所以只执行一次。

bind 中只要把指令交给元素,就会立即执行。el 参数表示把指令绑定给哪个元素,el就是那个元素。

注意:

在每个函数中,第一个参数,永远是 e1,表示被绑定了指令的元素,e1 参数是一个原生的 Js 对象,就是一个 DOM 对象。以上通过 focus 指令通过 v- 的形式应用给 input 。

el 就代表 input 的原生的一个 js 对象,input 有.focus 方法。把指令绑定给文本框就会立即调用 bind 。

再使 el 调用 focus 获取焦点是失败的,原因是执行时机不对,bind 的执行时机是指令绑定到元素上时,会立即执行,此时元素还未插入到 DOM 中去。

如果一个文本框或者超链接要显示就必须经过浏览器的渲染解析。解析好的元素先放入内存中的 DOM 树中,如果没有放到 DOM 树中,就只属于内存中,不能获取焦点。

只有放在页面上才能获取焦点。在 bind 中,元素刚绑定了指令,还没有插入到 DOM 中,这时,调用 focus 方法没有作用。因为一个元素只有插入 DOM 之后,才能获取焦点。

} inserted:function(el)el.focus()//inserted 表示元素插入到 DOM 中时,会执行 insezted 函数【触发1次】。

Focus 的特点是,如果获取焦点,元素必须插入到 DOM 中。在这三个事件中,只有 inserted 执行完后,元素才被插入 Dom 中。

 }Updated:function(el)el.focus()//当 VNode 更新时,会执行 updated ,可能会触发多次。 }<input type = “text”class=”form-control”v-model=”keywords”i=”search”v-focus>

演示效果:

image.png


三、总结

通过 Vue.directive ()定义全局的指令,参数1为指令的名称,不需要加v-前缀,在调用时,必须在指令名称前 加上 v-前缀进行调用。

参数2是一个对象,这个对象上,有三个比较主要的方法,bind inserted 和 updated,它们的第一个参数一直都是被绑定指令的元素,是一个原生的 js DOM 对象。

在每一个函数内部可以执行相关的方法操纵 DOM 元素。

三个函数的不同:

执行时期不一样,bind 是指令绑定给元素就立即执行,此时,元素还未插入到 DOM 中,inserted 是元素插入到 DOM 中会执行updated 是当 DOM 节点更新时,立即执行

相关文章
|
缓存 网络协议 Linux
计算机网络——Wireshark软件使用与协议分析(ARP协议、IP与ICMP分析)
Wireshark软件使用与协议分析 ARP协议分析 使用 Wireshark 抓取局域网的数据包并进行分析: 1. 学习 Wireshark 基本操作:重点掌握捕获过滤器和显示过滤器。 2. 观察 MAC 地址:了解 MAC 地址的组成,辨识 MAC 地址类型。 3. 分析以太网帧结构:观察以太网帧的首部和尾部,了解数据封装成帧的原理。 4. 分析 ARP 协议:抓取 ARP 请求和应答报文,分析其工作过程。 IP与ICMP分析 启动 Wireshark,捕捉网络命令执行过程中本机接受和发送的数据报。
2523 0
计算机网络——Wireshark软件使用与协议分析(ARP协议、IP与ICMP分析)
|
算法 搜索推荐 安全
来自一线技术人的经验分享|如何写出让人眼前一亮的述职报告
本文作者从亲身经验阐述了一线技术人为什么述职、怎么述职以及述职的重要性。每年述职都是一大关,作者把自己的一些经验教训通过文字分享给大家,希望能帮助到更多的人。
37766 14
来自一线技术人的经验分享|如何写出让人眼前一亮的述职报告
|
SQL 存储 数据管理
Hadoop-15-Hive 元数据管理与存储 Metadata 内嵌模式 本地模式 远程模式 集群规划配置 启动服务 3节点云服务器实测
Hadoop-15-Hive 元数据管理与存储 Metadata 内嵌模式 本地模式 远程模式 集群规划配置 启动服务 3节点云服务器实测
186 2
使用libvirt创建快照时提示权限不足
使用libvirt创建快照时提示权限不足
使用libvirt创建快照时提示权限不足
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的大学生创新创业平台竞赛管理子系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的大学生创新创业平台竞赛管理子系统的详细设计和实现(源码+lw+部署文档+讲解等)
156 1
|
机器学习/深度学习 算法 数据挖掘
社交网络分析7:社交网络舆情分析 、 社交网络舆情演化传播建模 、 社交网络舆情用户研究 意见领袖识别 情感分析 、结构洞 、 生命周期 、 舆情分析 知识图谱 主题图谱 、 异质平均场
社交网络分析7:社交网络舆情分析 、 社交网络舆情演化传播建模 、 社交网络舆情用户研究 意见领袖识别 情感分析 、结构洞 、 生命周期 、 舆情分析 知识图谱 主题图谱 、 异质平均场
1329 0
|
机器人 计算机视觉
智能视觉在医疗行业的应用
智能视觉在医疗行业的应用
284 0
|
存储 缓存 移动开发
HTML5 的离线储存怎么使用,工作原理
HTML5 的离线储存怎么使用,工作原理
|
前端开发 Java 应用服务中间件
Servlet 目录(pom.xml内容) 和 打包的两种方法
Servlet 目录(pom.xml内容) 和 打包的两种方法
254 0
Servlet 目录(pom.xml内容) 和 打包的两种方法
|
XML JSON 程序员
JSON的功能
JSON的功能
263 0