Різниця між @click та v-on: натисніть Vuejs

160

питання повинні бути досить чіткими :). Але я бачу, що хтось використовує:

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

Хтось використовує:

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

Але насправді в чому різниця між цими двома (якщо існує)

vue.js vuejs-directive

— ЛоренцоБерті
джерело

189

Різниці між ними немає, одне - це лише стенограма для другого.

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

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

Джерело: офіційна документація .

— Кобальт
джерело

1

Чи є перевага спільноти Vue по відношенню до @ чи це просто увага JetBrains скаржитися на використання v-on?

— Кіммо Хінтіка

5

@KimmoHintikka Так, якимось чином надається перевага до ярлика (@). Правило включено в strongly-recommendedі recommendedз eslint-плагін-В'ю пресетів. github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/…

— Cobaltway

63

v-bindі v-onє двома часто використовуваними директивами в HTML шаблоні vuejs. Таким чином, вони надали скорочене позначення обом таким чином:

Ви можете замінити 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 - це дві часто використовувані директиви в HTML-шаблоні vuejs. Тож вони дали короткочасне позначення обом. Я думаю, це пояснює це питання. це також причина, що міститься в документації на ü:)

— Нітін Кумар,

Справа в тому, що відповідь була розміщена через 4 місяці, не маючи посилань, не цитуючи, і кидання в двокрапку скорочення для v-bind, що насправді може призвести до плутанини.

— Якуб Стребейко

2

Вони можуть виглядати трохи інакше, ніж звичайний HTML, але: і @ є дійсними символами для імен атрибутів, і всі підтримувані Vue.js браузери можуть правильно їх розбирати. Крім того, вони не відображаються в остаточній наданій розмітці. Синтаксис скорочень зовсім необов’язковий, але ви, ймовірно, оціните його, коли дізнаєтесь більше про його використання пізніше.

Джерело: офіційна документація .

— дхарма
джерело