vuejsイベント監視の実装方法

vuejs では、「v-on」命令を使用してイベント監視を実装できます。この命令はイベント リスナーをバインドするために使用されます。必要なのは、ラベル テンプレート 関数 "" ステートメントを処理するには、JavaScript を使用して、トリガー時に実行する必要があるコードを設定します。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

テンプレートのレンダリングが完了すると、イベントのバインドと監視を実行できるようになります。 v-on ディレクティブは DOM イベントを監視するために使用され、通常はテンプレート内で直接使用されます。

<button v-on:click="say">Say</button>

メソッドとインライン ステートメント プロセッサ

イベント ハンドラーとして v-on を介して強度オプション属性メソッドにメソッドをバインドします。 v- on: 事後パラメータはすべてのネイティブ イベント名を受け入れます。

    <button v-on:click = "say">Say</button>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"hello vue.js"
        },
        methods:{
            say:function(){
                alert(this.msg);
            }
        }
    })

v-on 略称: @。 @click="say"

v-on はインライン JavaScript ステートメントをサポートしますが、ステートメントは 1 つだけです。

    <button v-on:click = "sayFrom(&#39;from param&#39;)">Say</button>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"hello vue.js"
        },
        methods:{
            sayFrom:function(from){
                alert(this.msg + &#39;&#39; + from);
            }
        }
    })

メソッド関数とインライン JavaScript をルームに直接バインドする場合、ネイティブ DOM イベント オブジェクトを取得する必要がある場合があります。

   <button v-on:click = "showEvent">Event</button> 
   <button v-on:click = "showEvent($event)">event</button>
   <button v-on:click = "showEvent()">Say</button>  //这样写获取不到event
    var vm = new Vue({
        el: "#app",
        methods:{
            showEvent:function(event){
                console.log(event);
            }
        }
    })

v-on を使用して複数の同一の要素をバインドできます。イベント関数は順番に実行されます。 。

イベント修飾子

1. .stop: event.stopPropagation() を呼び出します。

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

2. .prevent : event.preventDefault().

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>

3, .caputure を呼び出します: キャプチャ モードを使用してイベント リスナーを追加します。

  <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>

4. .self: コールバックは、リスニング要素自体からイベントがトリガーされた場合にのみトリガーされます。

   <!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>

5. .once:

 <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>

修飾子を使用する場合、順序が重要です。対応するコードは同じ順序で生成されます。したがって、@click.prevent.self を使用するとすべてのクリックが防止されますが、@click.self.prevent は要素のクリックのみを防止します。

   //例子
    var vm = new Vue({
        el: '#app',
        methods:{
            saySelf(msg) {
                alert(msg);
            }
        }
    });
    //HTML代码
    <div v-on:click="say(&#39;click from inner&#39;)" v-on:click.self="saySelf(&#39;click from self&#39;)">
        <button v-on:click="saySelf(&#39;button click&#39;)">button</button>
        <button v-on:click.stop="saySelf(&#39;just button click&#39;)">button</button>
    </div>

キー値修飾子

キーボード イベントをリッスンするときは、共通のキー値を監視する必要があります。

    <input v-on:keyup.13 = "submit" />  //监听input的输入，当输入回车时触发submit函数。

すべての keyCide を覚えるのは難しいため、Vue は最もよく使用されるキーのエイリアスを提供します。

    <!-- 同上 -->
    <input v-on:keyup.enter="submit">
    <!-- 缩写语法 -->
    <input @keyup.enter="submit">

.enter
.tab
.delete (「Delete」キーと「Backspace」キーをキャプチャ)
.esc
.space
.up
.down
.left
.right
グローバル config.keyCodes オブジェクト :

    // 可以使用 v-on:keyup.f1
    Vue.config.keyCodes.f1 = 112

# を使用して、キー値修飾子のエイリアス

をカスタマイズできます。 # #従来のイベント バインディングとの違い

1. イベントを手動で管理する必要はありません。 ViewModel が破棄されると、すべてのイベント ハンドラーが自動的に削除されるため、DOM バインドされたイベントを取得したり、特定の状況でバインドを解除したりする必要がなくなります。

2. デカップリング。 ViewModel コードは純粋に論理コードであり、DOM とは何の関係もありません。これは自動テスト ケースを作成するのに役立ちます。

vue.extend()

サブコンポーネントを再利用するために、vue.js は「基本的な Vue」を作成する Vue.extend(options) メソッドを提供します。コンストラクター「サブクラス」のパラメーター オプション オブジェクトは、基本的に、直接宣言された Vue インスタンスのパラメーター オブジェクトと同じです。

    var Child = Vue.extend({
        teplate:'#child', //不同的是，el和data选项需要通过函数返回值赋值，避免多个组件实例共用一个数据
        data:function(){
            return {
                ...
            }
        },
        ...
    })
    Vue.component('child',child)  //全局注册子组件
    <child ...></child>  //子组件在其他组件内的调用方式

関連する推奨事項:「

vue.js チュートリアル」

以上がvuejsイベント監視の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。