在写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. position的五个不同的位置值

    一.position: static  无定位 HTML 元素默认情况下的定位方式为 static(静态). 静态定位的元素不受 top.bottom.left 和 right 属性的影响. posi ...

  2. isnull与ifnull适用数据库

    根据业务流程去查询某个数据表的某个字段的最大值: 直接用的select max(code) from base_area; 大多数情况没有问题,有个特殊点:如果数据表里边没有数据,且返回类型时int时 ...

  3. 在Anaconda环境下安装Tensorflow

    安装Anaconda 下载Anaconda 个人版Individual Edition.如果下载速度慢,可以复制下载链接到迅雷或者在清华大学开源镜像站TUNA中找合适的版本. 注意在安装过程中的&qu ...

  4. java 从零开始手写 RPC (04) -序列化

    序列化 java 从零开始手写 RPC (01) 基于 socket 实现 java 从零开始手写 RPC (02)-netty4 实现客户端和服务端 java 从零开始手写 RPC (03) 如何实 ...

  5. 洛谷 P7541 DOBRA 题解

    hhh... 我又来写题解了 solution 题意简化 一个字符串,将所有的 _ 替换成大写字母,使结果字符串符合要求: 1.不包含三个连续 元音 或 辅音 字母: 2.字符串中至少有一个 L . ...

  6. 用C++实现的数独解题程序 SudokuSolver 2.2 及实例分析

    SudokuSolver 2.2 程序实现 根据 用C++实现的数独解题程序 SudokuSolver 2.1 及实例分析 里分析,对 2.1 版做了一些改进和尝试. CQuizDealer 类声明部 ...

  7. Java：AQS 小记-2(ReentrantLock)

    Java:AQS 小记-2(ReentrantLock) 整体结构 ReentrantLock 类图 AbstractOwnableSynchronizer 类 public abstract cla ...

  8. Java：ConcurrentHashMap类小记-2(JDK7)

    Java:ConcurrentHashMap类小记-2(JDK7) 对 Java 中的 ConcurrentHashMap类,做一个微不足道的小小小小记,分三篇博客: Java:ConcurrentH ...

  9. JavaAgent型内存马基础

    Java Instrumentation ​ java Instrumentation指的是可以用独立于应用程序之外的代理(agent)程序来监测和协助运行在JVM上的应用程序.这种监测和协助包括但不 ...

  10. UVA-1498 Activation

    UVA-1498 DP应该是肯定的,设 f [ i ] [ j ] 表示现在对中共有 i 人,Tomato在第 j 个,出现所求情况的概率,我们可以很(简单的)艰难的列出下列方程: f[i][1] = ...