Урок 3 :: Attribute Binding :: Привязка Атрибутов

Вот, что мы с Вами сделаем на этом уроке.
Vue Mastery

Пройдем по этой ссылке:
Attribute Binding ➳

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

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

Конспект

Привязка Атрибутов
В этом уроке мы рассмотрим концепцию привязки атрибутов.

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

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

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

git checkout L3-start

Наша Цель
В стартовом коде у нас есть новый div с классом product-image.

📄 index.html

<div class="product-image">
  <!-- image goes here -->
</div>

К концу урока у нас здесь будет элемент img, который будет реактивно привязан к новому изображению в наших данных (к свойству image). Всякий раз, когда значение image меняется, наше изображение обновляется в DOM.

Добавление изображения в наши данные
Помните, в нашем каталоге активов (assets) у нас есть папка с изображениями (images), и там есть файлы с изображениями зеленых и синих носков? Давайте, нацелимся на одно из этих изображений из нового свойства данных в нашем приложении Vue. Мы сделаем это, установив свойство image равным пути к изображению + сам файл изображения. Теперь это свойство может захватить изображение.

📄 main.js

const app = Vue.createApp({
    data() {
        return {
            product: 'Socks',
            image: './assets/images/socks_green.jpg'
        }
    }
})

Теперь мы готовы добавить элемент img в шаблон.

📄 index.html

<div class="product-image">
  <img src="image">
</div>

В атрибуте источника мы зафиксируем название image ("изображение"). Прямо сейчас это ничего не даст. Мы хотим, чтобы src извлек путь к изображению из наших данных, аналогично тому, как мы извлекли значение product в выражении h1 в предыдущем уроке.

Итак, вопрос здесь в следующем: как мы привязываем атрибут src к image?

Знакомство с Привязкой Атрибутов (Attribute Binding)
Чтобы создать связь между атрибутом HTML-элемента и значением из данных вашего приложения Vue, мы будем использовать директиву Vue, называемую v-bind.

📄 index.html

<img v-bind:src="image">

Теперь мы создали реактивную связь между тем, что живет в этом атрибуте "image" ("изображение"), и собственно данными изображения image, который у нас в data.

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

Понимание v-bind (v-привязки)
Как именно работает директива v-bind? Мы используем эту директиву для динамической привязки атрибута к выражению. В этом случае атрибутом является src, а выражением является все, что содержится в кавычках этого атрибута: "image".

📄 index.html

<img v-bind:src="image"> <!-- src attribute bound to the image data -->

Если вы думаете, что это не похоже на типичное выражение JavaScript, вы можете представить его так: v-bind:src="{{ image }}". Под капотом Vue собирается точно так же.

Реактивная Связь
Из-за системы реактивности Vue, если мы обновим наши данные изображения до пути, который указывает на изображение наших синих носков (image: './assets/images/socks_blue.jpg'), выражение, к которому привязан наш атрибут src, обновится, и наш браузер отобразит изображение синих носков.

Сокращение для v-bind
Использование v-bind очень популярно. Для него есть сокращение, и это просто двоеточие, вот так:

<img v-bind:src="image"> <!-- src attribute bound to the image data -->
<img :src="image"> <!-- пример использования краткой версии v-bind -->

Как вы можете себе представить, поскольку существует так много различных атрибутов HTML, существует множество вариантов использования v-bind. Например, вы можете привязать описание к атрибуту alt, привязать URL-адрес к href, привязать некоторые динамические стили к атрибуту class (класс) или style (стиль), отключить и включить кнопку и так далее.

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

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

Добавить свойство url к объекту data.

Связать url с атрибутом href тега anchor (a).

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

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

git checkout L3-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>
            <!-- solution -->
            <a :href="url">Made by Vue Mastery</a>
           <!-- solution -->
           <h3><a :href="url_rus">А перевод на русский сделан wpvi.ru</a><h3>
          </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_green.jpg',
            // solution
            url: 'https://www.vuemastery.com/',
            // solution
            url_rus: 'https://wpvi.ru/pages/vue/intro/'
        }
    }
})

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

Made by Vue Mastery

А перевод на русский сделан wpvi.ru

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

1. Я слегка меняю контент оригинальных файлов курса для тренировки, проверки русификации и т.д.

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

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

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

... или ...

Vue 3