这次分享的是关于Vue自定义指令的使用方法,学习完基础后我们再来实战完成一个下拉列表,废话不多说,直接上干货
基本用法
//全局注册 Vue.directive('my-directive', { // 指令选项 }) // 局部注册 var app = new Vue({ el: '#app' directives: { 'my-directive': { // 指令选项 } })
相信对Vue比较熟悉的人看完都知道,directive的写法与组件 基本类似,只是方法名由component改为了directive。上例只是注册了自定义指令v-my-directive,还没实现具体功能,下面具体介绍 自定义指令的各个选项。
指令定义函数提供了几个钩子函数 (可选):
可根据需求在不同的钩子函数 内完成逻辑代码,如下面v-focus,我们希望在元素插入父节点时就调用,那用到的最好的就是inserted了。示例代码如下
// html部分 <div id="app" v-focus> // js部分 Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } })
效果如下图所示
自定义指令 v-focus.png
可以看到,打开这个页面,input输入框就自动获取焦点了,成为可输入状态。
每个钩子函数 都可以有几个参数可用,比如我们上面用到了el。它们 的含义如下:
下面是结合了以上参数 的一些具体示例,代码如下
// HTML部分 <div id="app" v-demo:msg.a.b="message"> <div v-text:msg.a.b="message"></div> </div> // JS部分 Vue.directive('demo', { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + binding.name + '<br>' + 'value: ' + binding.value + '<br>' + 'expression: ' + binding.expression + '<br>' + 'argument: ' + binding.arg + '<br>' + 'modifiers: ' + JSON.stringify(binding.modifiers).modifiers + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(',') } }) new Vue({ el: '#app', data: { message: 'some text' } })
执行后,<div>的内容会使用innerHTML重置,结果为
name: "test" value: "some text" expression: "message" argument: "msg" modifiers: {"a":true,"b":true} vnode keys: tag, data, children, text, elm, ns, context, functionalContext, functionalOptions, functionalScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder
在多数使用场景,我们会在bind钩子里绑定一些事件,比如在document上用addEventListerer绑定,在unbind里有
removeEventListener 解绑,比较典型的示例就是让这个元素随着鼠标拖拽。
如果需要更多个值,自定义指令也可以传入一个JavaScript对象字面量, 只要是合法类型的JavaScript表达式都是可以的。示例代码如下:
// HTML部分 <div id="app" v-demo:msg.a.b="message"> <div v-test="{msg: 'hello', name: 'Aresn'}"></div> </div> //JS部分 Vue.directive('test', { bind: function (el, binding, vnode) { console.log(binding.value.msg) console.log(binding.value.name) } }) var app = new Vue({ el: '#app' })
Vue 2.x很移除大量Vue 1.x自定义指令的配置。在使用自定义指令时,应该充分解业务需求,因为很多时候你需要的可能并不是自定义指令,而是组件。
基础的东西讲完了,我们来根据directive提供的API来写一个点击外部区域可以让其下拉列表消失的菜单
// HTML部分 <div id="app" v-clock> <div class="main" v-clickoutside="handleClose"> <button @click="show = !show">点击显示下拉菜单</button> <div class="dropdown" v-show="show"> <p>下拉框内容,点击外面区域可以关闭</p> </div> </div> // JS部分 var app = new Vue({ el: '#app', data: { show: false }, methods: { handleClose() { this.show = false; } } }) Vue.directive('clickoutside', { bind: function(el, binding, vode) { function documentHandler (e) { if (el.contains(e.target)) { return false } if (binding.expression) { binding.value(e) } } el.__vueClickOutSide__ = documentHandler document.addEventListener('click', documentHandler) }, unbind: function(el, binding) { document.removeEventListener('click', el.__vueClickOutSide__) delete el.__vueClickOutSide__ } })
要在document上绑定click事件,所以在bind钩子内声明了一个函数documentHandler,并将它作为句柄定在document的click事件上。documentHandler函数做了两个判断,第一个是判断点击的区域是否是指令所在的元素内部,如果是,就跑出函数,不信下继续执行
contains方法是用来判断元素A是否包含了元素 B,包含返回true,不包含返回false
// HTML <div id="parent"> 父元素 <div id="children">子元素</div> </div> // JS var a = doucment.getElemengById('parent') var b = doucment.getElemengById('children') console.log(A.contains(B)) // true console.log(B.contains(A)) // false
第二个判断是当前 的指令v-clickoutside有没有写表达式,在该自定义指令中,表达 式应该是第一个函数 ,在过滤了内部元素后,点击外面任何区域应该招待用户表达 式中的函数 ,所以binding.value就用来执行上下文methods中指定的函数的
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍使用Vue自定义指令实现Select组件,包括了使用Vue自定义指令实现Select组件的使用技巧和注意事项,需要的朋友参考一下 本篇文章教大家写一个非常简单的Select组件,想必很多人都写过Select,毕竟它太常用了,但是本篇文章的示例使用到了Vue的自定义指令,如果你对Vue自定义指令不怎么熟悉的话,本篇文章或许会让您有所收获! 完成的效果图如下: 一、首先,我们简单布局
本文向大家介绍Vue实现自定义下拉菜单功能,包括了Vue实现自定义下拉菜单功能的使用技巧和注意事项,需要的朋友参考一下 先看例子,后面有对用到的知识点的总结 效果图: 实现代码如下: 考虑到一些朋友想要css代码,但避免css占据太多位置,所以此处将css压缩了,如果不需要看css的可以直接跳过哈 用到的知识点总结: 组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如
本文向大家介绍vue自定义指令directive实例详解,包括了vue自定义指令directive实例详解的使用技巧和注意事项,需要的朋友参考一下 下面给大家介绍vue自定义指令directive,具体内容如下所示: 官网截图实例 vue除了一些核心的内部定义的指令(v-model,v-if,v-for,v-show)外,vue也允许用户注册自己的一些功能性的指令,有时候你实在是要对Dom操作
关于我的上一个问题(bootstrap上的下拉菜单不起作用),我正在为li下拉菜单的子菜单构建一个子菜单。这意味着它是嵌套的。银行菜单下有交易下拉菜单,交易下拉菜单下有不同类型交易的菜单。顺便说一下,我已经成功地创建了它,但是在悬停期间,“事务”模块的子菜单出现在事务菜单的前面,阻止了作为事务的父菜单。在悬停期间,如何避免它并将其放置在事务菜单的右侧?不管怎样,我已经使用了“右下拉菜单”,但它不会
如何将自定义下拉/弹出菜单锚定到按钮? 我需要它像弹出菜单一样工作(锚定到视图),并在单击菜单中的某个项目时执行某些操作。 如何通过代码将项目添加到菜单中,保持菜单的高度,并使其可滚动,如果有超过5个项目。我不需要添加任何图像,只是文本。
本文向大家介绍Vue的土著指令和自定义指令实例详解,包括了Vue的土著指令和自定义指令实例详解的使用技巧和注意事项,需要的朋友参考一下 1.土著指令 当我开始学习Vue的时候,看官网的时候看到了“指令”两个字。我愣住了,what?指令是啥啊?后来继续往下看,像这种什么“v-for”“v-show”“v-if”都叫做指令。等到后来Vue玩的差不多了,开始写项目的时候发现,常见的指令也就那么几个,