在写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. PHP的SPL扩展库（一）数据结构

    SPL 库也叫做 PHP 标准库,主要就是用于解决典型问题的一组接口或类的集合.这些典型问题包括什么呢?比如我们今天要讲的数据结构,还有一些设计模式的实现,就像我们之前讲过的观察者模式相关的接口在 S ...

  2. Python技法-序列拆分

    Python中的任何序列(可迭代的对象)都可以通过赋值操作进行拆分,包括但不限于元组.列表.字符串.文件.迭代器.生成器等. 元组拆分 元组拆分是最为常见的一种拆分,示例如下: p = (4, 5) ...

  3. 10.8 location

    创建一个前台站点 server { listen 80; server_name www.nginx.com; locaiton / { root /var/www/html/www; } } 创建一 ...

  4. bzoj2242，洛谷2485----SDOI2011计算器（exgcd,qsm,bsgs模板）

    就是一道模板题! 这里再强调一下 BSGS 考虑方程\(a^x = b \pmod p\) 已知a,b,p\((2 \le p\le 10^9)\),其中p为质数,求x的最小正整数解 解法: 注意到如 ...

  5. 分布式/微服务必配APM系统，SkyWalking让你不迷路

    前言 如今分布式.微服务盛行,面对拆分服务比较多的系统,如果线上出现异常,需要快速定位到异常服务节点,假如还用传统的方式排查肯定效率是极低的,因为服务之间的各种通信会让定位更加繁琐:所以就急需一个分布 ...

  6. AIbee 笔试

    CSS选择器 div+p 选择紧接在div元素之后的所有< p >元素 C++删除数组最后一个元素. 例如[1 2 3 4] 最后变为 [1 2 3] 用splice的删除,增加和替换 a ...

  7. 【转】对于编译程序时出现“Deprecated declaration ultrasonic_Init - give arg types”的解决办法

    编译程序时出现"Deprecated declaration ultrasonic_Init - give arg types"中文释义:给定函数的参数的类型过时, 解决办法: 在 ...

  8. Python小工具：据说这是搜索文件最快的工具！没有之一！一起感受下......

    电脑自带的搜索文件功能相信大家都体验过,那是真的慢,等它找到文件,我都打完一把游戏了! 那必须不能忍,于是我自己做了一个文件搜索工具,犄角旮旯的文件都能一秒钟搜索出来的那种! 保证能把你们男(女)朋友 ...

  9. k8s replicaset controller 分析（3）-expectations 机制分析

    replicaset controller分析 replicaset controller简介 replicaset controller是kube-controller-manager组件中众多控制 ...

  10. [对对子队]团队任务拆解Alpha

    Alpha阶段主要目标 完成游戏场景的基本实现(不要求美术资源) 完成游戏UI的基本实现(不要求美术资源) 制作第一部分的关卡(顺序语句,制作3-5关) 完成第一部分关卡和游戏基本逻辑的测试 任务分解 ...