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 相关文章推荐
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
js检测用户输入密码强度
Oct 22 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
用VsCode编辑TypeScript的实现方法
May 07 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
浅析Vue自定义组件的v-model
2017/11/26 Javascript
node内置调试方法总结
2018/02/22 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
python简单贪吃蛇开发
2019/01/28 Python
详解Python locals()的陷阱
2019/03/26 Python
python aiohttp的使用详解
2019/06/20 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
如何在django中实现分页功能
2020/04/22 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
介绍下Java的输入输出流
2014/01/22 面试题
仓库文员岗位职责
2014/04/06 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
php修改word的实例方法
2021/11/17 PHP
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python