Базовое руководство по обработке событий в Vue
programming web-development javascript coding-skills learn-to-code vue vuejs event-handling-in-vue

Базовое руководство по обработке событий в Vue

16 мая 2022 г.

Как и любой фреймворк, Vue позволяет нам добавлять реактивность в наши приложения и веб-сайты с помощью событий. Самое замечательное в событиях Vue то, что они имитируют ванильный Javascript, поэтому все события, которые вы привыкли использовать в Javascript, также можно использовать во Vue.


События в Vue


Самым основным событием, часто используемым в Vue, а также в большинстве Javascript, является «щелчок». Компонент ниже представляет собой простой счетчик, который увеличивается на 1 при каждом нажатии кнопки. Для этого мы используем встроенное событие @click:


```javascript


<скрипт>


экспорт по умолчанию {


данные() {


возврат {


счетчик: 0



<шаблон>


<кнопка @click="++счетчик">


{{ прилавок }}




Поскольку мы можем писать встроенный Javascript прямо в наши события, мы можем просто написать ++counter, чтобы увеличить данные нашего счетчика. Таким образом, вышеизложенное будет увеличивать счетчик каждый раз, когда мы нажимаем кнопку и отображаем его в нашем элементе «кнопка».


Как упоминалось ранее, мы не ограничены только @click. Все остальные события Javascript тоже работают в том же формате. Это означает, что вы можете использовать:


  • @keydown

  • @mousedown

  • @указатель вниз

  • @указатель

  • @прокрутка

  • и т.д.

Мы не ограничиваемся только запуском Javascript в соответствии с нашими событиями. Мы можем запустить метод или функцию, если они определены в нашем Vue Javascript. Вот тот же код, использующий вместо этого метод:


```javascript


<скрипт>


экспорт по умолчанию {


данные() {


возврат {


счетчик: 0


методы: {


incrCounter: функция () {


++это.счетчик



<шаблон>


<кнопка @click="incrCounter">


{{ прилавок }}




v-on и @ в Vue


Возможно, вы видели события, написанные как v-on:click, а не @click. Оба они означают одно и то же и взаимозаменяемы, поэтому используйте тот, который вам удобен!


СОБЫТИЯ, специфичные для мыши


Мы можем дополнительно изменить любые события мыши, используя модификаторы «left», «middle» и «right».


Если вы запускаете событие, связанное с мышью, например щелчок или mousedown, тогда mousedown.right будет отслеживать только правые щелчки мыши, а mousedown.middle будет отслеживать только средние щелчки мыши.


```javascript



Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE