VueJS - Отрисовка

Привет, будущая суперзвезда Vue.js! Я рад быть вашим проводником в этом захватывающем путешествии в мир отрисовки Vue.js. Как alguien, кто уже давно teaches программирование, я могу assure вас, что овладение отрисовкой похоже на обучение рисованию - это то, как мы оживляем наши цифровые полотна! Так что натянем рукава и окунемся в это!

Условная отрисовка

Представьте, что вы маг, и хотите сделать так, чтобы вещи появлялись или исчезали на вашем веб-сайте с взмахом руки. Именно это позволяет вам сделать условная отрисовка в Vue.js! Это все о том, чтобы показывать или скрывать элементы в зависимости от определенных условий.

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

Директива v-if - наш первый трюк в рукаве. Это как охранник в俱乐部е, решающий, кто попадает внутрь, а кто нет.

<div id="app">
<h1 v-if="isVisible">Now you see me!</h1>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
})
</script>

В этом примере элемент <h1> будет отображаться только если isVisible равно true. Если это false, пфу! Элемент исчезает из DOM полностью. Он не просто скрыт - он gone, как будто его и не было!

Директивы v-else и v-else-if

Теперь добавим немного больше магии в наше шоу с помощью v-else и v-else-if:

<div id="app">
<div v-if="temperature < 0">It's freezing!</div>
<div v-else-if="temperature < 20">It's cool.</div>
<div v-else>It's warm!</div>
</div>

<script>
new Vue({
el: '#app',
data: {
temperature: 25
}
})
</script>

Здесь мы создаем небольшой отчет о погоде. В зависимости от значения temperature, разные сообщения будут отображаться. Это как если бы у вас было несколько trap doors на сцене - только один может быть открыт в одно время!

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

Иногда мы хотим быть немного sneakier. В enters v-show:

<div id="app">
<h1 v-show="isVisible">I'm always here, just sometimes invisible!</h1>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
})
</script>

В отличие от v-if, v-show не удаляет элемент из DOM. Он просто прячет его с помощью CSS. Представьте это как throw an invisibility cloak на ваш элемент, вместо того чтобы сделать его исчезающим полностью.

Отрисовка списков

Теперь, когда мы освоили появление и исчезновение вещей, давайте узнаем, как создавать multiple элементы из одного шаблона. Это где list rendering comes in handy!

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

Директива v-for как magical copy machine. Она береет шаблон и дублирует его для каждого элемента в массиве или объекте.

<div id="app">
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: ['Apple', 'Banana', 'Cherry', 'Date']
}
})
</script>

В этом примере мы создаем список покупок фруктов. Директива v-for идет через каждый фрукт в нашем массиве fruits и создает новый элемент <li> для него. Это как если бы у вас была команда крошечных эльфов, каждый из которых писал бы имя фрукта на новой бумаж!

Использование v-for с объектом

v-for не только для массивов - он рабоч с объектами тоже!

<div id="app">
<ul>
<li v-for="(value, key) in person">{{ key }}: {{ value }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
person: {
name: 'Alice',
age: 28,
job: 'Developer'
}
}
})
</script>

Здесь мы отображаем информацию о человеке. Директива v-for идет через каждый property объекта person, создавая новый элемент <li> для каждой пары ключ-значение.

v-for с range

Хотите создать specific number элементов? v-for может сделать и это!

<div id="app">
<span v-for="n in 5">{{ n }} </span>
</div>

Это отобразит числа от 1 до 5. Это как если бы вы просили Vue сосчитать за вас!

Атрибут Key

Когда вы используете v-for, важно дать каждому отрисовленному элементу уникальный key. Это помогает Vue отслеживать, какие элементы были изменены, добавлены или удалены.

<div id="app">
<ul>
<li v-for="fruit in fruits" :key="fruit.id">
{{ fruit.name }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]
}
})
</script>

Представьте key как nametag для каждого элемента. Это помогает Vue identify кто есть кто, когда список изменяется.

Таблица методов

Вот удобная таблица, резюмирующая методы, которые мы learned:

Директива	Назначение	Пример
v-if	Условная отрисовка элемента	<div v-if="isVisible">Hello</div>
v-else	Альтернатива, когда v-if ложно	<div v-else>Goodbye</div>
v-else-if	Дополнительные условия	<div v-else-if="isSpecial">Special</div>
v-show	Переключение видимости элемента	<div v-show="isVisible">Always in DOM</div>
v-for	Отрисовка списка элементов	<li v-for="item in items">{{ item }}</li>

И вот оно, мои eager студенты! Мы covered основы отрисовки в Vue.js. Помните, что практика делает perfect, так что не бойтесь экспериментировать с этими концепциями. Soon, вы будете отрисовывать компоненты Vue.js как профи, создавая динамические и интерактивные веб-страницы, которые поразят ваших пользователей. Keep coding, keep learning, и, что самое главное, keep having fun!

Credits: Image by storyset