2022-11-15:时间、自定义指令

1、时间

const stamp1 = new Date(new Date().setHours(0, 0, 0, 0)); //获取当天零点的时间
const stamp2 = new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1); //获取当天23:59:59的时间

2、自定义指令

定义:

  • 全局(main.js中引入)
Vue.directive('xx', {
   bind: function (el) {
    ...
   },
   ...
})
  • 局部
directives: {
  xx: {
     bind: function (el) {
      ...
     },
     ...
  }
}

使用:

<div  v-xx></div>

指令中具体使用钩子:

bind:一次性的初始化设置,指令第一次绑定到元素时调用;
inserted:被绑定元素插入父节点时调用;
update:所在组件 VNode 节点更新时调用;
componentUpdated:所在组件的 VNode 及其子 VNode 全部更新后调用;
unbind:指令与元素解绑时调用。

bind 和 update触发相同的行为:

Vue.directive('xx', function (el) {
  ...
})

钩子函数参数:

el:指令所绑定的元素;
binding:一个对象;
  name(指令名)
  value(指令绑定值,eg:v-myDirective="1 + 1" 中,绑定值为2)、oldValue(指令绑定的前一个值)
  expression(字符串形式的指令表达式,eg:v-myDirective="1 + 1" 中,表达式为 "1 + 1")
  arg(传给指令的参数,eg:v-myDirective:foo 中,参数为 "foo")
  modifiers(一个包含修饰符的对象,eg:v-myDirective.foo.bar 中,修饰符对象为 { foo: true, bar: true })
vnode:Vue 编译生成的虚拟节点;
oldVnode:上一个虚拟节点,在update时使用。
------------除了el,其他只读------------
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容