Vue.JS 入門チュートリアルのイベント監視

v-on ディレクティブを使用して、DOM イベントをバインドしてリッスンできます。バインディングのコンテンツは、現在のインスタンスのメソッド (後に括弧を続ける必要はありません) またはインライン式にすることができます。メソッドが提供されている場合、ネイティブ DOM イベントが最初のパラメーターとして渡され、このイベントには、イベントをトリガーした対応する ViewModel を指す targetVM 属性が含まれます:

<div id="demo">
 <a v-on="click: onClick">触发一个方法函数</a>
 <a v-on="click: n++">触发一个表达式</a>
</div>

new Vue({
el: '#demo',
data: {
 n: 0
},
methods: {
 onClick: function (e) {
 console.log(e.targetVM.n);
 console.log(e.target.tagName);// "A"
 console.log(e.targetVM === this);// true
 }
}
});

式を実行します

targetVM は便利ですv-repeat で v-on を使用する場合、v-repeat は多数の子 ViewModel を作成するためです。ただし、次の式を実行して現在の ViewModel データ オブジェクトを表すエイリアスを渡す方が便利で直感的です:

<ul id="list">
 <li v-repeat="item in items" v-on="click: toggle(item)">
 {{item.text}}
 </li>
 <button v-on="click: submit(&#39;hello!&#39;, $event)">Submit</button>
</ul>

new Vue({
el: '#list',
data: {
 items: [
 { text: 'one', done: true },
 { text: 'two', done: false }
 ]
},
methods: {
 toggle: function (item) {
 console.info(item.done);
 item.done = !item.done;
 console.info(item.done);
 },
 submit: function (msg, e) {
 e.stopPropagation();
 console.info(msg + ' submit is called!');
 }
}
})

式内の元の DOM イベントにアクセスしたい場合は、$event パラメータ Go in を渡すことができます。

キー フィルター
キーボード イベントをリッスンするとき、よく使用されるキー コードを決定する必要があることがよくあります。 Vue.js は、v-on ディレクティブ: キーでのみ使用できる特別なフィルターを提供します。キーコードを表すパラメータを受け取り、判定を完了します:

<!-- 只有当 keyCode 等于 13 时才调用方法 -->
<input v-on="keyup:mySubmit | key 13">

システムには、使用できる多くのプリセット値があります。たとえば:

<!-- 效果同上 -->
<input v-on="keyup:submit | key &#39;enter&#39;">

デフォルト値は次のとおりです: Enter tab delete esc up down left right space

HTML リスナーで使用される理由
イベント リスニングの方法全体が、「関心の分離」という従来の概念に反していることに気づくかもしれません。心配しないでください。すべての Vue.js イベント ハンドラーと式は現在のビューの ViewModel に厳密にバインドされているため、メンテナンスが困難になることはありません。実際、v-on を使用すると、次のような利点があります:

HTML テンプレート内の JS コード内の対応するメソッド実装を簡単に見つけられるようになります。
JS でイベントを手動でバインドする必要がないため、ViewModel コードは DOM から完全に切り離された非常に純粋なロジックにすることができます。これによりテストが容易になります。
ViewModel が破棄されると、すべてのイベント リスナーが自動的に削除されます。自分で掃除することを心配する必要はありません。

以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです