欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue:学习笔记(七)-自定义指令

程序员文章站 2022-05-16 18:34:47
...

提醒

原帖完整收藏于IT老兵驿站,并会不断更新。

前言

前面总结到了组件,对混入也进行了研究,不过感觉没有啥需要总结的,就先总结指令吧,参考这里,记录笔记。

正文

简介

  1. 全局注册
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

这里这个focus方法不太熟,查一下手册,原来是用来获取焦点的方法。

  1. 局部注册。
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

钩子函数

在某个生命周期被回调,就像Vue自己的生命周期,Android的生命周期,暴露一些接口给用户。

函数简写

在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。比如这样写:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

这段没有看懂–明白了,上面这段是最简单的一个自定义指令的写法。

对象字面量

这个字面量又不懂了,还需要参考手册

字面量:These are fixed values, not variables, that you literally provide in your script.
这个是翻译过来的意思:字面量是由语法表达式定义的常量;或,通过由一定字词组成的语词表达式定义的常量

初步理解,字面量是一个常量,符合了一定的语法,符合了数组的语法,就是数组字面量,符合了对象的语法,就是对象字面量,大体理解成这样,看了手册半天,感觉还是没有完全理解。

总结

对于字面量的概念,还需要继续研究,反复理解,将来再补充。
对于指令的理解,感觉大体都明白了。

参考

https://cn.vuejs.org/v2/guide/custom-directive.html
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

相关标签: Vue 指令

上一篇: 节假日

下一篇: 节假日接口