Обработка событий Vue3

Мы можем использовать директиву v-on для прослушивания событий DOM и выполнения кода JavaScript.

v-onДирективу можно сократить до@символа.

Формат синтаксиса:

v-on:click="methodName"
или 
@click="methodName"

v-on

<div id="app"> <button @click="counter += 1">Добавить 1</button> <p>Эта кнопка была нажата {{ counter }} раз.</p> </div> <script> const app = { data() { return { counter: 0 } } } Vue.createApp(app).mount('#app') </script>

Попробуйте »

Обычно нам нужно использовать метод для вызова метода JavaScript.

v-on может принимать определённый метод для вызова.

v-on

<div id="app"> <!--`greet` — это имя метода, определённого ниже--> <button @click="greet">Нажми меня</button> </div> <script>const app = { data() { return { name: 'Example' } }, methods: { greet(event) { // `methods` внутри `this` указывают на текущий экземпляр alert('Hello ' + this.name + '!') // `event` является нативным DOM-событием if (event) { alert(event.target.tagName) } } } } Vue.createApp(app).mount('#app')</script>

Попробуйте »

Помимо привязки непосредственно к методу, вы также можете использовать встроенные JavaScript-инструкции:

v-on

<div id="app"> <button @click="say('hi')">Скажи привет</button> <button @click="say('what')">Скажи что</button> </div> <script> const app = { data() { }, methods: { say(message) { alert(message) } } } Vue.createApp(app).mount('#app') </script>

Попробуйте »

Обработчики событий могут содержать несколько методов, разделённых оператором запятая:

v-on

<div id="app"> <!--Оба one() и two() выполнятся при событии click на кнопке--> <button @click="one($event), two($event)">Нажми меня</button> </div> <script>const app = { data() { }, methods: { one(event) { alert("firstEvent Handlingdevice逻辑...") }, two(event) { alert("No.二itemsEvent Handlingdevice逻辑...") } } } Vue.createApp(app).mount('#app')</script>

Попробуйте »

Модификаторы событий

Vue.js предоставляет модификаторы событий для v-on для обработки деталей DOM-событий, таких как event.preventDefault() или event.stopPropagation().

Vue.js через суффикс директивы, обозначаемый точкой., вызывает модификаторы.

  • .stop- Остановить всплытие
  • .prevent- Предотвратить событие по умолчанию
  • .capture- Остановить захват
  • .self- Слушать только события, которые срабатывают на этом элементе
  • .once- Срабатывать только один раз
  • .left- Событие левого клика
  • .right- Событие правого клика
  • .middle- Событие средней кнопки мыши (колеса прокрутки)
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

Модификаторы клавиш

Vue позволяет добавлять модификаторы клавиш к v-on при прослушивании событий клавиатуры:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

Сложно запомнить все keyCodes, поэтому Vue предоставляет псевдонимы для наиболее часто используемых клавиш:

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

Все псевдонимы клавиш:

  • .enter
  • .tab
  • .delete(Перехватывает клавиши "Delete" и "Backspace")
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

Системные клавиши-модификаторы:

  • .ctrl
  • .alt
  • .shift
  • .meta

Модификаторы кнопок мыши:

  • .left
  • .right
  • .middle

Пример

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Сделать что-нибудь</div>

.exact Модификатор

.exactМодификатор позволяет управлять событиями, запускаемыми точной комбинацией системных модификаторов.

Пример

<!-- Срабатывает, даже когда также нажаты Alt или Shift -->
<button @click.ctrl="onClick">A</button>

<!-- Срабатывает тогда и только тогда, когда нажат Ctrl -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- Срабатывает только тогда, когда не нажаты системные модификаторы -->
<button @click.exact="onClick">A</button>
Другие расширения