V-上のイベント修飾子
一般的なV-上のイベント修飾子
v-onこれは、いくつかの補助的な機能を実現するために、多くのイベント修飾子を提供します。次のようにイベントの修飾子は、次のとおりです。
.stop停止バブリング。基本的にするevent.stopPropagation（）を呼び出します。.preventデフォルトのイベント（デフォルトの動作）を防ぎます。基本的にevent.preventDefault（）を呼び出します。.captureあなたはイベントリスナーを追加すると、（むしろ道をバブリングするよりも、取り込んだイベントを経由して、ある）キャプチャモードを使用します。.selfイベントは、コールバックをトリガーする要素自体（例えば、ない子要素）に発生した場合にのみ。.onceイベントは一度だけトリガ。.{keyCode | keyAlias}イベント自体は、トリガー、トリガーのみコールバックを結合するリスナー要素の場合のみ。.nativeルート要素のネイティブイベントリスナコンポーネント。
PS：複数のイベント改質剤の同時使用を可能にするイベント。
デモ文言：
<!-- click事件 -->
<button v-on:click="doThis"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 阻止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>.stop例
次の例で見てみましょう：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue2.5.16.js"></script>
<style>
.father {
height: 300px;
width: 300px;
background: pink;
}
.child {
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div id="app">
<div class="father" @click="fatherClick">
<div class="child" @click="childClick">
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
fatherClick: function () {
console.log('father 被点击了');
},
childClick: function () {
console.log('child 被点击了');
}
}
})
</script>
</body>
</html>
コード上、発泡現象があり、親タグは、サブタブを含んでいます。あなたは、サブタブをクリックすると、親タグがトリガされます。印刷順序は次のとおりです。
child 被点击了
father 被点击了私は彼の父へのサブレーベルクリックイベントバブリングをしたくないのであれば問題は、ある、どのようにそれを行うには？アプローチは次のとおりです。サブラベル追加するイベント修飾子.stop泡立ちを防ぐために。コードは以下の通りであります：
<div class="child" @click.stop="childClick">あなたは、サブラベルをクリックしたときにストップがバブリングした後、結果は印刷します：
child 被点击了PS：私は興味深い現象を発見しました。上記のコードのこのラインは、場合.stop変更:stop、親タグがトリガされるという現象によって引き起こされ、子ラベルはトリガーされません。
.capture例えば
.capture：捕捉の形で、イベントをトリガではなく、フォームをバブリングします。
あなたは、むしろによるアプローチをバブリングよりも、キャプチャの形を取りたい場合は、ボタンがクリックされると、：または上記の例を使用して修飾親ラベル上のイベントに直接添加することができます.capture。コードは以下の通りであります：
<div class="father" @click.capture="fatherClick">あなたは、サブタブをクリックすると、結果は印刷します：
father 被点击了
child 被点击了.prevent例1の
たとえば、ハイパーリンク<a>のデフォルトの動作はジャンプする必要があり、私はイベントによって修飾子ができ.prevent、このジャンプ動作を防ぎます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
<!-- 通过 .prevent 阻止超链接的默认跳转行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
linkClick: function () {
console.log('超链接被点击了');
}
}
})
</script>
</body>
</html>上記のコード：
削除した場合
.prevent、ボタンをクリックしてログを出力しますだけでなく、Baiduはページにジャンプします。今まで追加
.preventBaiduのページにジャンプしていない、それだけloeg印刷されます。
.prevent例2の
フォームフォームが用意されました：
<form action="http://www.baidu.com">
<input type="submit" value="表单提交">
</form>私たちは、このためにフォームの上、知っているtype="submit"それは送信ボタンであるので、ボタンをクリックして、フォームはformタグのaction属性に行く、そのページを指定提出されます。これは、フォームのデフォルトの動作です。
今、私たちが使用することができ.prevent、このデフォルトの動作を阻止します。ボタンをクリックした後、サーバーに送信されませんが、あなたが望む私たちのイベントの実行（そうでない場合は提出の方法で定義されている）：次のように改正しました。次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
<!-- 阻止表单中submit的默认事件 -->
<form @submit.prevent action="http://www.baidu.com">
<!-- 执行自定义的click事件 -->
<input type="submit" @click="mySubmit" value="表单提交">
</form>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
mySubmit: function() {
alert('ok');
}
}
});
</script>
</html>上記のコードは、私たちが採用し.prevent実行するために、ボタンをクリックして、送信ボタンのデフォルトイベントを防ぐために、mySubmit()コンテンツ内のメソッドを。このメソッド名は、簡単に私たちも、命名することができ、再生することができますsubmitとにかく期限が切れているの提出デフォルトでは、。
.self例えば
.selfイベントは、コールバックをトリガーする要素自体（例えば、ない子要素）に発生した場合にのみ。
私たちは、子どもがラベルをクリックしたときにイベントのトリガ機構で、親タグがフォームをバブリングすることにより、（親タグ自体がクリックされていません）トリガされることを知っています。私は親タグにクリックイベントを設定した場合でも.self効果を達成するために修飾子：親ラベルのないバブルまで、唯一のシンボルラベル自体をクリックするイベントのサブタブをクリックし、イベントの親タグがトリガされます。コードは以下の通りであります：
<div class="father" @click.self="fatherClick">質問：今.stopと.selfバブリングを停止することができ、その後、両方のどのような違いは、それをしませんか？違いは次のとおりです。後者の缶だけ自分自身の行動をバブリング防止しながら、前者は、全体の泡立ちの動作を停止することができます。