在写vue项目的时候，我们经常需要对后台返回的数据进行大量的渲染操作，其中就包含了大量的对特殊数据的进一步处理，比如说时间戳、图片地址、特殊数据显示等等特殊数据处理改进。

其实遇到这种情况，通过Vue过滤器filter，或者给Vue下面原型方法里添加自定义方法都可以解决我们的问题，不过我们要说的是自定义指令，前面两种方式有他们好处，自定义指令也有自己独特的优点，比如说自定义指令自身就包含一系列生命周期钩子函数，能够在不同的生命周期函数中传递参数，添加修饰符等操作，因此自定义指令也能够处理更复杂的数据。

下面我们就来介绍一下自定义指令的简单实践，通过简单的例子，大家肯定能更进一步的了解自定义指令的使用。

1.首先我们要先了解一下自定义指令的基本结构，这里首先是全局定义一个自定义指令，这个自定义指令的名称是demo。

        Vue.directive('demo', { //自定义指令钩子函数

            bind: function() { //被绑定钩子函数

            },

            inserted: function() { //绑定到节点钩子函数

            },

            update: function() { //组件更新钩子函数

            },

            componentUpdated: function() { //组件更新完成钩子函数

            },

            unbind: function() { //解绑钩子函数

            }

        })

ps（转载自vue官网）：一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

  • unbind：只调用一次，指令与元素解绑时调用。

2.每个自定义指令的生命周期都可以接受一下以下参数，即 el、binding、vnode 和 oldVnode。

指令钩子函数会被传入以下参数（转载自vue官网）：

  • 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 钩子中可用

3.在了解了自定义指令的生命周期函数和函数参数之后，下面我们就来自己写一个自定义指令的例子来进一步了解自定义指令的用法。（我们来写一个格式化时间戳的自定义指令v-timeformat）

①首先我们先来写好html结构，以引入vue文件的形式来写这个例子，同时初始化vue实例对象。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <div id="app">

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <script>

        new Vue({

            el:'#app',

            data: function () {

                return {

                    timeStamp:1335562531231

                }

            },

            created: function () {

            }

        })

    </script>

</body>

</html>

②编写v-timeformat自定义指令。

        Vue.directive('timeformat', {

            bind: function (el, binding, vnode) {//这里只在bind生命周期函数中进行定义和操作，大家也可以在其他自定义指令的生命周期函数中尝试进行扩展和修改。

                function initTime(num){//判断数字是否大于10

                    return num < 10 ? '0'+num : num;

                }

                function checkTime(timeStamp){//格式化时间戳函数，大家也可以根据实际需求进行扩展和改写

                    var time = new Date(timeStamp);

                    var year = time.getFullYear();

                    var month = time.getMonth()+1;

                    var day = time.getDate();

                    var hour = time.getHours();

                    var minute = time.getMinutes();

                    var second = time.getSeconds();

                    if(binding.modifiers.small){//判断修饰符是否存在，存在即返回指定时间格式

                        return year+'-'+initTime(month)+'-'+initTime(day);

                    }else if(binding.modifiers.big){

                        return year+'-'+initTime(month)+'-'+initTime(day)+' '+initTime(hour)+':'+initTime(minute)+':'+initTime(second);

                    }else{　　　　　　　　　　　　　

                        return year+'-'+initTime(month)+'-'+initTime(day)+' '+initTime(hour)+':'+initTime(minute)+':'+initTime(second);　　　　　　　　　　　

　　　　　　　　　　　}

                }

                el.innerHTML = checkTime(binding.value);//格式化之后的时间信息插入到当前元素中

                binding.arg == '' ? el.style.color = '#333' : el.style.color = binding.arg;//通过传递参数来改变元素字体颜色                

            }

        })

③使用v-timeformat自定义指令。

ps：

  • 在使用自定义指令时要在我们定义的自定义指令名称前加v-。
  • 自定义指令和vue系统自带指令类似，可以通过传递参数来改变元素状态，这里传入orange表示把这个元素的字体颜色改成橙黄色
  • 这里紧跟在生命周期函数参数之后的是修饰符，传递不同的修饰符来选择要格式化的不同的时间戳的样式和格式。
<div v-timeformat:orange.small="timeStamp"></div>

总结一下：vue自定义指令虽然并不是很难，但是在实际开发过程中有些时候会被开发者忽略，其实在使用Vue的过程中，并不一定要指定使用某一种特定的数据处理方式方法，要根据项目需求，采用不同的合理方式来优化我们的代码和项目，方便我们更好的高效的进行工作。　　

亲，如果你觉得文章对你有帮助，就请点个赞吧^_^！

　　

　

　　

vue自定义指令实例使用（实例说明自定义指令的作用）的更多相关文章

  1. Vue.js 第2章 钩子函数&自定义指令&过滤器&计算属性&侦听器

    目标 钩子函数 自定义指令 自定义过滤器 计算属性 监听属性 局部自定义指令 为什么需要自定义指令 为了复用,为了代码的灵活 指令的分类:全局指令,局部指令 在vm外面创建的指令 通过Vue.dire ...

  2. [原]php远程odbc连接sqlsvr数据库，自定义端口，命名实例的连接方式

    远程odbc连接sqlsvr数据库,自定义端口,命名实例的连接方式,默认如果不修改的话sqlsvr的端口号是1433,默认实例名就是机器名,,如果既用了命名实例,又改了默认端口,改怎么连接数据库呢? ...

  3. Android中制作自定义dialog对话框的实例

    http://www.jb51.net/article/83319.htm   这篇文章主要介绍了Android中制作自定义dialog对话框的实例分享,安卓自带的Dialog显然不够用,因而我们要继 ...

  4. 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

  5. ASP.NET Core 6框架揭秘实例演示[28]：自定义一个服务器

    作为ASP.NET Core请求处理管道的"龙头"的服务器负责监听和接收请求并最终完成对请求的响应.它将原始的请求上下文描述为相应的特性(Feature),并以此将HttpCont ...

  6. 第一章、VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01

    目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...

  7. VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01

    目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...

  8. 转载 《AngularJS》5个实例详解Directive（指令）机制

    <AngularJS>5个实例详解Directive(指令)机制 大漠穷秋 本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请 ...

  9. 【前端】vue.js环境配置以及实例运行简明教程

    vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...

  10. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

随机推荐

  1. JVM-直接内存(Direct Memory)

    1.直接内存概述 直接内存不是虚拟机运行时数据区的一部分,也不是<Java虚拟机规范>中定义的内存区域. 直接内存是在Java堆外的,直接向系统申请的内存区间. 来源于NIO,通过存在堆中 ...

  2. Remote Sensing Images Semantic Segmentation with General Remote Sensing Vision Model via a Self-Supervised Contrastive Learning Method

    论文阅读: Remote Sensing Images Semantic Segmentation with General Remote Sensing Vision Model via a Sel ...

  3. iOS实现XMPP通讯（一）搭建Openfire

    安装Openfire Openfire官网下载地址:https://igniterealtime.org/downloads/ (也是Spark客户端的下载地址) Openfire下载并安装后,打开系 ...

  4. python自定义翻页配置

    1.创建pager.py文件,针对翻页进行函数书写 class PageInfo(object): # current_page 当前页数 # all_count 所有行 # per_page 每页的 ...

  5. 如何评估 Serverless 服务能力？这份报告给出了 40 条标准

    编者按:两年前,我们还在讨论什么是 Serverless,Serverless 如何落地.如今,已经有评测机构给出了 40 条标准来对 Serverless 的服务能力进行评估,这些评估细则既是技术生 ...

  6. 下载cnki硕博士论文的pdf版

    每找到一篇心仪的硕博士论文时,总是迫不及待下载到本地吧. 可是接下来你只能选择caj格式. caj界面都用过吧,没用过,你也不会来这. 我就想看pdf版本的,怎么办呢?有办法! 重点来了,敲黑板: 1 ...

  7. ORM框架查询数据库时返回指定的字段

    django model.objects.filter() 查询指定字段 1.model.objects.filter().values('field_name'),单个字段 2.model.obje ...

  8. vue.$set实现原理

    上源码: export function set (target: Array<any> | Object, key: any, val: any): any { if (process. ...

  9. （课内）信安数基RSA-基础&&解密加速

    RSA基本实现 首先获得N比特的伪随机数:使用Random库中内容. randint(n,m) 表示生成一个在n和m之间的随机数, **表示乘幂. getPrime找素数,or 1运算是一种优化:如果 ...

  10. 【数据结构与算法Python版学习笔记】树——平衡二叉搜索树（AVL树）

    定义 能够在key插入时一直保持平衡的二叉查找树: AVL树 利用AVL树实现ADT Map, 基本上与BST的实现相同,不同之处仅在于二叉树的生成与维护过程 平衡因子 AVL树的实现中, 需要对每个 ...