vue学习(十七) 使用自定义指令 使文本框获得鼠标焦点
需求:当我们进入某个页面,页面中的第一个input会自动获得焦点 光标闪烁,代表可输入
<div id="app">
//v-focus 是自定义的
<input type="text" class="form-control" v-focus/>
</div> //script
<script>
//自定定义指令 v-focus
//使用 Vue.directive()定义全局指令
//其中 参数1 : 指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v- 前缀
//但是 在调用的时候,必须在指令名称前 加上 v- 前缀来进行调用
//参数2 :是一个对象,这个对象身上有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作
Vue.directive('focus',{
bind: function(el){//每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次
//注意 在每个函数中,第一个参数是el,表示被绑定了指令的那个元素,这个el是一个原生的JS对象,所以el有一些js的方法
//在元素 刚绑定了指令的时候,还没有插入到DOM中去,这时候调用focus方法没有作用,因为一个元素只有插入DOM之后才能获取焦点
el.focus()//这个方法不合适 虽然不报错 但是没效果,需要插入到DOM中
//和样式相关的操作,一般都可以在bind中执行
},
inserted: function(el){//元素插入到DOM中的时候,会执行inserted函数,触发一次
//和JS行为有关的操作,最好在inserted中去执行,防止js行为不生效
el.focus()
},
updated: function(){//当组件或VNode更新的时候会执行updated,可能会触发多次 }
})
//自定义一个私有的过滤器(局部)
var vm = new Vue({
el:'app',
data:{
msg:''
},
method:{},
filters:{//定义私有过滤器 过滤器有两个条件 过滤器名称和处理函数
}
})
</script>
可以查看官网介绍:https://cn.vuejs.org/v2/guide/custom-directive.html
vue学习(十七) 使用自定义指令 使文本框获得鼠标焦点的更多相关文章
- vue学习-day02(自定义指令,生命周期)
目录: 1.案例:品牌管理 2.Vue-devtools的两种安装方式 3.过滤器,自定义全局或私有过滤器 4.鼠标按键事件的修饰符 5.自定义全局指令:让文本框获取焦点 ...
- Vue基础进阶 之 自定义指令
自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...
- delphi 可以自定义边框的文本框TSkinNormalEdit思路(QQ2011风格)
需求: QQ我的资料中基本资料窗体中的文本框: 正常状态下,文本框只有一条看起来只有一个像素的边框,边框的颜色从上到下由深到浅的渐变,当鼠标定位到该文本框时,其边框会变粗,而且边框的颜色加亮显示 如下 ...
- JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点
今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, Jav ...
- html怎样可是使文本框内容不可修改
html怎样可是使文本框内容不可修改 <input type="text" readonly="readonly" onfocus="alert ...
- Flutter学习笔记(21)--TextField文本框组件和Card卡片组件
如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件 今天来学习下TextField文本框组件和Card卡片组件. 只要是应用程序就少不了交互,基本上 ...
- winform窗口打开后文本框的默认焦点设置
原文:http://blog.csdn.net/kongwei521/article/details/6871411 winform窗口打开后文本框的默认焦点设置,进入窗口后默认聚焦到某个文本框,两种 ...
- IE浏览器 下面的文本框,获得焦点后无法输入内容
今天遇到一个问题,在IE浏览器下面,我点击 按钮 弹出一个弹出层,里面有一个 文本编辑器和一个文本框,但是第二次弹出后,文本框和文本编辑器无法输入内容,在控制台用js代码测试 $(document) ...
- android启动activity文本框不获得焦点
在开发中,常常会碰到这种情况,打开一个activity后,第一个文本框自动获得焦点,同时会弹出软键盘输入框,这样很影响用户体验,现在来看解决方法. 我们先来看看为什么会出现上述情况,原因很简单,文本框 ...
随机推荐
- mysqldump: Got error: 1044: Access denied for user 'root'@'%' to database 'hhh' when using LOCK TABLES
错误原因:mysqldump 命令执行时,需要四种权限,分别是:select,show view,trigger,lock table.但是因为没有lock table的权限,导致上述错误发生. 修改 ...
- 【转载】张一鸣:为什么 BAT 挖不走我们的人才?
很多企业失败的时候,总说是政策的变化.市场的变化.消费者需求的变化.技术发展的变化等等,导致了失败,其实这都是瞎说,归根结底还是人的原因,都是因为你招的人不行.可见,人才对于一个企业的重要性. 互联网 ...
- 深入理解RocketMQ(九)---实战(代码)
一.批量发送消息 即多条消息放入List,一次发送,从而减少网络传输,提高效率 DefaultMQProducer producer = new DefaultMQProducer("bat ...
- JavaScript基础初始时期分支(018)
Init-Time Branching初始时期分支是一种用做优化的模式.如果某些条件在程序启动后就不再改变,那么我们就只需要在初始时期检查一次就可以了,而不是在每次 需要用到这些条件的时候都检查一次. ...
- 《UNIX环境高级编程》(APUE) 笔记第十一章 - 线程
11 - 线程 Github 地址 1. 线程概念 典型的 UNIX进程 可以看成只有一个 控制线程 :一个进程在某一时刻只能做一件事情.有了 多个控制线程 ,就可以把进程设计成在某一时刻能够做不止一 ...
- 扯淡 Spring BeanDefinition
相关文章 Spring 整体架构 编译Spring5.2.0源码 Spring-资源加载 Spring 容器的初始化 Spring-AliasRegistry Spring 获取单例流程(一) Spr ...
- 区间DP之凸多边形的三角剖分
题目 给定一具有N个顶点(从1到N编号)的凸多边形,每个顶点的权均已知.问如何把这个凸多边形划分成N-2个互不相交的三角形,使得这些三角形顶点的权的乘积之和最小? 输入 第一行 顶点数N(N<5 ...
- MVC + EFCore 项目实战 - 数仓管理系统3 - 完成整体样式风格配置
上次课程我们新建了管理员的模板页. 本次我们就完善这个模板页,顺便加入样式和一些基本的组件,配置好整个项目的UI风格. 一.引入 共用的css和js文件 后端库用nuget, 前端库用libman ...
- Linux多任务编程之一:任务、进程、线程(转)
来源:CSDN 作者:王文松 转自:Linux公社 Linux下多任务介绍 首先,先简单的介绍一下什么叫多任务系统?任务.进程.线程分别是什么?它们之间的区别是什么?,从而可以宏观的了解一下这三者 ...
- python爬虫中对含中文的url处理以 及 Python3—UnicodeEncodeError 'ascii' codec can't encode characters in position
在练习urllib操作中,遇到了url中含有中文字符的问题.比如http://dotamax.com/,看下源码的话,上方的搜索框的name=p,输入内容点击搜索以后,通过GET方法进行传递,比如我们 ...