Vue.js自定义指令使用

羅小子
羅小子
羅小子
7
文章
1
评论
十一月 15, 202004:21:55 评论

Vue.js除了核心功能默认内置的指令 (v-model 和 v-show),Vue也允许注册自定义指令。有的情况下,对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

下面定义了一个v-test指令绑定数据"羅小子"

<template>
  <div class="hello">
  	<div v-name='msg'></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
     msg:'羅小子',
    }
  },
  directives:{
  	name:{
	    inserted: function (el,binding) {// 指令的定义
	       / /el为绑定元素,可以对其进行dom操作
	       console.log(binding) //一个对象,包含很多属性属性
	    },
	    bind: function (el, binding, vnode) {
		    el.innerHTML =binding.value
		  }
  	}
  }
}
</script>

效果如下:

Vue.js自定义指令使用

还可以全局自定义一个指令v-background,来修改HTML元素的背景色为红色:

Vue.directive('background', {
  inserted: function(el) {
    el.style.background = 'red';
  },
});

Vue.js自定义指令使用

如上面实例所述,要自定义指令要用到几个钩子函数,下面解释一下;

inserted

被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

bind

只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

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 钩子中可用。
继续阅读
羅小子
解决vue-core-video-player2504错误 前端

解决vue-core-video-player2504错误

介绍vue-core-video-player是一款轻量级的视频播放器。支持HLS 解码插件。 在使用这个插件的过程中发现,当数据在created里面初始化数据时,播放器不能播放,控制台输出2504(...
vue-element-admin关闭当前页返回上一页 前端

vue-element-admin关闭当前页返回上一页

摘要vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的...
Vue.js实现动态表单生成 前端

Vue.js实现动态表单生成

摘要最近公司有个需求,根据后台返回的json数据来实现前端表单的生成,我的逻辑是和后端同事约定每一个控件的名字,前端根据这个名字来实现展示或者不展示。 定义表单控件组件 在components文件夹下...
for in 和 for of的区别 前端

for in 和 for of的区别

重点内容: for in 取 key; for of 取 value for of 只能用于数组遍历,for in还可以用于对象属性的遍历 遍历数组: let array = console.log(...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: