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 相关文章推荐
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
解决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
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
遍历python字典几种方法总结(推荐)
2016/09/11 Python
详解使用python crontab设置linux定时任务
2016/12/08 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
python numpy数组复制使用实例解析
2020/01/10 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
Python如何读取、写入CSV数据
2020/07/28 Python
面向对象编程OOP的优点
2013/01/22 面试题
会计专业毕业生推荐信
2013/11/05 职场文书
支部鉴定材料
2014/06/02 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
初中生活随笔
2015/08/15 职场文书
学生安全责任协议书
2016/03/22 职场文书