Vue 3

Курс для новичков: Урок 05.


Главная Vue 3 Курс для новичков Vue 3 01 02 03 04 05 06 07 08 09 10 11


Урок 5 :: List Rendering :: Отображение списка


Вот, что мы с Вами сделаем на этом уроке.
Vue Mastery
Пройдем по этой ссылке:
List Rendering ➳

... Все внимательно послушаем, посмотрим, прочитаем.

Затем сделаем конспект (мой см ниже).

Конспект

Отображение списка
В этом уроке мы рассмотрим концепцию отображения списка.

Чтобы начать этот урок, вы можете либо получить программой git коммандой checkout исходный код в ветке L5-start репозитория, либо перейти в CodePen, чтобы взять файлы там.

Примечание переводчика

Чтобы перейти на ветку с файлами начала урока 5 выполните команду:

git checkout L5-start

Наша Цель
Отобразить на HTML странице список из массива в нашем объекте data.

Циклическое перемещение по массивам данных
В исходном коде у нас теперь есть массив деталей (array of details).

📄 main.js 
const app = Vue.createApp({
    data() {
        return {
            ...
            details: ['50% cotton', '30% wool', '20% polyester']
        }
    }
})

Теперь возникает вопрос: как мы можем отобразить эти данные в виде списка?

Мы начнем с создания неупорядоченного списка в нашем index.html. На li внутри него мы добавим еще одну директиву Vue: v-for.

📄 index.html 
<ul>
  <li v-for="detail in details">{{ detail }}</li>
</ul>

Внутри v-for выражения мы написали: detail in details. Здесь details относится к массиву details в наших данных, а detail - это псевдоним текущего элемента из этого массива, который мы проходим по циклу, отображая каждый элемент массива в новом li.

Каждый li будет отображать этот элемент массива, потому что во внутреннем HTML мы написали выражение: {{ detail }} для отображения каждого элемента массива.

Если мы проверим браузер, мы увидим, что отображается список всех элементов массива details.
les05_pic01.jpg
Пока все хорошо, но как на самом деле работает v-for?

Варианты Цветов Товара
Чтобы лучше ознакомиться с визуализацией списков с помощью v-for, мы рассмотрим другой пример в нашем приложении. Давайте добавим новый массив variants (варианты) в наши данные:

📄 main.js 
data() {
  return {
    ...
    variants: [
      { id: 2234, color: 'green' },
      { id: 2235, color: 'blue' }
    ]
  }
}

Теперь у нас есть массив, содержащий объект для каждого варианта нашего продукта. Каждый вариант продукта имеет идентификатор (id) и цвет (color). Поэтому для нашей следующей задачи мы распечатаем каждый вариант цвета и используем идентификатор (id), чтобы помочь Vue отслеживать элементы нашего списка.

📄 index.html 
<div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>

Обратите внимание на то, как мы используем точечную нотацию для отображения каждого варианта (variant) при циклическом просмотре массива вариантов (variants). Но что атрибут :key здесь делает?

Ключевой атрибут: Необходимость для элементов списка
Набрав строку :key="variant.id", мы используем сокращение для v-bind, чтобы привязать идентификатор варианта id к ключевому атрибуту key. Это дает каждому элементу DOM уникальный ключ, чтобы Vue мог ухватиться за элемент и не потерять его по мере обновления в приложении.

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

Задача кодирования
Мы подошли к концу этого урока, теперь будем решать новые задачи кодирования.

Вот, что надо сделать.

Добавьте массив размеров sizes в объект data.

Используйте v-for для отображения размеров (sizes) в списке.

Вы можете найти код решения, загрузив L5-end ветвь репозитория или просмотрев решение в Codepen.

Чтобы перейти на ветку с файлами окончания урока 5 выполните команду:

git checkout L5-end

Код файла index.html данного урока

    <div id="app">
      <div class="nav-bar"></div>
      
      <div class="product-display">
        <div class="product-container">
          <div class="product-image">
            <img v-bind:src="image">
          </div>
          <div class="product-info">
            <h1>{{ product }}</h1>
            <p v-if="inStock">In Stock</p>
            <p v-else>Out of Stock</p>
            <ul>
              <li v-for="detail in details">{{ detail }}</li>
            </ul>
            <!-- solution -->
            <ul>
              <li v-for="(size, index) in sizes" :id="index">{{ size }}</li>
            </ul>
            <!-- solution -->
            <div v-for="variant in variants" :id="variant.id">
            {{ variant.color }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Import App -->
    <script src="./main.js"></script>

    <!-- Mount App -->
    <script>
      const mountedApp = app.mount('#app')
    </script>

Код файла main.js данного урока

const app = Vue.createApp({
    data() {
        return {
            product: 'Socks :: Носки',
            image: '../assets/images/socks_blue.jpg',
            inStock: true,
            details: 
['50% cotton - хлопок', '30% wool - шерсть', '20% polyester - полиэстер'],
            // solution
            sizes: ['S', 'M', 'L', 'XL', 'Русский Размер'],
            // solution
            variants: [
              { id: 2234, color: 'green - зеленые' },
              { id: 2235, color: 'blue - голубые' },
            ]
        }
    }
})

Результат выполнения данного урока

{{ product }}

In Stock

Out of Stock

  • {{ detail }}
  • {{ size }}
{{ variant.color }}

Примечание переводчика

1. Я слегка меняю контент оригинальных файлов курса для тренировки, проверки русификации и т.д. В частности я поменял в HTML коде:
:key=
на
:id=
Т.к. мне кажется, некорректные атрибуты нельзя использовать. Проверьте сами.

2. Код для HTML я размещаю в этом файле между тегами body.

3. Обратите внимание, чтобы в консоле браузера не было ошибок.

Теперь Нажмите здесь для перехода к следующему уроку ➳

... или ...