vueカスタム命令
1035 ワード
vue公式サイトのカスタムコマンドhttps://cn.vuejs.org/v2/guide/custom-directive.htmlグローバルカスタム命令
例:カスタムコマンドを使用してページをジャンプする
Vue.directive('focus', {
inserted: function () {
el.focus()
}
})
domでv-focusを使用してこのカスタムコマンドを使用局部的自定义指令
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
inserted関数:バインドされた要素唄挿入親ノードは呼び出しです(親ノードが存在することを保証しますが、ドキュメントに挿入されているとは限りません).bind:一度だけ呼び出し、命令が初めて要素にバインドされたときに呼び出します.ここでは、一度に初期化設定を行うことができます.例:カスタムコマンドを使用してページをジャンプする
directives: {
gopage: {
bind: (el, binding, vnode) => {
// el dom
// vnode vue vnode.context Vue this
el.onclick = () => {
vode.context.$router.path({
name: 'page'
})
//
}
}
}
}
プロジェクトでは、コマンドを1つのファイルに単独で書き、使用する場所で直接参照することが望ましい.