Синтаксис шаблонов Vue.js

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

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

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

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

Текст

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

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

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

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

Html

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

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

<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>Пример</h1>' } }) </script>

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

Атрибуты

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

В следующем примере проверяется значение use; если оно истинно, применяется стиль 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> new Vue({ el: '#app', data:{ use: false } }); </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> new Vue({ el: '#app', data: { ok: true, message: 'EXAMPLE', id : 1 } }) </script>

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

Директивы

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

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

Пример

<div id="app"> <p v-if="seen">Теперь вы видите меня</p> </div> <script> new Vue({ el: '#app', data: { seen: true } }) </script>

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

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

Аргументы

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

Пример

<div id="app"> <pre><a v-bind:href="url">Пример</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.example.com' } }) </script>

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

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

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

<a v-on:click="doSomething">

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

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

Модификаторы обозначаются полуширинной точкой.специальными суффиксами, которые используются, чтобы указать, что директиву следует привязать особым образом. Например,.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> new Vue({ el: '#app', data: { message: 'Example!' } }) </script>

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

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

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

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

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

<div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Перевернуть строку</button> </div> <script> new Vue({ el: '#app', data: { message: 'Example!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script>

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

Фильтры

Vue.js позволяет определять пользовательские фильтры, которые используются для некоторого распространённого форматирования текста. Обозначается «символом вертикальной черты», формат следующий:

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

Функция фильтра принимает значение выражения в качестве первого аргумента.

В следующем примере первая буква входной строки преобразуется в верхний регистр:

Пример

<div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'example' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>

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

Фильтры можно объединять в цепочки:

{{ message | filterA | filterB }}

Фильтры — это функции JavaScript, поэтому они могут принимать аргументы:

{{ message | filterA('arg1', arg2) }}

Здесь message — первый аргумент, строка 'arg1' будет передана фильтру в качестве второго аргумента, а значение выражения arg2 будет вычислено и затем передано фильтру в качестве третьего аргумента.

Сокращения

Сокращение 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>

Другие расширения