详解Vue用自定义指令完成一个下拉菜单(select组件)


Posted in Javascript onOctober 31, 2017

这次分享的是关于Vue自定义指令的使用方法,学习完基础后我们再来实战完成一个下拉列表,废话不多说,直接上干货

基本用法

//全局注册
Vue.directive('my-directive', {
 // 指令选项
})

// 局部注册
var app = new Vue({
 el: '#app'
 directives: {
  'my-directive': {
    // 指令选项
  }
})

相信对Vue比较熟悉的人看完都知道,directive的写法与组件 基本类似,只是方法名由component改为了directive。上例只是注册了自定义指令v-my-directive,还没实现具体功能,下面具体介绍 自定义指令的各个选项。

指令定义函数提供了几个钩子函数 (可选):

  1. bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
  2. inserted:被绑定元素插入父节点时调用 (父节点存在即可调用,不必存在于 document 中)。
  3. update:所在组件的 VNode 更新时调用,但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
  4. componentUpdated:所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
  5. unbind:只调用一次,指令与元素解绑时调用。

可根据需求在不同的钩子函数 内完成逻辑代码,如下面v-focus,我们希望在元素插入父节点时就调用,那用到的最好的就是inserted了。示例代码如下

// html部分
<div id="app" v-focus>
// js部分
Vue.directive('focus', {
 // 当绑定元素插入到 DOM 中。
 inserted: function (el) {
  // 聚焦元素
  el.focus()
 }
})

效果如下图所示

详解Vue用自定义指令完成一个下拉菜单(select组件)

自定义指令 v-focus.png

可以看到,打开这个页面,input输入框就自动获取焦点了,成为可输入状态。

每个钩子函数 都可以有几个参数可用,比如我们上面用到了el。它们 的含义如下:

  1. el:指令所绑定的元素,可以用来直接操作 DOM 。
  2. binding:一个对象,包含以下属性:
    1. name:指令名,不包括 v-前缀。
    2. value:指令的绑定值,例如:v-my-directive="1 + 1", value 的值是 2。
    3. oldValue:指令绑定的前一个值,仅在 update和 componentUpdated钩子中可用。无论值是否改变都可用。
    4. expression:绑定值的字符串形式。例如 v-my-directive="1 + 1" ,expression 的值是 "1 + 1"。
    5. arg:传给指令的参数。例如 v-my-directive:foo,arg 的值是 "foo"。
    6. modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
  3. vnode:Vue 编译生成的虚拟节点,查阅 VNode API 了解更多详情。
  4. oldVnode:上一个虚拟节点,仅在 update和 componentUpdated钩子中可用。

下面是结合了以上参数 的一些具体示例,代码如下

// 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中指定的函数的

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 #Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 #Javascript
Vue实战之vue登录验证的实现代码
Oct 31 #Javascript
jQuery ajax读取本地json文件的实例
Oct 31 #jQuery
ES6解构赋值的功能与用途实例分析
Oct 31 #Javascript
js原生日历的实例(推荐)
Oct 31 #Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 #Javascript
You might like
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
php中的登陆login实例代码
2016/06/20 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
python实现线程池的方法
2015/06/30 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
python实现二维插值的三维显示
2018/12/17 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
班训口号大全
2014/06/18 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
python实现简单聊天功能
2021/07/07 Python
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS