event.preventDefault（）またはするevent.stopPropagation（）イベントハンドラを呼び出すことは非常に一般的な要件です。唯一の純粋なデータロジック方式ではなく、DOMイベントの詳細：我々は簡単に、より良い方法をプロセスのこの時点を達成、しかしであることができますが。
この問題を解決するために、Vue.jsがv-上のイベント修飾子を提供します。コマンド修飾子によって、前述のポイントの表現を開始接尾辞です。
<！ - ストップクリックイベントが広がり続け - > <a v-on:click.stop="doThis"> </a>の<！ - ページを再読み込み、もはやイベントを提出していない - > <フォームのV-上：submit.prevent = "をonSubmit"> </フォーム> < - > <a v-on:click.stop.prevent="doThat"> </a>の< - - 修飾子を直列に接続することができる唯一の修正！ブレーク - > <フォームVオン：!! submit.prevent> </フォーム> < - イベントリスナーを追加する使用イベントキャプチャモード - > < - イベント自体は、その後、このプロセスの最初の要素をトリガこれは内部処理要素に引き渡された - > <divのV-上:! click.capture =「doThis」> ... </ div> < - トリガされた場合にのみ、event.targetハンドラたときに現在の要素そのもの - - > < - イベントが内部の要素からトリガーされていないこと - > <divのV-上:! click.self = "doThat"> ... </ div>
例：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<h1>事件修饰符</h1>
<button @click.once="add(1)">涨一岁</button> <!--只执行一次-->
<p>my age is {{age}}</p>
<div id="canvas" v-on:mousemove="updateXY"> <!--鼠标移动事件-->
{{x}},{{y}} -
<span v-on:mousemove.stop="">stop moving</span> <!--阻止单击事件继续传播 -->
</div>
<a href="http://www.baidu.com/" v-on:click.prevent="alert()">baidu</a>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>app.js
new Vue({
el: '#app',
data: {
age: 30,
x: 0,
y: 0
},
methods: {
add: function (inc) {
this.age += inc;
},
substract: function (dec) {
this.age -= dec;
},
updateXY: function(event){
// console.log(event);
this.x = event.offsetX;
this.y = event.offsetY;
},
stopmoving: function(event) {
event.stopPropaggation();
},
alert: function() {
alert("hello world！");
}
}
});