vue学習8(リスニング、$event、インラインプロセッサでの方法)

文書ディレクトリ

リスニングイベント

イベント処理方法

インターコネクトプロセッサにおける方法

$event

イベント修飾子

イベントのリスニング
DOMイベントをv-onコマンドで傍受し、トリガ時にJavaScriptコードを実行できます.

        Add 1
        
The button above has been clicked {{ counter }} times.
    

    
        var example1 = new Vue({
            el: '#example-1',
            data: {
                counter: 0
            }
        })
    

イベント処理方法
しかし、多くのイベント処理ロジックはより複雑になるため、JavaScriptコードをv-onコマンドに直接書くことはできません.したがって、v−onは、呼び出す必要があるメソッド名を受信することもできる.

        
        Greet
    

    
        var example2 = new Vue({
            el: '#example-2',
            data: {
                name: 'Vue.js'
            },
            //   `methods`        
            methods: {
                greet: function (event) {
                    // `this`          Vue   
                    alert('Hello ' + this.name + '!')
                    // `event`     DOM   
                    if (event) {
                        alert(event.target.tagName)
                    }
                }
            }
        })
    

インラインプロセッサでのメソッド
メソッドに直接バインドするだけでなく、インラインJavaScript文でメソッドを呼び出すこともできます.入力した内容に応じて、異なるポップアップウィンドウをポップアップします.

    

        Say hi
        Say what
    

    
        new Vue({
            el: '#example-3',
            methods: {
                say: function (message) {
                    alert(message)
                }
            }
        })
    

$event
インライン文プロセッサで元のDOMイベントにアクセスする必要がある場合もあります.特殊変数$eventでメソッドに転送できます.

        Submit
    

    
        new Vue({
            el: '#bbb',
            methods: {
                warn: function (message, event) {
                    //               
                    if (event) event.preventDefault()

                    alert(message)
                }
            }
        })
    

イベント修飾子
イベントハンドラでeventを呼び出す.preventDefault()またはevent.stopPropagation()は非常に一般的なニーズです.この点は方法で簡単に実現できるが、DOMイベントの詳細を処理するのではなく、純粋なデータロジックのみが方法であり、クリックイベントがを伝播し続けることを阻止する.
コミットイベントはページを再ロードしません修飾子はに直列に接続できます
修飾子のみ
イベントリスナーを追加するときにイベントキャプチャモード、すなわち要素自体がトリガしたイベントをここで処理してから、内部要素に渡して処理 ...ただ...targetは、現在の要素自体である場合のトリガ処理関数、すなわち、イベントが内部要素からトリガされない ...イベントをクリックすると、が1回だけトリガーされます.
スクロールイベントのデフォルト動作(すなわち、スクロール動作)は、onScrollが完了するのを待つことなく、すぐにトリガーされます.event.preventDefault()が含まれている場合 ...