Vue：学习笔记（七）-自定义指令

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

...

提醒

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

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

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

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

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.。
这个是翻译过来的意思：字面量是由语法表达式定义的常量；或，通过由一定字词组成的语词表达式定义的常量。

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

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