自定义指令的注册分为全局注册和局部注册。
语法:Vue.directive(id,definition)。id 是指令的唯一标识,definition 定义对象则是指令的相关属性及钩子函数。
全局自定义指令,格式如下
Vue.directive('focus', { // 注册一个全局自定义指令 v-focus
//定义对象
})
也可以注册局部指令,格式如下:
var vm = new Vue({
el: '#app',
directives:{
focus:{
//定义对象
}
}
})
指令的定义对象
definition定义对象,对指令赋予具体的功能。可以提供如下几个钩子函数 (均为可选):
bind:只调用一次,指令第一次绑定到元素时调用,在这里可以进行一次性的初始 化设置。
inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 ocument 中)。
update:被绑定元素所在的模板跟新时调用,而不论绑定值是否变化。通过比较更 新前后绑定的值,可以忽略不必要的模板更新 。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind:只调用一次,指令与元素解绑时调用。
根据需求在不同的钩子函数内完成逻辑代码。
(全局/局部) 自定义 v-focus 指令 <!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta charset="utf-8"/> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>页面载入时,input 元素自动获取焦点:</p> <input v-focus> </div> <script> // 注册一个全局自定义指令 v-focus /* Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } })*/ // 创建根实例 var vm=new Vue({ el: '#app', directives: { // 注册一个局部的自定义指令 v-focus focus: { // 指令的定义 inserted: function (el) { // 聚焦元素 el.focus() } } } }) </script> </body> </html>
指令实例属性
在指令的钩子函数内,可以通过 this 来调用指令实例。下面详细说明指令的实例属性。
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 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
<!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-demo="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta charset="utf-8"/> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app" v-demo:msg.a.b="message"></div> <script> Vue.directive('demo', { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') } }) new Vue({ el: '#app', data: { message: 'hello!' } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--自定义指令v-clickoutside绑定handleHide函数--> <div class="main" v-clickoutside="handleHide"> <button @click="show = !show">点击显示下拉菜单</button> <div class="dropdown" v-show="show"> <div class="item"><a href="#">选项 1</a></div> <div class="item"><a href="#">选项 2</a></div> <div class="item"><a href="#">选项 3</a></div> </div> </div> </div> <script> /*自定义指令v-clickoutside*/ Vue.directive('clickoutside', { /*在document上绑定click事件,所以在bing钩子函数内声明了一个函数 documentHandler,并将它作为句柄绑定在document的click事件上。 documentHandler函数做了两个判断。 * */ bind(el, binding) { function documentHandler(e) { /*第一个是判断点击的区域是否是指令所在的元素内部,如果是, 就跳转函数,不往下继续执行。 * contains方法是用来判断元素A是否包含了元素B,包含返回true。 * */ if (el.contains(e.target)) { return false } /*第二个判断的是当前的指令v-clickoutside有没有表达式,在该自定义 指令中,表达式应该是一个函数,在过滤了内部元素后,点击外面任何区 域应该执行用户表达式中的函数,所以binding.value() * 就是用来执行当前上下文methods中指定的函数的。 * */ if (binding.expression) { binding.value(e) } } /*与Vue 1.0不同的是,在自定义指令中,不能再使用this.xxx的形式再上下 文中声明一个变量,所以用了el.__vueMenuHandler__引用了documentHandler, 这样就可以再unbind钩子里移除对document的click 事件监听。如果不移除,当组建或元素销毁时,它任然存在于内存中。 * */ el.__vueMenuHandler__ = documentHandler; document.addEventListener('click', el.__vueMenuHandler__) }, unbind(el) { document.removeEventListener('click', el.__vueMenuHandler__) delete el.__vueMenuHandler__ } }) new Vue({ el: '#app', data: { show: false }, methods: { handleHide() { this.show = false } } }) </script> </body> </html>
相对时间转换
在很多社区网站,比如朋友圈、微博等,发布的动态有一个相对本机时间转换后的相对时间。
我们来实现这样一个Vue自定义指令v-time,将表达式传入的时间戳实时转换为相对时间
index.js代码如下
var vm = new Vue({
el: '#app',
data: {
timeNow: (new Date()).getTime(),
timeBefore: 1580503571085
}
})
timeNow是当前的时间,
timeBefore是一个写死的时间:2020-02-01
在写指令v-time之前,需要先写一系列与时间相关的函数 ,我们声明一个对象Time,把它们都封装到里面。 time.js代码如下: var Time = { //获取当前时间戳 getUnix: function() { var date = new Date(); return date.getTime(); }, //获取今天0点0分0秒的时间戳 getTodayUnix: function() { var date = new Date(); date.setHours(0); date.setMinutes(0); date.setSeconds(0); date.setMilliseconds(0); return date.getTime(); }, //获取今年1月1日0点0秒的时间戳 getYearUnix: function() { var date = new Date(); date.setMonth(0); date.setDate(1); date.setHours(0); date.setMinutes(0); date.setSeconds(0); date.setMilliseconds(0); return date.getTime(); }, //获取标准年月日 getLastDate: function(time) { var date = new Date(time); var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1; var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); return date.getFullYear() + '-' + month + '-' + day; }, //转换时间 getFormateTime: function(timestamp) { var now = this.getUnix(); var today = this.getTodayUnix(); var year = this.getYearUnix(); var timer = (now - timestamp) / 1000; var tip = ''; if (timer <= 0) { tip = '刚刚'; } else if (Math.floor(timer / 60) <= 0) { tip = '刚刚'; } else if (timer < 3600) { tip = Math.floor(timer / 60) + '分钟前'; } else if (timer >= 3600 && (timestamp - today >= 0)) { tip = Math.floor(timer / 3600) + '小时前'; } else if (timer / 86400 <= 31) { tip = Math.ceil(timer / 86400) + '天前'; } else { tip = this.getLastDate(timestamp); } return tip; } }
Time.getFormatTime()方法就是自定义指令v-time所需要的,参数为毫秒级时间戳,返回已经整理好的时间格式的字符串。
最后在time.js里补全剩余的代码如下:
Vue.directive('time', {
bind: function(el,binding) {
el.innerHTML = Time.getFormateTime(binding.value);
el.__timeout__ = setInterval(() => {
el.innerHTML = Time.getFormateTime(binding.value);
},60000);
},
unbind: function() {
clearInterval(el.__timeout__);
delete el.__timeout__;
}
})
在bind钩子里,将指令v-time表达式的值binding.value作为参数传入Time.getFormatTime()方法中得到格式化时间,在通过el.innerHTML写入指令所在元素。定时器el.__timeout__每分钟触发一次,更新时间,并且在unbind钩子里清除掉。
<!DOCTYPE html> <html> <head> <title>时间转换指令</title> <meta charset="utf-8"/> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-time="timeNow"></div> <div v-time="timeBefore"></div> </div> <script src="./time.js"></script> <script src="./index.js"></script> </body> </html>