Урок 5. Введение в шаблоны (интерполяцию) и директивы Vue

Все уроки по Vue расположены здесь. Напомним, что для отображения динамической информации в нашем приложении Vue нам нужны следующие инструменты:

• Место для хранения данных, которые мы будем отображать
• Синтаксис для отображения этой информации

Теперь мы знаем, что храним нашу динамическую информацию в атрибуте .data нашего объекта параметров приложения Vue, но как мы можем отображать эту информацию, если она потенциально будет продолжать изменять значения?

Vue использует шаблоны (интерполяция), означающие, что разработчик указывает, что определенный контент в нашем HTML не должен отображаться буквально, а должен заменяться соответствующими данными из приложения. Мы указываем, какое содержимое внутри нашего HTML должно быть заменено, заключив его в два слоя фигурных скобок, например:

<div id="app">
  <h2>Hello, {{ username }}</h2>
</div>

В этом примере {{ username }} будет заполнено значением имени пользователя из объекта .data приложения Vue при отображении страницы пользователю. Если значение имени пользователя изменится, значение, отображаемое пользователю, также будет изменено.

Этот тип HTML-кода, в котором динамические данные заглушены, называется шаблоном. Шаблоны содержат всю жестко закодированную информацию, отображаемую на сайте, но указывают места, где необходимо заполнить динамическую информацию.

Использование фигурных скобок для шаблонов в HTML было популяризировано фреймворком под названием "усы". В результате фигурные скобки в шаблонах часто называют “усами”. Всякий раз, когда вы хотите отобразить информацию из данных приложения Vue, вы заключаете имя свойства .data в два набора усов (фигурные скобки), и выражение будет заменено информацией о данных Vue для просмотра конечным пользователем.

Это намного проще читать и писать, чем пытаться написать ванильный JavaScript, который выбирает определенные элементы HTML и динамически обновляет их содержимое. Использование атрибутов .data и шаблонов усов - это еще один способ, с помощью которого Vue ускоряет написание интерфейсной веб-разработки, облегчает ее чтение и снижает вероятность ошибок.

Код в шаблоне

Можно написать код в шаблоны, например, если мы хотим увеличить какой-то счетчик на два вместо одного

<p>{{ counter * 2 }}</p>

Или, как оператор IF, если счетчик больше десяти, он будет показывать больше 10, но если он меньше, то меньше 10.

<p>{{ counter * 2 > 10 ? 'Greater than 10' : 'Smaller than 10'}}</p>

Директивы

Директивы - это пользовательские атрибуты HTML, встроенные в Vue, которые выполняют невероятно сложные, распространенные интерфейсные операции, практически не используя код.

Например, одной из очень распространенных потребностей интерфейса является условное отображение элементов. Допустим, мы хотим показать кнопку входа только в том случае, если пользователь еще не вошел в систему.

Мы можем добавить директиву v-if в качестве атрибута к элементам HTML, например:

<button v-if="userIsLoggedIn">Log Out</button>
<button v-if="!userIsLoggedIn">Log In</button>

v-if действует ужасно похоже на JavaScript if. Он будет отображать только тот HTML-элемент, на котором он находится, если оператор v-if возвращает значение true. В этом случае он проверит .data на наличие значения userIsLoggedIn. Тогда он будет отображать нашу кнопку “Выйти” только в том случае, если значение userIsLoggedIn истинно, и будет отображать нашу кнопку “Войти” только в том случае, если она ложна.

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

<ul>
  <li v-for="todo in todoList">{{ todo }}</li>
</ul>

Бам, точно так же, как v-for будет перебирать каждый элемент в массиве TodoList нашего .data, создаст переменную todo, содержащую каждый последующий элемент массива, и создаст li, отображающий каждый элемент в списке. Даже если в список будет добавлен новый элемент, список будет мгновенно перерисован для отображения этого нового элемента.

Еще одна супер крутая директива - v-model. v-model может быть добавлена в любое поле ввода и подключена к данным нашего приложения Vue. Изменение поля ввода приведет к автоматическому изменению указанных данных приложения Vue!

<input v-model="username" />

В приведенном выше поле ввода будет отображаться текущее значение имени пользователя в объекте данных приложения Vue и изменится значение имени пользователя, если пользователь изменит значение в этом поле. Это называется двусторонней привязкой. Это какой-то сложный JavaScript, прекрасно реализованный с очень небольшим количеством кода.

Как вы, возможно, заметили, каждая встроенная директива Vue начинается с v-. Их слишком много, чтобы я мог их охватить; просто знайте, что если нет директивы, которая делает то, что вам нужно — вы даже можете создать свою собственную! Директивы облегчают написание сложного интерфейсного кода, его легко читать и оптимизируют для обеспечения высокой производительности.

Также допустимо просто написать код в директиве, как показано в этом примере:

<button v-on:click="counter++">ClickMe</button>