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

提醒

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

前言

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

正文

简介

1. 全局注册

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

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

2. 局部注册。

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