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は使えない