Vueカスタムコンポーネント

1、カスタム命令
また、Vueによって提供される方法によって命令をカスタマイズすることもできます.
1-1、登録命令vueは、2つの命令登録方式を提供する

グローバル命令

ローカル命令

1-2、グローバル指令登録

Vue.directive('    ', {    });

1-3、ローカル命令登録

new Vue({
  el: '#app',
  directives: {
    '    ': {    }
  }
});

命令を使用する場合は、v- で呼び出す必要があり、登録する場合は不要です.
1-4、指令ライフサイクル(フック関数)
命令の動作は簡単で、命令ライフサイクルフック関数のセットを提供しています.私たちは異なるライフサイクルフック関数で論理処理を行うだけでいいです.

bind:1回のみ呼び出され、命令が要素に最初にバインドされたときに呼び出されます.ここでは、一括初期化設定

を行うことができる.

inserted:バインド要素が親ノードに挿入するときに呼び出す(親ノードが存在することを保証するが、ドキュメントに挿入されているとは限らない)

.

update:コンポーネントが更新されたときに呼び出されます(ただし、サブVNodeが更新される前に発生する可能性があります).

componentUpdated:あるコンポーネントとそのサブコンポーネントの更新が完了すると

が呼び出されます.

unbind:1回のみ呼び出し、命令と要素が結合解除されたときに

を呼び出す.
異なるライフサイクルフック関数は、呼び出されると同時に受信されるいくつかの異なるパラメータを受信します.

el:DOM

を直接操作するためにバインドされた要素を命令する.

binding:次のプロパティを含むオブジェクト.

name:v-プレフィックス

を除く命令名

value:命令のバインド値(式解析後の結果として)

expression:命令バインド式(文字列)

arg:命令に伝達されるパラメータ、オプション

modifiers:命令に伝達される修飾子からなるオブジェクト.オプションで、各修飾子はブール値

に対応する.

oldValue:コマンドバインディングの前の値は、updateとcomponentUpdatedフックでのみ使用できます.値が変更されるかどうかにかかわらず、

を使用できます.

 <script>

        Vue.directive('drag', {
            bind(el, binding) {
                
                // console.log(el);
                console.log(binding);
                // let {value} = binding;

                el._canDrag = binding.value;

                let x = 0;
                let y = 0;
                let isDown = false;

                el.addEventListener('mousedown', e => {

                    if (!el._canDrag) return;

                    isDown = true;
                    x = e.clientX - el.offsetLeft;
                    y = e.clientY - el.offsetTop;

                    e.preventDefault();
                });

                document.addEventListener('mousemove', e => {
                    if (isDown) {
                        let l = e.clientX - x;
                        let t = e.clientY - y;

                        if (binding.modifiers.limit) {
                            if (l < 0) {
                                l = 0;
                            }
                        }

                        el.style.left = l + 'px';
                        el.style.top = t + 'px';
                    }
                });

                document.addEventListener('mouseup', e => {
                    isDown = false;
                });

            },

            componentUpdated(el, binding) {
                el._canDrag = binding.value;
            }
        });

        let app = new Vue({
            el: '#app',
            data: {
                canDrag: false
            }
        });