Vue 實現自定義指令
阿新 • • 發佈：2021-12-08
分3步實現一個簡單的Vue自定義指令
1.建立一個存放自定義指令的js檔案,寫好我們想要的功能(以修改樣式為例),具體程式碼如下:
注:css帶有橫槓( - )的屬性應寫為駝峰命名
export const abc = (el) => { el.style.backgroundColor = 'blue' }
2.匯入自定義指令函式,並配置到directive中
import { abc } from './自定義指令.js' //匯入
directives: { abc }, // 註冊
3.在標籤內使用自定義指令
<button v-abc style="width:200px;height:200px"></button>
最後效果:
下面是自定義元件生命週期:
1.bind:只調用一次，指令第一次繫結到元素時呼叫，用這個鉤子函式可以定義一個繫結時執行一次的初始化動作。
2.inserted:被繫結元素插入父節點時呼叫（父節點存在即可呼叫，不必存在於document中)
3.update:被綁定於元素所在的模板更新時呼叫，而無論繫結值是否變化。通過比較更新前後的繫結值，可以忽略不必要的模板更新。
4.componentUpdated:被繫結元素所在模板完成一次更新週期時呼叫。 5.unbind:只調用一次，指令與元素解綁時呼叫