局部自定義指令

自定義指令可以調用 5個函數，4個參數

函數：

* 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 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。

? ? ?* oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

<template><div><!-- 自定義指令 --><input v-focus type="text" v-model="def" /><h1 v-content>{{ def }}</h1></div> </template><script> export default {directives: {focus: {// 指令的生命周期inserted(el, binding) {el.value = '2222'console.log(el, binding)},update() {console.log(1)},},content: {inserted(el, binding) {el.style.color = 'red'el.innertext = binding.valueconsole.log(binding.value)},},},data() {return {def: '初始化內容',}},methods: {aaa() {console.log(111)},}, } </script>

?

總結

以上是生活随笔為你收集整理的vue自定义指令(详细)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。