Vue.js中的自定义指令directives

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。自定义指令，需要声明钩子函数。注册自定义指令也分为注册全局自定义指令和注册局部自定义指令。两者用法相同，局部指令只能在当前组件里面使用。当全局指令和局部指令同名时以局部指令为准。

1. 自定义指令中的钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind、inserted、update、componentUpdated和unbind。

bind => 指令被绑定到元素上时执行，只会执行一次
inserted => 被绑定的元素被插入到父节点时执行，只会执行一次
update => 当虚拟DOM被重新渲染时执行
componentUpdated => 当虚拟DOM重新渲染完成后执行
unbind => 指令与元素解绑时调用，只会执行一次

2. 钩子函数中的参数

指令钩子函数会被传入以下参数：el、binding、vnode和oldVnode。

el => 被绑定的DOM对象
binding => 是一个包含了指令的所有属性的对象，例如：name、rawName、value
vnode => Vue 编译生成的虚拟节点
oldVnode => 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

3. 动态指令参数

指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。

下面我们通过一个案例来看一下。

<body><div id="app">{{i}} <button @click="i++">+</button><div v-red>Hello</div><!-- 动态指令参数：通过改变value值，可以改变参数从而进行数据更新 --><div v-color="'pink'">测试</div></div><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">new Vue({el: '#app',data: {i: 0},directives: {red: { //自定义red指令，需要声明钩子函数bind(){console.log('bind...')},inserted(el){console.log('inserted...', el)// el.style.color = 'red'// console.log(el.style)el.style.color = 'red'},update(){console.log('update....')},componentUpdated(){console.log('componentUpdated...')},unbind(){console.log('unbind...')}},color: {inserted(el,binding){console.log(binding)el.style.color = binding.value}}}})</script></body>

Vue.js中的自定义指令directives相关推荐

Vue项目中的自定义指令
Vue项目中的自定义指令使用场景:需要对DOM元素进行底层操作局部自定义指令当指令第一次被绑定到元素上的时候,会立即触发 bind() 1 定义与 data 同级在 directives 节 ...
Vue.js中的v-model指令（双向绑定）
Vue.js中v-model的作用 v-model的作用和使用场景 1.v-model的作用--双向绑定 2.v-model双向绑定的使用场景--表单 3.总结 v-model的作用和使用场景你好! ...
js div加载html_说说 Vue.js 中的 v-cloak 指令
可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示 ...
vue.js中的v-model指令的深刻理解
vue中经常使用到和这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别.vue使用v-model实现这些标签数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素. ...
浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
vue 自定义指令 directives
原文链接: vue 自定义指令 directives 上一篇: vue 事件修饰符 stop,capture,prevent 下一篇: js 坑... vue 可以自己扩充指令增加一个v-color ...
vue自定义指令directives同时传递多个参数
vue自定义指令directives同时传递多个参数 // 自定义指令v-hClick绑定for循环第二个参数,这里的inx还可以是其他标的,指令中可通过其做出判断在dom,将多个参数通过数组的格式 ...
vue中如何自定义指令
目录一. 什么是自定义指令二. 如何自定义指令三.应用场景实现输入框防抖图片懒加载一键 Copy的功能拖拽下拉菜单相对时间转换一. 什么是自定义指令我们看到的v-开头的行内属性, ...
vue中如何自定义指令directive
一. 什么是自定义指令我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令.除了核心功能默认内置的指令 (v-mode ...

Vue.js中的自定义指令directives

Vue.js中的自定义指令directives相关推荐

最新文章

热门文章