【Vue.js 入门与实战】--指令-自定义全局指令让文本框获取焦点

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

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

 

目录

一、具体方法

二、定义指令

三、总结

 

 

一、具体方法

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


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

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

 

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

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

Vue.config.keycodes.f2=113;

使用自定义的按健修饰符:

<input type="text”v-model="name @keyup.f2="add">


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

 

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

可以使用 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是一个对象,这个对象上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作。

 

其中包括:

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


  • Inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document )
  • 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 节点更新时,就会立即执行。

相关文章
|
18天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
119 64
|
11天前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
6天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
6天前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
18天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
26 8
|
18天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
22天前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
26 2
|
2月前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
2月前
|
JavaScript API
vue3知识点:自定义hook函数
vue3知识点:自定义hook函数
28 2
|
2月前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
32 1