在写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. 一款简单实用的串口通讯框架（SerialIo）

    前言 大龄程序员失业状态,前几天面试了一家与医疗设备为主的公司并录取:因该单位涉及串口通讯方面技术,自己曾做过通讯相关的一些项目,涉及Socket的较多,也使用SuperSocket做过一些项目,入职 ...

  2. JavaScript有同步任务和异步任务，浏览器是怎么处理的？

    1.在讨论浏览器与JavaScript之前,我们先来简单了解一下进程与线程 进程(process):资源分配的最小单位 进程是应用程序的执行实例,是操作系统进行资源分配和调度的一个独立单位. 线程(t ...

  3. Java秘诀！Java关系运算符介绍

    运算符丰富是 Java 语言的主要特点之一,它提供的运算符数量之多,在高级语言中是少见的. Java 语言中的运算符除了具有优先级之外,还有结合性的特点.当一个表达式中出现多种运算符时,执行的先后顺序 ...

  4. Java基础之（十三）：类与对象

    初识面向对象 面向对象 & 面向过程 面向过程思想 步骤清晰简单,第一步做什么,第二步做什么..... 面向过程适合处理一些较为简单的问题 面向对象思想 ​ 物以类聚,分类的思维模式,思考问题 ...

  5. 题解 Sue的小球/名次排序问题/方块消除/奥运物流

    Sue的小球 名次排序问题 方块消除 奥运物流 Sue的小球 题目大意 有 \(n\) 个小球在下落,初始位置 \((x_i,y_i)\),下落速度为 \(v_i\).你初始位置在 \(x_0\),速 ...

  6. shell关键字含义

    linux中shell变量$#,$@,$0,$1,$2的含义解释: 变量说明: $$ Shell本身的PID(ProcessID) $! Shell最后运行的后台Process的PID $? 最后运行 ...

  7. spring cloud中使用hystrix实现回退

    在微服务架构中,我们的服务被拆分成多个微服务,每个微服务完成自己的职责,微服务之间通过rpc或http进行调用.这个时候我们就要确保我们的服务高可用,但谁也说不准我们的服务能永远快速的提供服务.假如现 ...

  8. Noip模拟12 2021.7.12

    T1 interval 亏得昨天晚上改掉了T3并且理解了单调栈,今天一扫这题目就知道要用啥了. 先预处理出以a[i]为最大值的最大左右区间.然后再将a[i]取%!!!是的,要不然会影响单调栈的使用.. ...

  9. 关于qmake的install

    在pro的构建系统中可以设置INSTALLS变量,在make命令之后,执行make install命令触发,将想要的资源拷贝到相应的目录,参考qwt的构建体系,在qwt.pro末尾有这么几句 qwts ...

  10. linux shell 基本语法之快速上手shell编程

    从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来看,Shell是用户与Linux操作系统沟通的桥梁.用户既可以输入命令执行,又可以利用 Shell脚本编程,完成更加复杂的操 ...