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つのファイルに単独で書き、使用する場所で直接参照することが望ましい.