vue自定义指令—directive详解

Vue中内置了很多的指令，如v-model、v-show、v-html等，有时候我们想为元素附加一些特别的功能，这些指令并不能满足我们，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。

Vue.directive()
第一个参数是指令的名字（不需要写上v-前缀）
第二个参数可以是对象数据，也可以是一个指令函数

例如页面有个input 想让页面打开input框就获取焦点就可以这样写(该例子来自官网)

自定义指令有两种方法全局自定义指令与局部自定义指令

定义全局自定义指令

全局自定义指令新建src/directives/Focus.js文件

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {// 聚焦元素el.focus()}
})

在main.js中全局引入

import Focus from '@/directive/Focus.js'
Vue.use(Focus)

局部指令的定义方法在组件内部

directives: {focus: {// 指令的定义inserted: function (el) {el.focus()}}
}

你在模板中可以这样应用

<input v-focus>

钩子函数

自定义组件也有钩子函数

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

所有钩子函数都有以下参数

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 编译生成的虚拟节点`oldVnode`：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

防抖案例

// 1.设置v-throttle自定义指令
Vue.directive('throttle', {bind: (el, binding) => {let setTime = binding.value; // 防抖时间if (!setTime) { // 用户若不设置防抖时间，则默认2ssetTime = 2000;}let cbFun;el.addEventListener('click', event => {if (!cbFun) { // 第一次执行cbFun = setTimeout(() => {cbFun = null;}, throttleTime);} else {event && event.stopImmediatePropagation();}}, true);},
});
// 2.为button标签设置v-throttle自定义指令
<button @click="sayHello" v-throttle>提交</button>

vue自定义指令—directive详解相关推荐

vue自定义指令（详解）
vue自定义指令,核心就是需要自己亲手去操作DOM 而vue中的内置指令例如v-model只不过是vue帮你动了dom上的display属性, 所以自定义指令,就是自己亲手对原生操作dom进行了一次封 ...
29.VUE自定义指令directive和inserted
VUE自定义指令directive和inserted 1.什么事自定义指令 1.2使用自定义指令的方式 2.设置自定义组件 2.1 设置全局指令 2.2 设置私有指令 2.3 钩子函数 3. 案例 1 ...
html标签outclick,vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: 一般在需要 DOM 操作时我们都需要使用自定义指令的方式去实现,当然一些特殊的事件监听也可以使用指令,例 ...
vue 自定义指令 directive 全局 directives 局部 inserted update
vue 自定义指令需求效果全局 - 自定义指令代码局部 - 自定义指令代码自定义命令传值效果代码问点需求获取标签,扩展额外的功能效果全局 - 自定义指令代码 // mai ...
Vue 自定义指令(directive)
气温骤降,南京又开始了降温速冻模式,这谁受得了. 进入主题: vue自带了很多的指令,v-once.v-model.v-for等,这些指令对我们的代码带来了很多的帮助,也让他们的编写简单了不少,但是 ...
angular 自定义指令参数详解
restrict:指令在dom中的声明形式 E(元素)A(属性)C(类名)M(注释) priority优先级:一个元素上存在两个指令,来决定那个指令被优先执行 terminal:true或false, ...
vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
vue怎么实现右键二级菜单_vue中如何自定义右键菜单详解
在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: v-for="item in resourceList" :key="item.id&qu ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...

vue自定义指令—directive详解

钩子函数

vue自定义指令—directive详解相关推荐

最新文章

热门文章