ホームページ > 記事 > ウェブフロントエンド > vuejsイベント監視の実装方法

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

青灯夜游オリジナル: 2021-09-26 17:51:243418ブラウズ

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

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

このチュートリアルの動作環境: 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: &#39;#app&#39;,
        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:&#39;#child&#39;, //不同的是，el和data选项需要通过函数返回值赋值，避免多个组件实例共用一个数据
        data:function(){
            return {
                ...
            }
        },
        ...
    })
    Vue.component(&#39;child&#39;,child)  //全局注册子组件
    <child ...></child>  //子组件在其他组件内的调用方式

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

キー値修飾子

関連記事