除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

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

    <title>自定义指令</title>

    <meta name="description" content="">

    <meta name="keywords" content="">

</head>

<body>

    <p v-tack class='p'>

        I will now be tacked noto the page

        <input v-focus type='text'>

        <input v-border type='text'>

    </p>

</body>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<script type="text/javascript">

    // 自定义全局指令

    Vue.directive('border', {

        bind(el) {

            el.style.border = '1px red solid'

        }

    })

    new Vue({

        el: '.p',

        //自定义局部指令

        directives: {

            tack: {

                inserted(el) {

                    el.style.color = 'red'

                }

            },

            focus: {

                // 指令的定义

                inserted: function(el) {

                    el.focus()

                }

            }

        }

    })

</script>

</html>

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • 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 钩子中可用。

vue--directive自定义指令（不常用）的更多相关文章

  1. Vue.directive 自定义指令

    一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...

  2. Vue2.0 【第二季】第1节 Vue.directive自定义指令

    目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...

  3. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  4. Vue.directive 自定义指令的问题

    1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码. 2. <div id="example" v-change-by="myColor&q ...

  5. Vue.directive自定义指令

    Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...

  6. 最简单的方式理解Vue的自定义指令与混合

    vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...

  7. vue 通过自定义指令实现 置顶操作；

    项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令  ...

  8. Vue(九) 自定义指令

    前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令 ...

  9. Vue2.x directive自定义指令

    directive自定义指令 除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令. 注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的 ...

  10. vue怎么自定义指令？？

    最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...

随机推荐

  1. 44.python排序算法（冒泡+选择）

    一,冒泡排序: 是一种简单的排序算法.它重复地遍历要排序的数列,一次比较两个,如果他们的排序错误就把他们交换过来. 冒泡排序是稳定的(所谓稳定性就是两个相同的元素不会交换位置) 冒泡排序算法的运作如下 ...

  2. QEMU编译安装

    QEMU是一个支持跨平台虚拟化的虚拟机,有user mode和system mode两种配置方式.其中qemu在system mode配置下模拟出整个计算机,可以在qemu之上运行一个操作系统.QEM ...

  3. [CF798D]Mike and distribution_贪心

    Mike and distribution 题目链接:http://codeforces.com/problemset/problem/798/D 数据范围:略. 题解: 太难了吧这个题..... 这 ...

  4. Python+requests维持会话

    Python+requests维持会话 一.使用Python+requests发送请求,为什么要维持会话? 我们是通过http协议来访问web网页的,而http协议是无法维持会话之间的状态.比如说我们 ...

  5. 关于springboot的日志logging.file和logging.path的配置问题

    springboot日志配置 logging.path  logging.file 它们俩不会同时生效,so只配置其中一个就好了. eg1: 单独一个path配置 logging.path=E:/lo ...

  6. 代理模式与动态代理之JDK实现和CGlib实现

    静态代理 静态代理中的代理类和委托类会实现同一接口或是派生自相同的父类. 由业务实现类.业务代理类 两部分组成.业务实现类 负责实现主要的业务方法,业务代理类负责对调用的业务方法作拦截.过滤.预处理, ...

  7. webpack打包时删除console.log，和debugger

    开发过程中我们不可避免的需要console.log调试,然而在上线时如果不删除这些console.log可能会造成内存泄漏,因为console.log出来的变量是不会被GC的,webpack给我们提供 ...

  8. UML学习（四）-----状态图

    状态图主要用于描述对象具有的各种状态.状态之间的转换过程以及触发状态转换的各种事件和条件. 1.状态图的组成 1.1 状态 主要用于描述一个对象在生命周期内的一个时间段.状态图中的状态包括状态名.内部 ...

  9. HTTP协议探究（三）：HTTPS

    一 复习与目标 1 复习 代理:转发通信数据(一般协议不变,作为中间人,可对报文进行过滤修改) 网关:转发通信数据(协议改变,作为资源拥有者) 隧道:转发通信数据(协议不变,作为管道,不对报文进行过滤 ...

  10. Unity 屏幕坐标到UGUI RectTransform本地坐标的转换

    public static bool ScreenPointToLocalPointInRectangle(RectTransform rect, Vector2 screenPoint, Camer ...