手寫vue中v-bind:style效果的自定義指令
阿新 • • 發佈:2020-08-11
自定義指令
-
什麼是自定義指令
以 v- 為字首,然後加上自己定義好的名字組成的一個指令就是自定義指令。為什麼要有自定義指令呢?在有些時候,你仍然需要對普通的DOM元素進行底層的操作,這個時候就可以用到自定義指令。
-
自定義指令的語法
-
全域性自定義指令
// 註冊一個全域性自定義指令 `v-focus` Vue.directive('focus', { // 當被繫結的元素插入到 DOM 中時…… inserted: function (el) { // 聚焦元素 el.focus() } })
-
區域性自定義指令
directives: { focus: { // 指令的定義 inserted: function (el) { el.focus() } } }
-
-
鉤子函式
看了上述的程式碼,如果你從來沒接觸過這類內容,你可能會很生疏,下面我給大家講講其每一步所需要掌握的東西
首先是鉤子函式:
bind
:只會呼叫一次的函式,表示指令第一次繫結元素時呼叫inserted
:被繫結元素插入到父節點時呼叫(僅保證父節點存在,但不一定已被插入文件中)。update
:所在元件的 VNode 更新時呼叫,但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變,也可能沒有。componentUpdated
:指令所在元件的 VNode 及其子 VNode 全部更新後呼叫。unbind
:只調用一次,指令與元素解綁時呼叫。
然後我們看看鉤子函式中的引數列表
el
:指令所繫結的元素,可以用來直接操作 DOM 。binding
:一個物件,包含以下屬性:name
:指令名,不包括v-
字首。value
:指令的繫結值,例如:v-my-directive="1 + 1"
中,繫結值為2
。oldValue
:指令繫結的前一個值,僅在update
和componentUpdated
鉤子中可用。無論值是否改變都可用。expression
:字串形式的指令表示式。例如v-my-directive="1 + 1"
中,表示式為"1 + 1"
。arg
:傳給指令的引數,可選。例如v-my-directive:foo
"foo"
。modifiers
:一個包含修飾符的物件。例如:v-my-directive.foo.bar
中,修飾符物件為{ foo: true, bar: true }
。
vnode
:Vue 編譯生成的虛擬節點。oldVnode
:上一個虛擬節點,僅在update
和componentUpdated
鉤子中可用。
除了
el
之外,其它引數都應該是隻讀的,切勿進行修改。如果需要在鉤子之間共享資料,建議通過元素的dataset
來進行。下面我們來分析幾個簡單的鉤子函式,及其引數
程式碼如下:(看完程式碼我再將其)
<div id="app"> <span v-mmm='{color:color, fontSize:"20px"}'>bind的物件形式</span> <br> <button @click='changeStyle'>改變顏色</button> </div> <script> const vm = new Vue({ el: '#app', data: { color: 'cyan', style1: {color: 'lightblue'}, style2: {fontSize:"20px"} }, directives: { mmm: { bind(el,binding) { // binding.value = {color:color, fontSize:"20px"} if(binding.value.constructor === Object) { Object.keys(binding.value).forEach(key => { el.style[key] = binding.value[key]; }) } } } }, methods: { changeStyle() { this.color = 'lightpink' } }, }) </script>
效果圖:
下面我們換成
update
鉤子函式:update(el,binding) { // binding.value = {color:color, fontSize:"20px"} if(binding.value.constructor === Object) { Object.keys(binding.value).forEach(key => { el.style[key] = binding.value[key]; }) } }
效果圖:
當我們點選按鈕後:
我們發現他會隨著資料改變而更新,但是他剛開始不會呼叫它,只有當資料發生改變之後才會呼叫該鉤子函式
如果我們想要要剛開始就呼叫,並且會跟隨資料改變而改變,那麼我們就要同時呼叫
bind
和update
這兩個鉤子函式,但是兩個鉤子函式中的內容又是一樣的,那麼書寫起來就很麻煩。那麼我們可以這樣寫:mmm: function(el , binding) { if(binding.value.constructor === Object) { Object.keys(binding.value).forEach(key => { el.style[key] = binding.value[key]; }) } },
這樣之後我們就可以達到那樣的效果了。
-
書寫一個類似於
v-bind:style
的效果的自定義指令<div id="app"> <span v-mystyle='{color:color, fontSize:"20px"}'>v-mystyle的物件形式</span> <p v-mystyle='[style1 , style2]'>我使用的是v-mystyle的陣列形式</p> <button @click='changeStyle'>改變顏色</button> </div> <script> const vm = new Vue({ el: '#app', data: { color: 'cyan', style1: {color: 'lightblue'}, style2: {fontSize:"20px"} }, directives: { mystyle: function(el , binding) { if(binding.value.constructor === Object) { Object.keys(binding.value).forEach(key => { el.style[key] = binding.value[key]; }) } else if(binding.value.constructor === Array) { for(item of binding.value) { for(key in item) { el.style[key] = item[key]; } } } }, }, methods: { changeStyle() { this.color = 'lightpink' } }, }) </script>
效果圖: