Часть 2: Директивы Vue
Введение
На прошлой неделе я нарисовал с высоты птичьего полета… Vue и его сравнение с React. Чтобы наверстать упущенное, перейдите в Часть 1. На этой неделе я хотел перейти к директивам Vue, чтобы вы могли получить представление о различиях синтаксиса рендеринга между .vue компонентами и .jsx React.
Директивы Vue
Директивы - это специальные атрибуты с префиксом
v-. Ожидается, что значения атрибутов директивы будут одним выражением JavaScript (за исключениемv-for, которое будет обсуждаться позже). Задача директивы - реактивно применять побочные эффекты к модели DOM при изменении значения ее выражения. - Vue Docs
Распространенное использование директив в шаблонах
- Если-операторы
- For-петли
- Видимость элемента на основе логического значения
- Привязка значения к элементу в локальном состоянии (аналогично поведению управляемых форм в React)
- Обработчики пользовательских событий
Если утверждения
Одним из распространенных способов их использования является отображение элементов шаблона и счетчика загрузки.
<LoadingSpinner v-if="!allProperties.length" />
Здесь я говорю Vue показывать компонент LoadingSpinner для рендеринга, только если длина моего массива allProperties равна ложному значению, известному как 0. К счастью, есть еще более семантический способ выразить это:
<LoadingSpinner v-show="!allProperties.length" />
Разве это не лучше?
Для петель
Создавать списки элементов очень просто, и есть несколько способов сделать это. Первый выглядит очень знакомым для того, к чему вы могли бы привыкнуть на любом языке и к использованию JSX. Это очень похоже, но написание связанных с JS вещей в кавычках может показаться немного странным и определенно требует некоторого привыкания. Я настоятельно рекомендую убедиться, что у вас есть приличная подсветка синтаксиса именно по этой причине. Ознакомьтесь с расширениями Vetur и vue на торговой площадке расширений VSCode.
// JSX Syntax
<ul>
{properties.map(property => <li key={property.id}>{property.address} - {property.landlord}</li>)}
</ul>
// Vue Syntax
<ul>
<li v-for="property in allProperties"
:key="property.id"
:property="property" :landlord="getLandlordById(property.landlordId)">
</ul>
// An even cooooooler way to render items in a collection via Vue is calling the v-for directive on a component itself that is destined to be an instance component =>
<Property
v-for="property in allProperties"
:key="property.id"
:property="property"
:landlord="getLandlordById(property.landlordId)"
/>
Это замечательно, потому что вы избегаете старого «кода-сэндвича» в традиционных циклах for. Ты можешь в это поверить?
Привязки модели
Допустим, вы создаете компонент во Vue (то, что React называет «управляемой формой»), где вы сохраняете значения формы в локальном состоянии через onChanges. В React вам нужно установить onChange обработчиков событий для каждого поля, если вы не можете создать динамический обработчик. В Vue вся эта onChange деловая активность обрабатывается «под капотом» и безболезненно абстрагируется для желаемой двусторонней привязки данных. Вы даже получаете доступ к методу .preventDefault, даже не вызывая его в обработчике отправки с помощью @submit.prevent=”handleSubmit”
<template>
// can also be written, more verbosely, as
// <form v-on:submit.prevent="handleSubmit" >
<form @submit.prevent="handleSubmit">
<input
type="text"
id="name"
v-model="firstName"
/>
<input
type="email"
id="email"
v-model="emailAddress"
/>
<input type="submit" />
</form>
</template>
<script>
import { mapActions } from 'vuex'
export default {
name: "Form",
data() {
return {
firstName: "",
emailAddress: ""
},
methods: {
handleSubmit() {
this.createUser({
firstName,
emailAddress
})
},
...mapActions("createUser")
}
}
</script>
Другие обработчики событий включают в себя все ваши обычные вкусы:
<button @click="coolMethodHere" /> <button @mouseover="coolMethodHere" /> // when user releases the enter key <button @keyup.enter="coolMethodHere" /> // when user attempts to copy via CTRL+C <button @keyup.ctrl.c="coolMethodHere" />
Примеры
Компонент свойств (индекс)
Форма ввода свойств
Вывод
Теперь вы можете увидеть, насколько легко контролировать рендеринг шаблонов Vue с помощью директив и событий. В некоторых случаях шаблонный код сокращается или полностью абстрагируется.
