vue 自定义指令

时间: 2019-03-13阅读: 382标签: vue

在Vue中有很多指令,以v-开头的命令作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为。

<span v-if="yes">yes的时候显示出来</span>

但有一些是没有相对应的指令进行操作。在这里以progress(h5的新标签进度条)为例,向大家介绍Vue的一个用于指令扩展的方法:directive(自定义指令)。

语法如下:

Vue.directive(id, definition)

传入的两个参数,id是指指令ID,definition是指定义对象。其中,定义对象可以提供一些钩子函数。


钩子函数

钩子函数  描述
bind      只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。  
inserted     被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)
update被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新
componentUpdated被绑定元素所在模板完成一次更新周期时调用
unbind只调用一次,指令与元素解绑时使用

 

 

 

 

 

 

 接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。


钩子函数参数

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

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


api详解

1.首先创建一个指令自定义对象directObj。
 
 let directObj = {}.
 
 2.vue为所有指令的钩子函数都提供一些函数参数。
    
 let args = {
  el:'指令所绑定的元素,可以用来直接操作 DOM ',
  binding:{
   name:'指令名,不包括 v- 前缀。',
   value:'指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。',
   oldValue:'指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。',
   expression:"字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"",
   arg:"传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"",
   modifiers:"一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。",
   vnode:"Vue 编译生成的虚拟节点。",
   oldVnode:"上一个虚拟节点"
  }
 }
 
 3.在directObj上可根据需要定义一些钩子函数
 
 directObj.bind = function({...args }){
 
     //只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
 } 
 
 directObj.inserted= function({...args }){
 
     //被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
 } 

 directObj.update= function({...args }){
 
     //所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。
     指令的值可能发生了改变,也可能没有。 
     但是你可以通过比较更新前后的值来忽略不必要的模板更新 
 }

 directObj.componentUpdated= function({...args }){
 
     //指令所在组件的 VNode 及其子 VNode 全部更新后调用。
 }
 
 directObj.unbind= function({...args }){
 
     //只调用一次,指令与元素解绑时调用。
 }

 4.注册自定义指令
  (1).全局注册:
  
      Vue.directive('指令名称','指令对象');
      例:Vue.directive('reclick',directObj);
      注意:全局注册自定义指令需在实例化Vue之前.
    
  (2).局部(组件)注册:
  
      export default{ 
       directives:{
         '指令名称':'指令配置'
       }
      }
      
      例:
      
        export default{ 
       directives:{
         'reclick':directObj
       }
      }


封装自定义指令

;(function() {
  /**
   * 函数防抖
   *
   * @param {any} method 方法名
   */
  function debounce(method) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function() {
      method.call();
    }, 200);
  }
  /**
   * 事件绑定
   *
   * @param {any} element  绑定dom
   * @param {any} event    事件类型
   * @param {any} listener 方法
   */
  function addEvent(element, event, listener) {
    if (element.addEventListener) {
      element.addEventListener(event, listener, false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + event, listener);
    } else {
      element['on' + event] = listener;
    }
  }
  var vueReclick = {};
  var reclick = {
    bind: function(el, binding) {
      addEvent(el, 'click', function() {
        debounce(binding.value);
      });
    },
    unbind: function(el) {
      addEvent(el, 'click', function() {});
    }
  };

  vueReclick.install = function(Vue) {
    Vue.directive('reclick', reclick);
  };

  if (typeof exports == 'object') {
    module.exports = vueReclick;
  } else if (typeof define == 'function' && define.amd) {
    define([], function() {
      return vueReclick;
    });
  } else if (window.Vue) {
    window.vueReclick = vueReclick;
    Vue.use(vueReclick);
  }
})();
1.将所有代码包裹在一个立即执行函数之中.

  立即执行函数有自己的作用域,可以避免变量冲突与污染.    
  
  将独立的功能封装在自包含模块中.  

2.vue-reclick功能相关的代码这里简单说明下.

  这里封装了两个方法(1.throttle,2.addEvent)
    
  一个指令配置对象(reclick)

  在reclick对象里定义了bind方法,在指令绑定到dom的时候,在dom上绑定点击事件,并获取指令绑定的方法名称.
  在触发点击事件的时候通过函数节流的方法来调用该方法,从而解决短时间快速点击触发多次方法的问题.
    
  在reclick对象里定义了unbind方法,在指令与dom解绑的时候,将传入方法与dom进行解绑..

3.定义一个vueReclick插件对象,并在该对象上定义一个install方法.

(Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器)

4.在install方法里全局注册指令

 vueReclick.install = function(Vue) {
    Vue.directive('reclick', reclick);
 };
 
5.兼容多种模块规范暴露该插件

  if (typeof exports == 'object') {
    module.exports = vueReclick;
  } else if (typeof define == 'function' && define.amd) {
    define([], function() {
      return vueReclick;
    });
  } else if (window.Vue) {
    window.vueReclick = vueReclick;
    Vue.use(vueReclick);
  }

6.到这一步,其实一个简单的自定义组件就已经大功告成了.

7.最后.我们来讲一下如何在项目中引入vueReclick并使用.

  (1).非node环境中
      
    在第5点我们在else if(window.Vue)中其实已经Vue的全局方法来使用该插件.
    所以我们可以直接在项目中使用该指令.
    例:https://github.com/webfansplz/vue-reclick/blob/master/example/index.html

  (2).node环境中

    我们可以在项目入口文件中引入该插件,然后全局使用它,下面我们会讲解如何将插件发布到Npm.
    例:
    import vueReclick from 'vue-reclick';
    Vue.use(vueReclick);



链接: http://www.fly63.com/article/detial/2348

Vue最佳实践

Vue 最佳实践,是参考 Vue 官方风格指南并根据过去 Vue 实际项目开发中的经验总结的一套规范建议。本项目的目的是希望每个 Vue 开发者都能尽快熟悉并上手项目代码,志在帮助 Vue 新手开发者及时避免一些不规范的设计和由此而引发的问题

vue知识点总汇

keep-alive它是vue的内置组件在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:

vue中使用v-for时为什么不能用index作为key?

Vue 和 React 都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。Vue 和 React 的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设

vue.extend拓展

Vue.extend返回的是一个“拓展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时

Vue基于snabbdom做了哪些事

Snabbdom 核心代码大约只有 200 行。它提供了模块化架构,具有丰富的功能,可通过自定义模块进行扩展。在了解核心 patch 前,需要先了解 snabbdom 的模块化架构思想。

尤雨溪:Vue Function-based API RFC【转】

将 2.x 中与组件逻辑相关的选项以 API 函数的形式重新设计。组件 API 设计所面对的核心问题之一就是如何组织逻辑,以及如何在多个组件之间抽取和复用逻辑。

vue中修改Modal的重置功能怎么写?

工作中遇到弹出模态框形式的修改功能,模态框里面是Form表单,Form表单中的内容是从后台获取的,这时候用户修改完没有提交,而是想重置然后重新修改,怎么办呢?

详细分析Vue.nextTick()实现

刚开始接触Vue的时候,哇nextTick好强,咋就在这里面写就是dom更新之后,当时连什么macrotask、microtask都不知道(如果你也不是很清楚,推荐点这里去看一下,也有助于你更好地理解本文),再后来,写的多了看得多了愈发膨胀了,就想看看这个nextTick到底是咋实现的

vue混入

混入是一种分发Vue组件中可复用功能非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。

Vue基础之计算属性

设想一个场景,你需要得到一个复杂运算/逻辑的返回值,利用模板内的表达又过长且难以阅读和维护,这时计算属性就可以很好的解决你的问题。看下面的例子:

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全