• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • vue手册
  • php手册
  • MySQL手册
  • apache手册
  • redis手册
  • directive

    • 参数:

      • {string}name
      • {Function | Object}[definition]
    • 返回值:

      • 如果传入definition参数,返回应用实例。
      • 如果不传入definition参数,返回指令定义。


    import { createApp } from 'vue'
    const app = createApp({})
    
    // 注册
    app.directive('my-directive', {
    	// 指令是具有一组生命周期的钩子:
    	// 在绑定元素的父组件挂载之前调用
    	beforeMount() {},
    	// 绑定元素的父组件挂载时调用
    	mounted() {},
    	// 在包含组件的 VNode 更新之前调用
    	beforeUpdate() {},
    	// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
    	updated() {},
    	// 在绑定元素的父组件卸载之前调用
    	beforeUnmount() {},
    	// 卸载绑定元素的父组件时调用
    	unmounted() {}
    })
    
    // 注册 (功能指令)
    app.directive('my-directive', () => {
    // 这将被作为 `mounted` 和 `updated` 调用
    })
    
    // getter, 如果已注册,则返回指令定义
    const myDirective = app.directive('my-directive')
    

    指令钩子传递了这些参数:


    el

    指令绑定到的元素。这可用于直接操作 DOM。


    binding

    包含以下 property 的对象。

    • instance:使用指令的组件实例。
    • value:传递给指令的值。例如,在v-my-directive="1 + 1"中,该值为2
    • oldValue:先前的值,仅在beforeUpdateupdated中可用。值是否已更改都可用。
    • arg:参数传递给指令(如果有)。例如在v-my-directive:foo中,arg 为"foo"
    • modifiers:包含修饰符(如果有)的对象。例如在v-my-directive.foo.bar中,修饰符对象为{foo: true,bar: true}
    • dir:一个对象,在注册指令时作为参数传递。例如,在以下指令中
    app.directive('focus', {
    	mounted(el) {
    		el.focus()
    	}
    })
    

    dir将会是以下对象:

    {
    	mounted(el) {
    		el.focus()
    	}
    }
    


    vnode

    上面作为 el 参数收到的真实 DOM 元素的蓝图。


    prevNode

    上一个虚拟节点,仅在beforeUpdateupdated钩子中可用。

    除了el之外,你应该将这些参数视为只读,并且永远不要修改它们。如果你需要跨钩子共享信息,建议通过元素的自定义数据属性集进行共享。

    上篇:component

    下篇:mixin