Отличие от @click и v-on: нажмите Vuejs

Ответ 1

Между ними нет никакой разницы, одна из них является сокращением для второго.

Префикс v- служит визуальным сигналом для идентификации атрибутов Vue в ваших шаблонах. Это полезно, когда вы используете Vue.js для применения динамического поведения к некоторой существующей разметке, но можете чувствовать себя многословным для некоторых часто используемых директив. В то же время необходимость префикса v- становится менее важной, когда вы создаете SPA, где Vue.js управляет каждым шаблоном.

<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>

Источник: официальная документация.

Ответ 2

v-bind и v-on - две часто используемые директивы в vuejs html-шаблоне. Поэтому они предоставили сокращенное обозначение для обоих из них следующим образом:

Вы можете заменить v-on: с помощью @

v-on:click='someFunction'

как:

@click='someFunction'

Другой пример:

v-on:keyup='someKeyUpFunction'

как:

@keyup='someKeyUpFunction'

Аналогично, v-bind с:

v-bind:href='var1'

Может быть написано как:

:href='var1'

Надеюсь, поможет!

Ответ 3

Они могут немного отличаться от обычного HTML, но: и @являются допустимыми символами для имен атрибутов, и все поддерживаемые Vue.js браузеры могут правильно его разобрать. Кроме того, они не отображаются в окончательной разметке. Сокращенный синтаксис полностью необязателен, но вы, вероятно, оцените его, когда узнаете больше о его использовании позже.

Источник: официальная документация.