自定义指令

  1. 什么是自定义指令

    以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令。为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到自定义指令。

  2. 自定义指令的语法

    1. 全局自定义指令

      // 注册一个全局自定义指令 `v-focus`
      Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
      // 聚焦元素
      el.focus()
      }
      })
    2. 局部自定义指令

      directives: {
      focus: {
      // 指令的定义
      inserted: function (el) {
      el.focus()
      }
      }
      }
  3. 钩子函数

    看了上述的代码,如果你从来没接触过这类内容,你可能会很生疏,下面我给大家讲讲其每一步所需要掌握的东西

    首先是钩子函数:

    • bind :只会调用一次的函数,表示指令第一次绑定元素时调用
    • inserted :被绑定元素插入到父节点时调用(仅保证父节点存在,但不一定已被插入文档中)。
    • update :所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。
    • componentUpdated :指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    • unbind :只调用一次,指令与元素解绑时调用。

    然后我们看看钩子函数中的参数列表

    • el:指令所绑定的元素,可以用来直接操作 DOM 。
    • binding:一个对象,包含以下属性:
      • name:指令名,不包括 v- 前缀。
      • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
      • oldValue:指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无论值是否改变都可用。
      • 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 编译生成的虚拟节点。
    • oldVnode:上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用。

    除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

    下面我们来分析几个简单的钩子函数,及其参数

    代码如下:(看完代码我再将其)

    <div id="app">
    <span v-mmm='{color:color, fontSize:"20px"}'>bind的对象形式</span>
    <br>
    <button @click='changeStyle'>改变颜色</button>
    </div> <script>
    const vm = new Vue({
    el: '#app',
    data: {
    color: 'cyan',
    style1: {color: 'lightblue'},
    style2: {fontSize:"20px"}
    },
    directives: {
    mmm: {
    bind(el,binding) {
    // binding.value = {color:color, fontSize:"20px"}
    if(binding.value.constructor === Object) {
    Object.keys(binding.value).forEach(key => {
    el.style[key] = binding.value[key];
    })
    }
    }
    }
    },
    methods: {
    changeStyle() {
    this.color = 'lightpink'
    }
    },
    })
    </script>

    效果图:

    下面我们换成 update 钩子函数:

    update(el,binding) {
    // binding.value = {color:color, fontSize:"20px"}
    if(binding.value.constructor === Object) {
    Object.keys(binding.value).forEach(key => {
    el.style[key] = binding.value[key];
    })
    }
    }

    效果图:

    当我们点击按钮后:

    我们发现他会随着数据改变而更新,但是他刚开始不会调用它,只有当数据发生改变之后才会调用该钩子函数

    如果我们想要要刚开始就调用,并且会跟随数据改变而改变,那么我们就要同时调用 bindupdate 这两个钩子函数,但是两个钩子函数中的内容又是一样的,那么书写起来就很麻烦。那么我们可以这样写:

    mmm: function(el , binding) {
    if(binding.value.constructor === Object) {
    Object.keys(binding.value).forEach(key => {
    el.style[key] = binding.value[key];
    })
    }
    },

    这样之后我们就可以达到那样的效果了。

  4. 书写一个类似于 v-bind:style 的效果的自定义指令

    <div id="app">
    <span v-mystyle='{color:color, fontSize:"20px"}'>v-mystyle的对象形式</span> <p v-mystyle='[style1 , style2]'>我使用的是v-mystyle的数组形式</p> <button @click='changeStyle'>改变颜色</button>
    </div> <script>
    const vm = new Vue({
    el: '#app',
    data: {
    color: 'cyan',
    style1: {color: 'lightblue'},
    style2: {fontSize:"20px"}
    },
    directives: {
    mystyle: function(el , binding) {
    if(binding.value.constructor === Object) {
    Object.keys(binding.value).forEach(key => {
    el.style[key] = binding.value[key];
    })
    } else if(binding.value.constructor === Array) {
    for(item of binding.value) {
    for(key in item) {
    el.style[key] = item[key];
    }
    }
    }
    },
    },
    methods: {
    changeStyle() {
    this.color = 'lightpink'
    }
    },
    })
    </script>

    效果图:

手写vue中v-bind:style效果的自定义指令的更多相关文章

  1. 剖析手写Vue,你也可以手写一个MVVM框架

    剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...

  2. 手写 Vue 系列 之 Vue1.x

    前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...

  3. 手写 Vue 系列 之 从 Vue1 升级到 Vue2

    前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...

  4. 手写Promise中then方法返回的结果或者规律

    1. Promise中then()方法返回来的结果或者规律 我们知道 promise 的 then 方法返回来的结果值[result]是由: 它指定的回调函数的结果决定的 2.比如说下面这一段代码 l ...

  5. 手写简单call,apply,bind

    分析一下call的使用方法:call是显示绑定this指向,然后第一个参数是你所指向的this对象,后面跟着多个参数,以逗号隔开 function sum(num1,num2){ return num ...

  6. TensorFlow实现Softmax Regression识别手写数字中"TimeoutError: [WinError 10060] 由于连接方在一段时间后没有正确答复或连接的主机没有反应,连接尝试失败”问题

    出现问题: 在使用TensorFlow实现MNIST手写数字识别时,出现"TimeoutError: [WinError 10060] 由于连接方在一段时间后没有正确答复或连接的主机没有反应 ...

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

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

  8. Vue.js(16)之 directive自定义指令

    推荐阅读:Vue.directive基础,在Vue模块开发中使用 全局指令 Vue.directive('全局自定义指令名称', { /* 自定义指令配置对象 */ }) 私有指令 <templ ...

  9. Vue中class与style绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...

随机推荐

  1. H3C 环路避免机制四:定义最大值

  2. 12563 - Jin Ge Jin Qu hao——[DP递推]

    (If you smiled when you see the title, this problem is for you ^_^) For those who don’t know KTV, se ...

  3. C# 判断系统版本

    本文告诉大家如何判断系统是 win7 还是 xp 系统 使用下面代码可以判断 private static readonly Version _osVersion = Environment.OSVe ...

  4. H3C 使用tracert命令

  5. js的cookie操作及知识点详解

    <html> <head> <script type="text/javascript"> function getCookie(c_name) ...

  6. Linux 内核注册一个 USB 驱动

    所有 USB 驱动必须创建的主要结构是 struct usb_driver. 这个结构必须被 USB 驱动填 充并且包含多个函数回调和变量, 来向 USB 核心代码描述 USB 驱动: struct ...

  7. HDU 6444 Neko's loop(单调队列)

    Neko has a loop of size nn. The loop has a happy value aiai on the i−th(0≤i≤n−1)i−th(0≤i≤n−1) grid.  ...

  8. codeforces 540E 离散化技巧+线段树/树状数组求逆序对

    传送门:https://codeforces.com/contest/540/problem/E 题意: 有一段无限长的序列,有n次交换,每次将u位置的元素和v位置的元素交换,问n次交换后这个序列的逆 ...

  9. Android Library的依赖方式及发布(转)

    还是那句老话,好记性不然烂笔头,在此整理 Android Studio 依赖相关 以及 如何发布项目到 JCenter Android Studio 添加依赖Module 依赖module 依赖是指在 ...

  10. unsupported jsonb version number 123

    PostgreSQL  jsonb 入库时遇到   unsupported jsonb version number 123 变通方法 insert into  htclanedata (laneda ...