Синтаксис шаблонов Vue3

Vue использует синтаксис шаблонов на основе HTML, который позволяет разработчикам декларативно связывать DOM с данными базового экземпляра Vue.

В основе Vue лежит система, которая позволяет декларативно отображать данные в DOM с помощью лаконичного синтаксиса шаблонов.

В сочетании с системой реактивности, когда состояние приложения изменяется, Vue может интеллектуально вычислять минимальную стоимость повторного рендеринга компонентов и применять её к операциям DOM.

Пример

<template>
  <div>
    <!--Интерполяция-->
    <p>{{ message }}</p>
   
    <!-- v-bind -->
    <a :href="url">Ссылка</a>
   
    <!-- v-на -->
    <button @click="handleClick">Нажми меня</button>
   
    <!-- v-for -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

Интерполяция

Текст

Наиболее распространённая форма привязки данных — использование{{...}}текстовой интерполяции с двойными фигурными скобками:

Текстовая интерполяция

<div id="app"> <p>{{ message }}</p> </div>

Попробуйте сами »

{{...}}Содержимое тега будет заменено значением свойстваmessageсоответствующего экземпляра компонента; если значение свойстваmessageизменится,{{...}}содержимое тега также обновится.

Если вы не хотите изменять содержимое тега, можно использоватьv-onceдирективу для выполнения однократной интерполяции. Когда данные изменятся, содержимое в точке интерполяции не обновится.

<span v-once>这个将不会改变: {{ message }}</span>

Html

Используйте директиву v-html для вывода HTML-кода:

Директива v-html

<div id="example1" class="demo"> <p>Текстовая интерполяция с использованием двойных фигурных скобок: {{ rawHtml }}</p> <p>Использование директивы v-html:<span v-html="rawHtml"></span></p> </div> <script> const RenderHtmlApp = { data() { return { rawHtml: '<span style="color: red">Это будет отображаться красным!</span>' } } } Vue.createApp(RenderHtmlApp).mount('#example1') </script>

Попробуйте сами »

Атрибуты

Для значений в HTML-атрибутах следует использовать директиву v-bind.

<div v-bind:id="dynamicId"></div>
Для булевых атрибутов традиционными значениями являются true или false. Если значение атрибута — null или undefined, атрибут не будет отображаться.
<button v-bind:disabled="isButtonDisabled">按钮</button>

В приведённом выше коде, если значение isButtonDisabled равно null или undefined, атрибут disabled даже не будет включён в отрендеренный элемент <button>.

В следующем примере проверяется значение use. Если оно true, используется стиль class1; в противном случае этот класс не используется:

Директива v-bind

<div id="app"> <label for="r1">Изменить цвет</label><input type="checkbox" v-model="use" id="r1"> <br><br> <div v-bind:class="{'class1': use}">директива v-bind:class</div> </div> <script> const app = { data() { return { use: false } } } Vue.createApp(app).mount('#app') </script>

Попробуйте сами »

Выражения

Vue.js обеспечивает полную поддержку выражений JavaScript.

Выражения JavaScript

<div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">Пример</div> </div> <script> const app = { data() { return { ok: true, message: 'EXAMPLE!!', id: 1 } } } Vue.createApp(app).mount('#app') </script>

Попробуйте сами »

Выражения анализируются как JavaScript в области данных текущего активного экземпляра. Есть ограничение: каждая привязка может содержать только одно выражение, поэтому следующие примеры не будут работать:

<!--  这是语句，不是表达式：-->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

Директивы

Директивы — это специальные атрибуты с префиксом v-.

Директивы используются для применения определённого поведения к DOM, когда значение выражения изменяется. См. следующий пример:

Пример

<div id="app"> <p v-if="seen">Теперь вы видите меня</p> </div> <script>const app = { data() { return { seen: true /* Change to false, and the message will not be displayed */ } } } Vue.createApp(app).mount('#app')</script>

Попробуйте сами »

Здесь директива v-if решит, вставлять ли элемент p, исходя из значения выражения seen (true или false).

Существует много других директив, каждая с определённой функцией. Например, директива v-for может привязывать данные из массива для отображения списка элементов:

Пример

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Example' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Попробуйте сами »

Аргументы

Аргументы указываются после директивы с помощью двоеточия. Например, директива v-bind используется для реактивного обновления атрибутов HTML:

Пример

<div id="app"> <p><a v-bind:href="url">Пример</a></p> </div> <script> const app = { data() { return { url: 'https://www.example.com' } } } Vue.createApp(app).mount('#app') </script>

Попробуйте сами »

Здесь href — это аргумент, указывающий директиве v-bind привязать атрибут href элемента к значению выражения url.

Другой пример — директива v-on, которая используется для прослушивания событий DOM:

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

Здесь аргументом является имя прослушиваемого события.

Модификаторы

Модификаторы обозначаются точкой половинной ширины.как специальные суффиксы, используемые для указания, что директиву следует привязать особым образом. Например,.preventМодификатор указывает директивеv-onвызвать для вызванного событияevent.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

Пользовательский ввод

В поле ввода мы можем использовать директиву v-model для реализации двусторонней привязки данных:

Двусторонняя привязка данных

<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> const app = { data() { return { message: 'Example!' } } } Vue.createApp(app).mount('#app') </script>

Попробуйте сами »

v-modelДиректива используется для создания двусторонней привязки данных к элементам управления формы, таким как input, select, textarea, checkbox и radio. Основываясь на значениях в форме, она автоматически обновляет значения связанных элементов.

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

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

Обращение строки

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример теста Vue - Пример (example.com)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Перевернуть строку</button> </div> <script> const app = { data() { return { message: 'Example!' } }, methods: { reverseMessage() { this.message = this.message .split('') .reverse() .join('') } } } Vue.createApp(app).mount('#app') </script>

Попробуйте сами »

Сокращения

Сокращение v-bind

Vue.js предоставляет специальные сокращения для двух наиболее часто используемых директив:

<!-- 完整语法 -->
<a v-bind:href="url.html"></a>
<!-- 缩写 -->
<a :href="url.html"></a>

Сокращение v-on

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
Другие расширения