Vue自定义指令directive

Vue 自定义指令 directive

代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

钩子函数

​ 参考地址: 钩子函数

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

​ 参考地址: 钩子函数参数

指令钩子函数会被传入以下参数:

  • el:指令所绑定的元素,可以用来直接操作 DOM。

  • binding

    :一个对象,包含以下 property:

    • 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 钩子中可用。

1. 全局注册


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
    
    <div class="box" v-name="{name: 'chenjiang', age: 22}">
        <p>{{name}}p>
    div>
    
    <button @click="update">updatebutton>

    <button onclick="unbind()">unbindbutton>
div>
<script>
    // 销毁vm, 解绑指令
    // 第一种
    function unbind() {
        vm.$destroy();
    }

    // 全局注册自定义指令
    Vue.directive("name", {
        // 当使用v-name时候点这个bind方法
        bind(el, binding, vnode) {
            console.log(el, binding, vnode)
        },
        // 被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
        inserted(el) {
            // 这个案例其实一开始绑定v-name, 就是将这个节点插入到父节点#app中,
            // 所以这个函数就会直接被调用
            el.innerText = "我插入了父节点#app中了";
        },
        //所在组件的 VNode 更新时调用
        update(el) {
            // el.innerText = "我的内容更新, 因此调用了自定义组件的update方法"
            console.log("我所在的组件更新了");
        },
        // 解绑指令时候调用
        unbind(el) {
            el.innerHTML = "我的自定义指令被解绑了";
        },
        // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
        componentUpdated(el) {
            console.log("组件及其子组件都更新了")
        }
    });

    let vm = new Vue({
        el: "#app",
        data: {
            name: ""
        },
        methods: {
            update() {
                this.name = "chenjiang";
            },
            // 第二种
            /*unbind(){
                vm.$destroy();
            }*/
        }
    })
script>
body>
html>
  1. 初始状态Vue自定义指令directive_第1张图片

  2. 点击updateVue自定义指令directive_第2张图片

  3. 点击unbindVue自定义指令directive_第3张图片


2. 局部注册

<template>
  <div class="hello">
    <div class="box" v-name="{name: 'chenjiang', age: 22}"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      name: ""
    }
  },
  directives: {
    name: {
      bind(el, binding) {
        console.log(el, binding);
      }
    }
  }
}
</script>


你可能感兴趣的:(#,Vue学习,JavaScript学习,vue,js)