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

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

提醒

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

前言

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

正文

简介

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

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

  1. 局部注册。
    1
    2
    3
    4
    5
    6
    7
    8
    directives: {
    focus: {
    // 指令的定义
    inserted: function (el) {
    el.focus()
    }
    }
    }

钩子函数

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

函数简写

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

1
2
3
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