vue 的自定义指令:
概述:
vue 除了提供默认的内置指令,还可以允许开发人员根据实际情况自定义指令,他的作用价值在于开发人员在某些场合下需要对普通的DOM元素进行操作;
自定义指令的参数以及钩子函数
- 1、 bind: 只调用一次,指令第一次绑定到元素是调用;
- 2、inserted: 被绑定元素插入父节点时调用;
- 3、update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- 4、 componentUpdated: 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- 5、unbind: 只调用一次;指令于元素解绑定是调用
- 6、 参数:
el:指令所绑定的元素,可以用来直接操作 DOM。
binding:一个对象,包含以下属性:
name:指令名,不包括 v- 前缀。
value:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2
注册自定义指令
Vue自定义指令和组件一样存在着全局注册和局部注册两种方式,全局自定义指令;通过
Vue.directive( id, [definition] )
方式注册全局指令,第一个参数为自定义指令名称(指令名称不需要加v-
前缀,默认是自动加上前缀的,使用指令的时候一定要加上前缀),第二个参数可以是对象数据,也可以是一个指令函数。
- 全局自定义指令:
<div id="app" class="demo">
<!-- 全局注册 -->
<input type="text" placeholder="我是全局自定义指令" v-focus>
</div>
<script>
Vue.directive("focus", {
inserted: function(el){
el.focus();
}
})
new Vue({
el: "#app"
})
</script>
- 用法
<input type="text" v-focus />
// 这个输入框会指定获取焦点
自定义指令的使用场景:
自定义指令来优化图片的加载:图片在加载过程中,未加载完成时使用灰色背景占位,图片加载完后直接显示
<template>
<div>
<!-- 参数不可以直接填写url地址-->
<img v-imgUrl='url' />
</div>
</template>
<script>
export default {
data () {
return {
url: '../src/assets/logo.png'
}
}
}
</script>
// 全局注册
Vue.directive('imgUrl', function (el, binding) {
el.style.backgroundColor = '#FEFEFE' //设置背景颜色
var img = new Image()
img.src = binding.value // binding.value 指令后的参数
img.onload = function () {
el.style.backgroundColor = ''
el.src = binding.value
}
})