摘要:指令绑定的前一个值,仅在和钩子中可用。字符串形式的指令表达式。上一个虚拟节点在上可根据需要定义一些钩子函数只调用一次,指令第一次绑定到元素时调用。指令的值可能发生了改变,也可能没有。
前文
先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是就想说自己封装一个 自定义指令来解决这个问题,于是便有了自己的第一个vue自定义指令 vue-reclick .
vue-reclick 传送门
哈哈,好了!广告打完了,开始进入正题(等一下,听说star有奖哦)...
1.使用场景在vue 2.0中,有的情况下,你需要对普通DOM元素进行底层操作,这时候就需要用到自定义指令!2.api详解
其实关于vue自定义指令的使用 vue官方文档已经说的非常清楚.这里只是简单的照搬,哦不,讲一下 (23333..)..
1.首先创建一个指令自定义对象directObj。 let directObj = {}. 2.vue为所有指令的钩子函数都提供一些函数参数。 let args = { el:"指令所绑定的元素,可以用来直接操作 DOM ", binding:{ name:"指令名,不包括 v- 前缀。", value:"指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。", oldValue:"指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。", expression:"字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"", arg:"传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"", modifiers:"一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。", vnode:"Vue 编译生成的虚拟节点。", oldVnode:"上一个虚拟节点" } } 3.在directObj上可根据需要定义一些钩子函数 directObj.bind = function({...args }){ //只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 } directObj.inserted= function({...args }){ //被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 } directObj.update= function({...args }){ //所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。 指令的值可能发生了改变,也可能没有。 但是你可以通过比较更新前后的值来忽略不必要的模板更新 } directObj.componentUpdated= function({...args }){ //指令所在组件的 VNode 及其子 VNode 全部更新后调用。 } directObj.unbind= function({...args }){ //只调用一次,指令与元素解绑时调用。 } 4.注册自定义指令 (1).全局注册: Vue.directive("指令名称","指令对象"); 例:Vue.directive("reclick",directObj); 注意:全局注册自定义指令需在实例化Vue之前. (2).局部(组件)注册: export default{ directives:{ "指令名称":"指令配置" } } 例: export default{ directives:{ "reclick":directObj } }3.封装自定义指令
好了,简单的讲(抄)完 自定义指令相关的api,接下来我们通过vue-reclick来简单的讲解一下如何封装一个vue自定义指令吧. 由于vue-reclick 只是用来解决一个问题的小东西,所以代码也相对简单,这里主要讲一个封装自定义指令的过程. 下面我们先来看下vue-reclick的源码:
;(function() { /** * 函数防抖 * * @param {any} method 方法名 */ function debounce(method) { clearTimeout(method.tId); method.tId = setTimeout(function() { method.call(); }, 200); } /** * 事件绑定 * * @param {any} element 绑定dom * @param {any} event 事件类型 * @param {any} listener 方法 */ function addEvent(element, event, listener) { if (element.addEventListener) { element.addEventListener(event, listener, false); } else if (element.attachEvent) { element.attachEvent("on" + event, listener); } else { element["on" + event] = listener; } } var vueReclick = {}; var reclick = { bind: function(el, binding) { addEvent(el, "click", function() { debounce(binding.value); }); }, unbind: function(el) { addEvent(el, "click", function() {}); } }; vueReclick.install = function(Vue) { Vue.directive("reclick", reclick); }; if (typeof exports == "object") { module.exports = vueReclick; } else if (typeof define == "function" && define.amd) { define([], function() { return vueReclick; }); } else if (window.Vue) { window.vueReclick = vueReclick; Vue.use(vueReclick); } })();
1.将所有代码包裹在一个立即执行函数之中. 立即执行函数有自己的作用域,可以避免变量冲突与污染. 将独立的功能封装在自包含模块中. 2.vue-reclick功能相关的代码这里简单说明下. 这里封装了两个方法(1.throttle,2.addEvent) 一个指令配置对象(reclick) 在reclick对象里定义了bind方法,在指令绑定到dom的时候,在dom上绑定点击事件,并获取指令绑定的方法名称. 在触发点击事件的时候通过函数节流的方法来调用该方法,从而解决短时间快速点击触发多次方法的问题. 在reclick对象里定义了unbind方法,在指令与dom解绑的时候,将传入方法与dom进行解绑.. 3.定义一个vueReclick插件对象,并在该对象上定义一个install方法. (Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器) 4.在install方法里全局注册指令 vueReclick.install = function(Vue) { Vue.directive("reclick", reclick); }; 5.兼容多种模块规范暴露该插件 if (typeof exports == "object") { module.exports = vueReclick; } else if (typeof define == "function" && define.amd) { define([], function() { return vueReclick; }); } else if (window.Vue) { window.vueReclick = vueReclick; Vue.use(vueReclick); } 6.到这一步,其实一个简单的自定义组件就已经大功告成了. 7.最后.我们来讲一下如何在项目中引入vueReclick并使用. (1).非node环境中 在第5点我们在else if(window.Vue)中其实已经Vue的全局方法来使用该插件. 所以我们可以直接在项目中使用该指令. 例:https://github.com/webfansplz/vue-reclick/blob/master/example/index.html (2).node环境中 我们可以在项目入口文件中引入该插件,然后全局使用它,下面我们会讲解如何将插件发布到Npm. 例: import vueReclick from "vue-reclick"; Vue.use(vueReclick);4.将封装好的插件发布到npm.
1.在Npm官网注册一个账号 2.在项目目录下 使用npm login 登录. 3.在项目目录下 使用npm publish 上传插件 4.大功告成,这样以后我们在所有项目中就都可以使用npm install 来下载我们自己封装好的插件啦!.
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/90416.html
摘要:仿网易云音乐项目地址来源感谢让我能用喜欢的东西做一个属于自己的播放器源码地址不要脸的求哈哈哈项目预览端按切换手机调试模式效果更佳移动端可直接扫码技术栈文件结构构建服务和配置项目不同环境的配置项目目录项目入口文件项目配置文件静态资源生产目录 仿网易云音乐(webapp) 项目地址 (project address) api来源 感谢binaryify让我能用喜欢的东西做一个属于自己的...
摘要:在解析完其构造函数上的之后,需要把构造函数上的和实例化时传入的进行合并操作并生成一个新的。检查组件名称是否合法首先看传入的三个参数,,这三个参数分别代表的是该实例构造函数上的实例化时传入的实例本身。 前几篇文章中我们讲到了resolveConstructorOptions,它的主要功能是解析当前实例构造函数上的options,不太明白的同学们可以看本系列的前几篇文章。在解析完其构造函数...
摘要:前端面试题总结持续更新中是哪个组件的属性模块的组件。都提供合理的钩子函数,可以让开发者定制化地去处理需求。 前端面试题总结——VUE(持续更新中) 1.active-class是哪个组件的属性? vue-router模块的router-link组件。 2.嵌套路由怎么定义? 在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。 //引入两个组件 ...
摘要:组件是最强大的功能之一。组件可以扩展元素,封装可重用的代码。验证组件可以为指定验证要求。以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。实例如果你想在某个组件的根元素上监听一个原生事件。 组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用...
摘要:今天就来介绍一下如何利用的自定义指令来开发一个表单验证插件的过程。按照这种方式就能够使用自己开发的这个表单校验插件。这段时间在进行一个新项目的前期搭建,新项目框架采用vue-cli3和typescirpt搭建。因为项目比较轻量,所以基本没有使用额外的ui组件,有时候我们需要的一些基础组件我就直接自己开发了。今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过...
阅读 1133·2021-11-11 16:54
阅读 832·2021-10-19 11:44
阅读 1300·2021-09-22 15:18
阅读 2392·2019-08-29 16:26
阅读 2911·2019-08-29 13:57
阅读 3062·2019-08-26 13:32
阅读 1053·2019-08-26 11:58
阅读 2292·2019-08-26 10:37