イベント修飾子
1.Prevent: デフォルトのイベントを防止します (またはメソッド内で e.preventDefault() を使用します)。
<a href='https://blog.csdn.net/weixin_52993364?type=blog' @click.prevent='showInfo'>点我</a>説明: このようにすると、クリック後のアドレスのジャンプは発生しません。
2. stop: イベントのバブリングを防止します (またはメソッドで e.stopPropagation() を使用します)。
3. 1 回: イベントは 1 回だけトリガーされます
4.キャプチャ: イベントのキャプチャモードを使用します。
5. self: デフォルトのイベントをブロックするのと同様に、event.target が現在の操作である要素のみがイベントをトリガーします。
6. パッシブ: イベントのデフォルトの動作は、イベント コールバックの実行を待たずにすぐに実行されます (モバイル端末やタブレットで一般的に使用されます)
<body>
<ul @wheel.passive='demo' class='list'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script type='text/javascript'>
methods: {
demo() {
for(i = 0; i < 1000; i++) {
console.log('666')
}
console.log('累死了')
}
}
</script>
イベント処理
<template>
<button @click="clickme($event, 666)">点我传个数据</button>
</template>
<script>
export default {
data() {
return {}
},
methods: {
clickme(e, number) {
console.log(e.target.innerText, number);
}
}
}
</script>
キーボードイベント
1. よく使用されるボタンのエイリアス
1. Enter キーを押します
<template>
<input type="text" placeholder="按下回车显示输入" @keyup.enter="showInfo">
</template>
<script>
export default {
data() {
return {}
},
methods: {
showInfo(e) {
console.log(e.target.value);
}
}
}
</script>
2. 削除 = "delete (「delete」キーと「backspace」キーをキャプチャ)
3.終了=>esc
4. スペース = 「スペース」
5. 改行=>タブ (@keydown.tab)
6. 上=>上
7. 下 => 下
8、左 =》 left
9、右 =〉 right
2. システム修飾キー (ctrl、alt、shift、meta)
(1) キーアップと併用: 修飾キーを同時に押し、次に他のキーを押し、他のキーを放すとイベントがキャプチャされます。
(2) キーダウンと併用: 通常イベントをトリガーします
3. カスタムキー名
Vue.config.keyCodes.huiche = 13要約する
イベント修飾子は連続して記述することができます。
ブロックはデフォルトで泡立ちも防ぎます
<a href='http://www.cc.com' @click.stop.prevent='clickme'>点我</a>修飾キーは、ctrl+y を押すことによってのみトリガーできます。
<input type="text" placeholder="按下回车显示输入" @keydown.ctrl.y="showInfo">