Vue.directive自定义指令
2020-06-29 05:02
891 查看
背景
有时候我们需要自定义一些指令可以重复使用,类似于vue自带的v-if一样,此时就需要使用Vue.directiveVue.directive("focus",{ inserted: function (el) { // 聚焦元素 el.focus() } }) //通过以下方式使用 <input v-focus>钩子函数
bind: function () {}, //只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted: function () {}, //被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 update: function () {}, //所在组件的 VNode 更新时调用 componentUpdated: function () {}, //指令所在组件的 VNode 及其子 VNode 全部更新后调用 unbind: function () {} //只调用一次,指令与元素解绑时调用。钩子函数参数
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 钩子中可用。动态指令参数
v-mydirective:[argument]=“value”,argument是通过组件来获取的动态值
<div id="dynamicexample"> <h3>Scroll down inside this section ↓</h3> <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p> </div> Vue.directive('pin', { bind: function (el, binding, vnode) { el.style.position = 'fixed' var s = (binding.arg == 'left' ? 'left' : 'top') el.style[s] = binding.value + 'px' } }) new Vue({ el: '#dynamicexample', data: function () { return { direction: 'left' } } })
相关文章推荐
- Vue.filter()
- Vue.component
- Vue.observable( object )
- vue inheritAttrs属性
- 视频教程-经典Vue从入门到案例到源码分析教程(含资料)-Vue
- 视频教程-JavaScript - Vue经典教程系列-Vue
- vue项目给Date原型挂载方法(解决Date().fromat无效问题)
- vue 多级嵌套数组渲染性能优化
- Vue面试题
- Vue由本地js中存放的url地址获取图片
- 从零开始配置Vue项目(WebApp)
- Vue部分插件的使用
- Vue中Watch的简单应用
- 【vue学习】axios 各种获取数据方式对比
- Vue.js学习——Vue.js的介绍
- Vue.js学习——Vue.js基础
- Vue、jQuery取消DOM 元素绑定的事件
- Vue v-for 动态绑定 ID
- vue中视图生成图片以及到下载
- vue基础知识之slot的用法