Vue.directive使用注意(小结)


Posted in Javascript onAugust 31, 2018

指令钩子函数会被传入以下参数:

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

具体事例

clickoutside.js

用途:clickoutside.js主要用于解决点解元素外的地方时执行函数  主要应用的常见有弹出层点击遮罩层是隐藏窗口,或者一些弹出层点击其他地方要消失的场景

v-clickoutside具体是怎么实现的

答:主要是通过在bind中定义函数 通过判断是否包含元素,执行binding.value函数

export default {
 /*
  @param el 指令所绑定的元素
  @param binding {Object} 
  @param vnode vue编译生成的虚拟节点
  */
 bind (el, binding, vnode) {
  const documentHandler = function(e) {  
   if(!vnode.context || el.contains(e.target)) {
    return false;
   }
   if (binding.expression) {
    binding.value(e)
   }
  }
 
   document.addEventListener('click', documentHandler)
 },
 update (el, binding) {
 
 },
 unbind(el) {
  document.removeEventListener('click', documentHandler);
 }
}

Vue.directive使用注意

首先,Vue.directive要在实例初始化之前,不然会报错,还有,定义的指令不支持驼峰式写法,也会报下面同样的错,虽然在源码中没有找到在哪里统一处理大小写,但是在有关directive的方法中捕捉到的指令命名统一变为小写,所以,还是用'-'或者'_'分割吧。

vue.js:491 [Vue warn]: Failed to resolve directive: xxx

然后,其定义方式有两种,一种是Vue.directive('xxx', function(el, bind, vNode){}),其中el为dom,vNode为vue的虚拟dom,bind为一较复杂对象,详情可见Vue-directive钩子函数中的参数的参数,还有一种,为

Vue.directive('my-directive', {
 bind: function () {},
 inserted: function () {},
 update: function () {},
 componentUpdated: function () {},
 unbind: function () {}
})

参数代表的含义,参见钩子函数描述

最后,要使用自定义的指令,只需在对用的元素中,加上'v-'的前缀形成类似于内部指令'v-if','v-text'的形式。

// Vue.directive
      Vue.directive('test_directive', function(el, bind, vNode){
        el.style.color = bind.value;
      });
      var app = new Vue({
        el: '#app',
        data: {
          num: 10,
          color: 'red'
        },
        methods: {
          add: function(){
            this.num++;
          }
        }
      });

当然,也可以将method中的方法加入,bind.value即为methods中的方法。

<div id="app">
      <div v-test_directive="changeColor">{{num}}</div>
      <button @click="add">增加</button>
    </div>

    <script type="text/javascript">
      // Vue.directive
      Vue.directive('test_directive', function(el, bind, vNode){
        el.style.color = bind.value();
      });
      var app = new Vue({
        el: '#app',
        data: {
          num: 10,
          color: 'red'
        },
        methods: {
          add: function(){
            this.num++;
          },
          changeColor: function(){
            return this.color;
          }
        }
      });

这种形式,可以模仿'v-once',并进行一定的复杂逻辑,但是想要完全达到'v-once',可能需要考虑Vue-directive的钩子函数各个周期。下面是固定num的值,使得add的方法无效。

<div id="app">
      <div v-test_directive="changeColor">{{num}}</div>
      <button @click="add">增加</button>
    </div>

    <script type="text/javascript">
      // Vue.directive
      Vue.directive('test_directive', function(el, bind, vNode){
        el.style.color = bind.value();
      });
      var app = new Vue({
        el: '#app',
        data: {
          num: 10,
          color: 'red'
        },
        methods: {
          add: function(){
            this.num++;
          },
          changeColor: function(){
            this.num = 20;

            return this.color;
          }
        }
      });

因为小生刚刚接触vue,所以,希望前辈能多加指点。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 跳转代码集合
Dec 03 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
详解vue.js的devtools安装
May 26 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
Vue自定义全局弹窗组件操作
Aug 11 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
解决angular2 获取到的数据无法实时更新的问题
Aug 31 #Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 #Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 #Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 #Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 #Javascript
Angular2之二级路由详解
Aug 31 #Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 #jQuery
You might like
基于mysql的bbs设计(四)
2006/10/09 PHP
php下载远程文件类(支持断点续传)
2008/11/14 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
Angular实现响应式表单
2017/08/04 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
RC4文件加密的python实现方法
2015/06/30 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
python数据封装json格式数据
2018/03/04 Python
python实现雨滴下落到地面效果
2018/06/21 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
django ajax发送post请求的两种方法
2020/01/05 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
如何使用PHP session
2015/04/21 面试题
Python里面如何拷贝一个对象
2014/02/17 面试题
文员岗位职责
2013/11/09 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
实习计划书范文
2015/01/16 职场文书
介绍信的写法
2015/01/31 职场文书
Win11 BitLocker 驱动器加密
2022/04/19 数码科技