自定义指令

自定义指令

自定义指令分为两种：

• 自定义局部指令：组件通过directives选项们只能在当前组件中使用
• 自定义全局指令：app的directive方法，可以在任意组件中使用

案例：当input元素挂载完成之后可以自动获取焦点

实现方式一：使用默认的实现方式

页面加载之后自动获取焦点

实现方式二：自定义一个v-focus的局部指令

 所以拿到el之后直接el.focus即可自动获取焦点

 mounted(el,bindings,vnode,preVnode) {
                    el.focus()
                },

指令是可以添加修饰符还有参数的，这些部分可以在第二次参数中binding中可以看到

  console.log(bindings.value)
                    console.log(bindings.modifiers)

实现方式三：自定义一个v-focus的全局指令

import { createApp } from 'vue'
import App from './2/App.vue'
const app=createApp(App)
// 传入两个参数，第一个是指定的名称，第二个是一个对象
app.directive('focus',{
    mounted(el,bindings,vnode,preVnode) {
        el.focus()
    },
})
app.mount('#app')

指令的生命周期

一个指令定义的对象，Vue提供了一下几个钩子：

created：在绑定元素的attribute或事件监听器被应用之前调用；

beforeMount：当指令第一次绑定到元素并挂载父组件之前调用；

mounted：在绑定元素的父组件被挂载后调用；

beforeUpdate：在更新包含组件的VNode之前调用；

updated：在包含组件的VNode及其子组件的VNode更新后调用；

beforeUnmount：在卸载绑定元素的父组件之前调用；

unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；

 点击加一之后

 再次点击之后