VUE：自定义指令（directives ）选项的用法

自定义指令分为全局指令和局部指令。全局指令可在任意vue组件内生效，局部指令仅在注册了指令的组件内生效。

全局指令和局部指令写法几乎相同。全局指令是在main.js内使用Vue.directive注册，局部指令是在组件的directives选项写入。

下面介绍一下指令的具体用法。

指令，常用于封装一些涉及dom的公共功能，比如表单的自动获取焦点，列表的下拉收缩等。

一、指令的钩子函数

指令对象共有五个钩子函数：bind、inserted、update、componentUpdated、unbind。这些参数均可选。

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

二、钩子函数的参数

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

三、简单的案例

一个实现了点击展开、选中收缩的下拉框.

代码如下：

vue:

<template><div><span class="direct-val">{{inputVal}}</span><ul class="direct-list direct-hide" v-toogleList><li class="direct-item" v-for="(item) in directList" :key="item" @click="changeVal(item)">{{item}}</li></ul></div>
</template>
<script>
export default {data(){return{inputVal:'1',directList:[1,2,3,4,5,6,7,8]}},methods:{changeVal(val){this.inputVal=val;}}
}
</script>

directive.js:

function toogleClass(){let dom=this;let classList=[...dom.classList];if(classList.includes('direct-hide')){dom.classList.remove('direct-hide');dom.classList.add('direct-show');}else if(classList.includes('direct-show')){dom.classList.remove('direct-show');dom.classList.add('direct-hide');}
}
export default {inserted(el,binding){el.previousElementSibling.addEventListener('click',toogleClass.bind(el))el.addEventListener('click',toogleClass.bind(el))console.log(binding)},unbind(el){el.previousElementSibling.removeEventListener('click',toogleClass.bind(el))el.removeEventListener('click',toogleClass.bind(el))}
}

main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
import direct from './directives/directive'
Vue.config.productionTip = false
Vue.directive('toogleList', direct)
/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

输出的bind对象如图：

效果：

四、其他事项

vue的官方文档还介绍了其他关于自定义指令的内容。

以上就是vue中自定义指令的简单介绍。

VUE：自定义指令（directives ）选项的用法相关推荐

vue 自定义指令 directives
原文链接: vue 自定义指令 directives 上一篇: vue 事件修饰符 stop,capture,prevent 下一篇: js 坑... vue 可以自己扩充指令增加一个v-color ...
vue自定义指令directives同时传递多个参数
vue自定义指令directives同时传递多个参数 // 自定义指令v-hClick绑定for循环第二个参数,这里的inx还可以是其他标的,指令中可通过其做出判断在dom,将多个参数通过数组的格式 ...
vue自定义指令directives实现自动点击事件及自动点击第一个按钮
业务场景:点击弹窗默认加载第一个按钮的数据.vue自定义指令directives实现这个需求目录自动点击所有的按钮. 自动点击第一个按钮, 自动点击所有的按钮. <ul class=&quo ...
Vue自定义指令及实现图片懒加载指令
一. 速识概念: 在我们使用 Vue 的过程中,遇到了很多方便我们操作的vue内置指令,以 v-xxx 表示.比如有 v-module,v-for,v-if,v-show 等等,每个指令都能实现一 ...
Vue2自定义指令directives简介
我们在学习vue的时候会学习多个指令,如v-show,v-text,v-pre等等.但如果我们想要完成一些现有指令无法完成的操作的时候,就应该使用自定义指令来实现我们想要的操作.所以现在我们就来简单讲 ...
Vue 自定义指令的注册方式和选项参数
目录 1. 注册方法 1.1 全局注册的写法 1.2 局部注册的写法 2. 自定义指令的选项 2.1 选项 2.2 钩子函数的参数 1. 注册方法自定义指令的注册方法,分为全局注册和局部 ...
vue 自定义指令 directive 全局 directives 局部 inserted update
vue 自定义指令需求效果全局 - 自定义指令代码局部 - 自定义指令代码自定义命令传值效果代码问点需求获取标签,扩展额外的功能效果全局 - 自定义指令代码 // mai ...
9、Vue自定义指令
Vue自定义指令 1.vue指令和自定义指令 2.使用自定义指令 2.1.全局注册 2.2.局部注册 3.钩子函数 1.vue指令和自定义指令什么是指令? v-model.v-bind.v-on.v ...
vue 自定义指令
除了内置的指令外,Vue 也允许注册自定义指令. vue用Vue.directive(id,definition)方法注册一个全局自定义指令,它接受两个参数,指令ID和定义对象.也可以用directi ...
Vue的自定义指令以及Vue自定义指令的应用场景
前言一.Vue的自定义指令分为? vue中除了核心功能内置的指令外,也允许注册自定义指令.有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令. 自定义指令分为全局自定义指令和局部的自 ...