Vue:學習筆記(七)-自定義指令
阿新 • • 發佈:2018-12-08
提醒
原帖完整收藏於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