Vue.directive()的用法和实例详解
时间:2019-04-13
本文章向大家介绍Vue.directive()的用法和实例详解,主要包括Vue.directive()的用法和实例详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
官网实例:
https://cn.vuejs.org/v2/api/#Vue-directive
https://cn.vuejs.org/v2/guide/custom-directive.html
指令定义函数提供了几个钩子函数(可选):
bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次, 指令与元素解绑时调用。
本人菜鸟型,看官网蒙圈,然后百度Vue.directive()
的实例和用法,有的很高深,有的不健全,我贴上两个简单的demo,希望对看到的朋友有帮助:
1、官网给出的demo,刷新页面input自动获取焦点:
<div id="app"> <SPAN style="WHITE-SPACE: pre"> </SPAN><input type="text" v-focus/> </div> <div id="app"> <input type="text" v-focus/> </div> // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el,binding) { <SPAN style="WHITE-SPACE: pre"> </SPAN>// 聚焦元素 <SPAN style="WHITE-SPACE: pre"> </SPAN>el.focus(); } }); new Vue({ el:'#app' }); // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el,binding) { // 聚焦元素 el.focus(); } }); new Vue({ el:'#app' });
2、一个拖拽的demo: 1)被拖拽的元素必须用position定位,才能被拖动;
2)自定义指令完成后需要实例化Vue,挂载元素;
3)inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
<style type="text/css"> .one,.two{ height:100px; width:100px; border:1px solid #000; position: absolute; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: -moz-none; cursor: pointer; } .two{ left:200px; } </style> <div id="app"> <div class="one" v-drag>拖拽one</div> <div class="two" v-drag>拖拽two</div> </div> <style type="text/css"> .one,.two{ height:100px; width:100px; border:1px solid #000; position: absolute; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: -moz-none; cursor: pointer; } .two{ left:200px; } </style> <div id="app"> <div class="one" v-drag>拖拽one</div> <div class="two" v-drag>拖拽two</div> </div> [javascript] view plain copy print?Vue.directive('drag', { inserted:function(el){ el.onmousedown=function(e){ let l=e.clientX-el.offsetLeft; let t=e.clientY-el.offsetTop; document.onmousemove=function(e){ el.style.left=e.clientX-l+'px'; el.style.top=e.clientY-t+'px'; }; el.onmouseup=function(){ document.onmousemove=null; el.onmouseup=null; } } } }) new Vue({ el:'#app' });
总结
以上所述是小编给大家介绍的Vue.directive()的用法和实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
- OpenShift企业版安装:单Master集群
- http线程池的设计与实现(c++)
- iOS崩溃堆栈符号化,定位问题分分钟搞定!
- Duang~ Android堆栈慘遭毁容?精神哥揭露毁容真相!
- Java学习笔记第一篇:坦克大战游戏
- 腾讯Bugly Unity3D Plugin使用指南
- 远丰集团旗下CMS疑有官方后门
- 前端黑魔法之远程控制地址栏
- 信息收集利器:ZoomEye
- go sync.Mutex 设计思想与演化过程 --转
- 漏洞预警 | Ubuntu 16.04版本存在本地提权漏洞(附EXP)
- 通过“震网三代”和Siemens PLC 0day漏洞,实现对工控系统的入侵实验
- 安卓端渗透工具DVHMA:自带漏洞的混合模式APP
- 小萝莉说Crash(二): Unrecognized selector xxx 之 ForwardInvocation
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 用 Wolfram 语言映射美国的山火
- Mathematica在中学数学教与学中的应用
- 总结一些ES不常用的filter
- 如何将炫酷的报表直接截图发送邮件——在Superset 0.37使用Schedule Email功能
- Kettle构建Hadoop ETL实践(五):数据抽取
- Kafka监控必备——Kafka-Eagle 2.0.2正式发布
- iOS Universal link 入门指南
- Flutter基础widgets教程-CupertinoAlertDialog篇
- Flutter基础widgets教程-cupertinoActivityIndicator篇
- Flutter基础widgets教程-Align篇
- 深入理解Linux内核进程上下文切换
- 面对疾风吧!io_uring 优化 nginx 实战演练
- 奇技淫巧:在 ssh 里面把服务器的文本复制到本地电脑
- 【计算机网络】学习笔记,第一篇:概述(谢希仁版)
- 【Objective-C】Objective-C语言的动态性