Как использовать директиву "v-on" в Vue.js?

@caterina 

Директива "v-on" в Vue.js используется для привязки событий к элементам DOM. Она позволяет вызвать определенный метод из компонента Vue при возникновении определенного события в элементе DOM.

Например, чтобы привязать обработчик клика к кнопке, можно использовать следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

  Нажми на меня



export default {
  methods: {
    handleClick() {
      console.log('Кнопка была нажата');
    },
  },
};

Здесь мы использовали директиву "v-on:click" для привязки метода "handleClick" к событию клика на кнопке.

Можно также использовать сокращенную запись: "@click" вместо "v-on:click".

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

  Нажми на меня



export default {
  methods: {
    handleClick() {
      console.log('Кнопка была нажата');
    },
  },
};

В качестве аргумента директивы "v-on" можно передать имя события, а в качестве значения – выражение, которое будет выполнено при возникновении этого события.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

  Наведи на меня



export default {
  methods: {
    handleMouseMove(event) {
      console.log('Позиция курсора:', event.clientX, event.clientY);
    },
  },
};

Здесь мы использовали событие "mousemove" для отслеживания позиции курсора мыши при движении над кнопкой.

Директива "v-on" может также использоваться для привязки методов к событиям на пользовательских компонентах.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

  Нажми на меня



import MyButton from './MyButton.vue';

export default {
  components: {
    MyButton,
  },
  methods: {
    handleClick() {
      console.log('Кнопка была нажата');
    },
  },
};

В этом примере мы привязали метод "handleClick" к событию "click" на пользовательском компоненте "MyButton". Кнопка "Нажми на меня" будет работать точно так же, как и раньше, но ее поведение определено внутри нашего компонента.