vue 自定义指令

除了内置的指令外，Vue 也允许注册自定义指令。

vue用Vue.directive(id,definition)方法注册一个全局自定义指令，它接受两个参数，指令ID和定义对象。也可以用directives注册一个局部自定义指令。

// 注册一个全局自定义指令 `v-my-directive`
Vue.directive('my-directive', {// 钩子函数    当指令第一次绑定到 DOM 中时……bind: function (el) {}
})
// 注册一个局部自定义指令
directives: {my-directive: {bind: function (el) {}}
}

一个指令定义对象可以提供如下几个钩子函数：

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

钩子函数的参数:

el：指令所绑定的元素，可以用来直接操作 DOM 。

vm : 拥有该指令的上下文。

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 钩子中可用

<div id="demo" v-demo-directive="LightSlateGray : msg"></div>Vue.directive('demoDirective', {bind: function () {this.el.style.color = '#fff'this.el.style.backgroundColor = this.arg},update: function (value) {this.el.innerHTML ='name - '       + this.name + '<br>' +'raw - '        + this.raw + '<br>' +'expression - ' + this.expression + '<br>' +'argument - '   + this.arg + '<br>' +'value - '      + value}});var demo = new Vue({el: '#demo',data: {msg: 'hello!'}})

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {console.log(binding.value.color) // => "white"console.log(binding.value.text)  // => "hello!"
})

高级选项

deep
如果你希望在一个对象上使用自定义指令，并且当对象内部嵌套的属性发生变化时也能够触发指令的 update 函数，那么你就要在指令的定义中传入 deep: true。

   <div id="demo" v-my-directive="obj"></div>Vue.directive('my-directive', {deep: true,update: function (obj) {// 当 obj 内部嵌套的属性变化时也会调用此函数}})
let demoVM = new Vue({el:"#demo",data:{a:{b:{c:2}}}
})

twoway
如果你的指令想向 Vue 实例写回数据，你需要传入 twoWay: true 。该选项允许在指令中使用 this.set(value)。

Vue.directive('example', {twoWay: true,bind: function () {this.handler = function () {// 把数据写回 vm// 如果指令这样绑定 v-example="a.b.c",// 这里将会给 `vm.a.b.c` 赋值this.set(this.el.value)}.bind(this)this.el.addEventListener('input', this.handler)},unbind: function () {this.el.removeEventListener('input', this.handler)}
})
let demo = new Vue({el:"#demo",data:{a:{b:{c:2}}}
})

vue 自定义指令相关推荐

vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
vuejs 指令封装 button 加载效果_这些Vue自定义指令，让你的项目开发爽到爆
受 AngularJS 的启发,Vue 内置了一些非常有用的指令(比如v-html 和 v-once等),每个指令都有自身的用途.完整的指令列表可以在这里查看. 这还没完,更棒的是可以开发自定义指令. ...
vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
pyqt5 treeview鼠标右键菜单事件_【动手实践】使用 Vue 自定义指令实现右键菜单...
本文来自于神奇的程序员前言浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就 ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
html标签outclick,vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: 一般在需要 DOM 操作时我们都需要使用自定义指令的方式去实现,当然一些特殊的事件监听也可以使用指令,例 ...
9、Vue自定义指令
Vue自定义指令 1.vue指令和自定义指令 2.使用自定义指令 2.1.全局注册 2.2.局部注册 3.钩子函数 1.vue指令和自定义指令什么是指令? v-model.v-bind.v-on.v ...
vue 自定义指令 directives
原文链接: vue 自定义指令 directives 上一篇: vue 事件修饰符 stop,capture,prevent 下一篇: js 坑... vue 可以自己扩充指令增加一个v-color ...
vue自定义指令directives同时传递多个参数
vue自定义指令directives同时传递多个参数 // 自定义指令v-hClick绑定for循环第二个参数,这里的inx还可以是其他标的,指令中可通过其做出判断在dom,将多个参数通过数组的格式 ...
vue自定义指令基础
今天,我们讲讲vue自定义指令基础知识,主要包括指令如何创建,如何注册,以及指令的相关属性钩子函数. 指令的注册我们通过以下方法注册一个全局自定义指令 Vue.directive(name,defi ...

vue 自定义指令

高级选项

vue 自定义指令相关推荐

最新文章

热门文章