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 相关文章推荐
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
JavaScript简单编程实例学习
Feb 14 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
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
3种vue路由传参的基本模式
2018/02/22 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
Python的设计模式编程入门指南
2015/04/02 Python
Python线性方程组求解运算示例
2018/01/17 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
应届生护士求职信
2013/11/01 职场文书
单位创先争优活动方案
2014/01/26 职场文书
就业协议书样本
2014/08/20 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
支行行长竞聘报告
2014/11/06 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书