Vue.jsまとめ⑨ カスタムディレクティブ

下書きが上限に達しているので仮の状態で投稿しています

使用するにはv-名前

グローバルに登録する
main.js に
Vue.directive("名前",{
　bind(el, binding, vnode){}, #ディレクティブが初めて対象の要素に紐ついた時
　inserted(el, binding, vnode){}, #親Nodeに挿入された時
　update(el, binding, vnode, oldVnode){}, #コンポーネントが更新される時、子コンポーネントが更新される前に
　componentUpdated(el, binding, vnode, oldVnode){}, #コンポーネントが更新される時、子コンポーネントが更新された後に
　unbind(el, binding, vnode){}　#ディレクティブがヒモ付いている要素から取り除かれた時
});

bindとupdateをメインに使う

bindとupdateの省略記法
Vue.directive("border", function(el, binding){
})
#elはhtml要素　el.style.border = "solid black 2px"などのように使う

#bindingはいろんな機能がある
el.style.borderWidth = binding.value　と設定し
v-名前="○px"　などとするとボーダーの幅を変更できる

複数の値を必要とする時
v-名前="オブジェクト"　と設定する
例

Home

main.js で Vue.directive("border", function(el, binding){ el.style.border = "solid black 2px" el.style.borderWidth = binding.value.width; el.style.borderColor = binding.value.color; })

引数を扱う
v-名前:引数 #引数は一つのみ
例

Home

main.js で Vue.directive("border", function(el, binding){ el.style.borderStyle = binding.arg #argで引数を持ってこれる })

修飾子
v-名前:引数.修飾子 #複数個つなげられる
例

Home

main.js で Vue.directive("border", function(el, binding){ el.style.borderStyle = binding.arg; if(binding.modifiers.round){ el.style.borderRadius = "0.5rem" } })

ローカル登録
exportで
directives:{
名前（el, binding）{
内容
}
}
例

Home

同じ場所のscript内 export default{ directives:{ border（el, binding）{ el.style.border = "solid black 2px" el.style.borderWidth = binding.value.width; el.style.borderColor = binding.value.color; el.style.borderStyle = binding.arg; if(binding.modifiers.round){ el.style.borderRadius = "0.5rem"; } } } }

ローカル登録の際に
directives内でthisは使えない