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

Question

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

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

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

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

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

Answer 1

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

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

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

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

Answer 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'

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

Answer 3

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

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

Answer 4

Официальный источник

Официальное руководство по стилю Vue.js рекомендует придерживаться одной версии и поддерживать ее согласованность.

Сокращения директив (: для v-bind:, @ для v-on: и # для v-slot) следует использовать всегда или никогда .

Это правило определено в разделе «Настоятельно рекомендуется» .

---

Это может быть обеспечено с помощьюeslintс помощьюeslint-plugin-vueплагин и установка правила vue/v-on-style .

По умолчанию установлено сокращение.

      {
  "vue/v-on-style": ["error", "shorthand" | "longform"]
}

Пример

      <template>
  <!-- ✓ GOOD -->
  <div @click="foo"/>

  <!-- ✗ BAD -->
  <div v-on:click="foo"/>
</template>