目录

使用自定义指令

vue2.0

组件中注册

全局中注册

Vue3.0

小坑

自定义指令中的参数

 vue2.0和vue3.0中的区别

---

其他区别 ===》 vue2.0和vue3.0中语法的区别

自定义指令是什么？类似于vue中的v-for  v-if  v-model...类似的指令语法，自定义指令是自己注册的指令

为什么使用自定义指令？对于现有的指令需求达不到目的，有时候需要对DOM进行其他操作，用自定义扩展更多的功能

使用自定义指令

vue2.0

组件中注册

<template>
    <div>
    <input type="text" v-focus='123' >
    </div>
</template>

<script>
export default {
  directives: {
    focus: { // 自定义指令的名字
    // 下面每个方法都是一个钩子函数
    // el代表 当前绑定的dom元素
      bind: (el, binding) => {
        el.value = 56 // 可以赋值 不能使用方法
        console.log('bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。')
      },
      inserted: (el, binding) => {
        el.focus() // 可以使用方法
        console.log('inserted:被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。')
      },
      update: (el, binding) => {
        console.log('update:被绑定元素所在模板更新时调用,模板还没更新完成')
      },
      componentUpdated: (el, binding) => {
        console.log('componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。')
      },
      unbind: (el, binding) => {
        console.log('unbind:只调用一次，指令与元素解绑时调用。')
      }
    }
  }
}
</script>

全局中注册

 Vue.directive('focus', {
      inserted: function (el, bind) {
        el.focus()
        console.log(el, bind)
      }
    })

具有高端b格写法(利用插件的形式)    

export default {
  install (Vue) {
    Vue.directive('focus', {
      inserted: function (el, bind) {
        el.focus()
        console.log(el, bind)
      }
    })
  }
}

//main.js
import directive from './views/directive'
Vue.use(directive)

Vue3.0

import { createApp } from 'vue'
const app = createApp({})

// 注册
app.directive('my-directive', {
  // 指令是具有一组生命周期的钩子：
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  created (el, binding) {},
  // 在绑定元素的父组件挂载之前调用
  beforeMount (el, binding) {},
  // 绑定元素的父组件被挂载时调用
  mounted (el, binding) {},
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate (el, binding) {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated (el, binding) {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount (el, binding) {},
  // 卸载绑定元素的父组件时调用
  unmounted (el, binding) {}
})

// 注册 (功能指令)
app.directive('my-directive', () => {
  // 这将被作为 `mounted` 和 `updated` 调用
})

小坑

vue3.0中我们通过vue-cli生成的脚手架中的main.js是这么写的

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App) 

createApp(App).use(store).use(router).use(components).mount('#app') 

注册全局指令

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)   //cv过来的代码  第一次定义createApp(App)

app.directive('blue', {

  mounted (el, binding) {

    console.log(el, binding)

  }

})

createApp(App).use(store).use(router).use(components).mount('#app')  //错误代码

上面又是一个createApp(App) 相当于后面的给前面的替换掉了  也就相当于没有定义自定义指令  修改记得改成app

app.use(store).use(router).use(components).mount('#app')

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.directive('blue', {
  mounted (el, binding) {
    console.log(el, binding)
  }
})
app.use(store).mount('#app')

 具有高端b格写法(利用插件的形式)    

directive.js

export default {
  install (app) {
    app.directive('test', {
      mounted (el, binding) {
        console.log(el, binding)
      }
    })
  }
}

main.js

import directive from '@/directive/index'
const app = createApp(App)
app.use(directive)

 dom使用

<div v-test></div>

自定义指令中的参数

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding：一个对象，包含以下 property：
  • 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 钩子中可用。

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

常用

①  el 获取dom进行操作 

②  binding中的value属性 通过binding.value拿到 自定义指令中传过来的值 v-test="1" ===binding.value 

小demo  把当前元素设为绝对定位 并移动指定的top值

directive/index.js

export default {
  install (app) {
    app.directive('top', {
      mounted (el, binding) {
        console.log(el, binding)
        el.style.position = 'absolute'
        el.style.top = binding.value + 'px'
      }
    })
  }
}

main.js

import directive from '@/directive/index'
const app = createApp(App)
app.use(directive)

 dom

<div v-top='50' style="width:100px;height:100px;background:pink"></div>

 vue2.0和vue3.0中的区别

vue2.0中和vue3.0中 自定义指令的原理是一致的，只是生命周期 钩子函数不同  

vue2中绑定的钩子函数为

• bind - 指令绑定到元素后发生。只发生一次。
• inserted - 元素插入父 DOM 后发生。
• update - 当元素更新，但子元素尚未更新时，将调用此钩子。
• componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。
• unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。

vue3.0

将钩子函数的命名与生命周期的钩子函数命名相一致

• bind → beforeMount
• inserted → mounted
• beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。
• componentUpdated → updated
• beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
• unbind -> unmounted