详解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 相关文章推荐
用jQuery打造TabPanel效果代码
May 22 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
JavaScript实现点击图片换背景
Nov 20 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
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
简单的Python的curses库使用教程
2015/04/11 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
python实现简单遗传算法
2018/03/19 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
python中删除某个元素的方法解析
2019/11/05 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
大学毕业生求职自荐信
2014/02/20 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
python保存图片的四个常用方法
2022/02/28 Python
Redis入门基础常用操作命令整理
2022/06/01 Redis