vue-cli自定义指令，vuejs自定义指令

除了Vue 内置的指令集（例如v-model 和v-show）之外，Vue 还允许您注册自定义指令。我们研究了在Vue 中重用代码的两种方法：组件和组合函数。组件是主要构建块，而组合函数则侧重于状态逻辑。另一方面，自定义指令主要旨在重用涉及对常规元素的底层DOM 访问的逻辑。本地自定义指令

全局自定义指令

//入口文件中main.jscreateApp(App).directive('focus',{mounted(el){ el.focus() }) //在任意页面使用v-focus 推荐写法

//示例：新建一个src/directives/Focus.jsexport const FOCUS={ //未使用的参数不需要写//mounted (el,binding, vnode, prevVnode) { Mounted (el) { el.focus( ) }}//来自文件main.jsimport {FOCUS} in './directives/focus'createApp(App).directive('focus',{ mount(el){ el.focus() } 视频正在加载.

自定义指令生命周期

//Create(el, binding, vnode, prevVnode) 在绑定元素的属性之前调用//或在应用事件侦听器之前{ //下面每个参数的详细信息}, //在将元素插入DOM 之前调用beforeMount( el, binding, vnode, prevVnode) {}, //在绑定元素的父组件Mounted(el, binding, vnode, prevVnode ) {} //及其所有子节点之后//调用beforeUpdate(el, binding, vnode , prevVnode) {} 在绑定元素的父组件更新之前。 //绑定元素的父组件及其所有子节点更新后update( el, binding, vnode, prevVnode) {}, //beforeUnmount(el, binding, vnode, prevVnode) {} , //在之前调用绑定元素的父组件已卸载。调用unmounted(el, binding, vnode, prevVnode) ) {} 钩子参数（通常前两个参数就足够了）

el：指令绑定到的元素。您可以使用它直接操作DOM。绑定：包含以下属性的对象： value：传递给指令的值。例如，如果v-my-directive='1 + 1'，则值为2。 oldValue：旧值。仅在更新之前可用并更新。无论值是否改变都可以使用。 arg：传递给指令的参数（如果有）。例如，在v-my-directive:foo 中，参数为“foo”。修饰符：包含修饰符（如果有）的对象。例如，在v-my-directive.foo.bar 中，修饰符对象为{ foo: true, bar: true }。实例：使用该指令的组件的实例。 dir：指令定义对象。 vnode：表示绑定元素的底层VNode。 prevNode：表示上一次渲染时指令所绑定的元素的VNode。只能与beforeUpdate 和Updated 挂钩一起使用。示例：

绑定参数将是一个像： 这样的对象

{ arg: 'foo',modifiers: { bar: true }, value: /* `baz` 的值*/, oldValue: /* 最后更新时`baz` 的值*/} 当然，你需要实现相同的行为，如果是Mounted 和Updated 后，您可以将其缩写为：

文字颜色

更改颜色createApp(App).directive('color',Color) 正在加载视频.

如果指令需要多个值，您可以传递JavaScript 对象文字。请不要忘记。指令还可以接受任何合法的JavaScript 表达式。

createApp(App).directive('demo', (el, binding)={ console.log(binding.value.color) //='white' console.log(binding.value.text) //='你好！ '}) 在组件上：

当在组件中使用自定义指令时，它们始终应用于组件的根节点，类似于透明属性。

//父组件//子组件的组件文本

请注意，一个组件可能包含多个根节点。当应用于多根组件时，该指令将被忽略并抛出警告。与属性不同，指令不能通过v-bind='$attrs' 传递给另一个元素。一般来说，不建议在组件中使用自定义指令。