Vue:学习笔记(七)-自定义指令
提醒
原帖完整收藏于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.
。
这个是翻译过来的意思:字面量是由语法表达式定义的常量;或,通过由一定字词组成的语词表达式定义的常量
。
初步理解,字面量是一个常量,符合了一定的语法,符合了数组的语法,就是数组字面量,符合了对象的语法,就是对象字面量,大体理解成这样,看了手册半天,感觉还是没有完全理解。
总结
对于字面量的概念,还需要继续研究,反复理解,将来再补充。
对于指令的理解,感觉大体都明白了。
参考
https://cn.vuejs.org/v2/guide/custom-directive.html
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
posted on 2018-11-28 16:48 chaiyu2002 阅读(88) 评论(0) 编辑 收藏 举报