用了Vue也一年多了,虽然对大部分内容都比较熟悉,但有些用法可能会起到意想不到的作用。

今天在做一个关于抽奖的需求,要求是每次点击编辑按钮显示编辑框,要求自动聚焦。

一开始想到了autofocus属性,结果发现每次只有刷新页面的第一次会生效,之后无论怎么点击都不能自动聚焦,于是网上查了很多资料,

最终问题指向了vue的指令,因此先回过头看看vue的指令部分。

vue指令

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:

当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})

如果想注册局部指令,组件中也接受一个 directives 的选项:

directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}

然后你可以在模板中任何元素上使用新的 v-focus 属性,如下:

<input v-focus>

好了,问题看似得到了解决。但在具体的项目中,我们在inserted中拿到的el可能不是input节点(比如直接使用了第三方组件库),这时就需要遍历el的childNode属性,获得我们

想要的input元素引用,从而调用focus方法。

至此,问题圆满解决。

Vue 回顾之指令(关于input自动聚焦的问题)的更多相关文章

  1. Vue自定义指令实现input限制输入正整数

    directive.js import Vue from 'vue' export default () => { Vue.directive('Int', { inserted: functi ...

  2. vue.js自定义指令入门

    Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...

  3. Vue Elementui 如何让输入框每次自动聚焦

    在项目优化中碰到一个小问题,在每次提示框显示的时候让提示框中的输入框聚焦.如下图.一般情况下提示框是隐藏的.点击了编辑才会弹出. 那么原生属性autofocus 只在模板加载完成时起作用,也就是说只有 ...

  4. Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  5. Vue(九) 自定义指令

    前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令 ...

  6. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  7. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

  8. vue怎么自定义指令??

    最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...

  9. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

随机推荐

  1. MySQL参数log_bin_trust_function_creators介绍-存储过程和复制

    MySQL的有个参数log_bin_trust_function_creators,官方文档对这个参数的介绍.解释如下所示: log_bin_trust_function_creators Comma ...

  2. sql server 如何查询出数据库作业所有者的信息并完成批量替换

    今天数据库对入职一年的我建立了独立的数据库账号,之前我是和其他同事共享的,之前的所有者账号被废弃了,这时导致很多数据库作业执行失败. 下面是说明如何把之前所有的作业的所有者替换成正在使用的账号: 下面 ...

  3. 变量计算——强制类型转换的js面试题

    console.log(1+"2"+"2"); console.log(1++"2"+"2"); console.log ...

  4. File类_深度遍历文件夹_练习

    遍历指定目录下的所有文件和文件夹 import java.io.File; public class FileTest { public static void main(String[] args) ...

  5. [USACO09JAN]安全出行Safe Travel

    题目 什么神仙题啊,我怎么只会\(dsu\)啊 我们考虑一个非常暴力的操作,我们利用\(dsu\ on \ tree\)把一棵子树内部的非树边都搞出来,用一个堆来存储 我们从堆顶开始暴力所有的边,如果 ...

  6. [Sdoi2010]古代猪文 (卢卡斯定理,欧拉函数)

    哇,这道题真的好好,让我这个菜鸡充分体会到卢卡斯和欧拉函数的强大! 先把题意抽象出来!就是计算这个东西. p=999911659是素数,p-1=2*3*4679*35617 所以:这样只要求出然后再快 ...

  7. day15 Python函数递归,轻易不要用递归,容易搞出来内存溢出

    古之欲明明德于天下者,先治其国:欲治其国者,先齐其家:欲齐其家者,先修其身:欲修其身者,先正其心:欲正其心者,先诚其意:欲诚其意者,先致其知,致知在格物.物格而后知至,知至而后意诚,意诚而后心正,心正 ...

  8. windows系统下Disconf web安装-分布式配置管理平台

    文章参考自 http://blog.csdn.net/syc001/article/details/78128117 https://www.cnblogs.com/mrluo735/p/632271 ...

  9. 基于SaaS的企业数据隐私保护平台

    导读 WireWheel成立于2016年,总部位于华盛顿,该公司致力于降低数据隐私保护合规能力建设的难度,帮助企业来应对复杂.严厉的法案.条例规定.2018年10月,公司获得了PSP Growth领投 ...

  10. docker官方文档笔记

    Docker在 CentOS7.X上运行.Docker可能在其他EL7的兼容版本中成功安装,但是官方并未进行测试,因此也不提供任何支持. 系统环境要求 docker必须运行在64-bit的系统上,对于 ...