Разница между @click и v-on: нажмите Vuejs

161

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

<button @click="function()">press</button>

Кто-то использует:

<button v-on:click="function()">press</button>

Но на самом деле какая разница между этими двумя (если существует)

vue.js vuejs-directive LorenzoBerti
источник

Ответы:

190

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

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

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

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

Cobaltway
источник
1
Есть ли предпочтения сообщества Vue в отношении @ или это просто предпочтение JetBrains жаловаться на использование v-on?
Киммо Хинтикка
5
@KimmoHintikka Да, как-то есть предпочтение ярлыку (@). Правило включено в strongly-recommendedи recommendedиз eslint-плагин-Вью пресетов. github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/…
Cobaltway
64

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'

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

Нитин Кумар
источник
@LorenzoBerti как насчет этого ответа. Это помогло вам понять больше?
Нитин Кумар
Ответ ничего не объясняет, просто приводит примеры, 1/3 из которых не соответствуют заданному вопросу. Прости.
Якуб Стребейко
v-bind и v-on - две часто используемые директивы в шаблоне vuejs html. Таким образом, они предоставили сокращенную запись для них обоих, я думаю, что это объясняет вопрос. это причина, приведенная в документации по cue js :-)
Нитин Кумар
Дело в том, что ответ был опубликован 4 месяца спустя, без ссылок, без цитирования и добавления двоеточия для V-Bind, что на самом деле может привести к путанице.
Якуб Стребейко
2

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

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

дхарма
источник