08.07.2020 13:16
ru_vds 6 4700 Источник
Это второй урок учебного курса по Vue.js для начинающих, который рекомендует Наталья Теплухина, Staff Engineer в Gitlab и Core Team Member фреймворка Vue (Q/A сессия с Наташей прошла в нашем инстаграм, а расшифровку можно прочитать здесь)

Во втором уроке речь пойдёт о привязке атрибутов, о подключении данных, хранящихся в экземпляре Vue, к атрибутам HTML-элементов.



> Первый урок

Цель урока


Здесь мы разберёмся с тем, как, используя привязку атрибутов, вывести изображение, и задать текст атрибута alt. Соответствующие данные мы возьмём из экземпляра Vue.

Начальный вариант кода


Начнём работу с такого HTML-кода, находящегося в файле index.html, в теге <body>:

<div id="app">

  <div class="product">

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

    <div class="product-info">
      <h1>{{ product }}</h1>
    </div>

  </div>
</div>

Обратите внимание на тег <div> с классом product-image. Именно в нём содержится элемент <img>, к которому мы хотим динамически привязать данные, необходимые для вывода изображения.

Элемент <div> с классом product-info используется для вывода названия товара.

Вот JavaScript-код, содержащийся в файле main.js:

var app = new Vue({
    el: '#app',
    data: {
        product: "Socks",
        image: "./assets/vmSocks-green.jpg"
    }
})

Обратите внимание на то, что в объекте data теперь имеется новое свойство image, содержащее путь к изображению.

> Здесь можно найти CSS-код, используемый в этом уроке.

Для подключения стиля к index.html нужно добавить в тег <head> следующее:

<link rel="stylesheet" type="text/css" href="style.css"

Тут мы исходим из предположения о том, что файл со стилями имеет имя style.css и хранится в той же папке, что и index.html.

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

Задача


Нам нужно, чтобы на странице вывелось бы изображение. При этом мы хотим динамически управлять этим изображением. То есть, нам нужна возможность, позволяющая менять путь к изображению, хранящийся в экземпляре Vue, и тут же видеть результаты этих изменений на странице. Так как именно атрибут src элемента <img> отвечает за то, какое изображение выведет элемент, нам нужно привязать некие данные к этому атрибуту. Это и позволит нам динамически, основываясь на данных, хранящихся в экземпляре Vue, менять изображение.

Важный термин: привязка данных


Когда мы говорим о привязке данных во Vue, смысл этого заключается в том, что место в шаблоне, в котором используются или выводятся данные, напрямую «подключено», или «связано» с источником данных, то есть — с соответствующим объектом, хранящимся в экземпляре Vue.

Другими словами, сущность-источник данных, связана с сущностью, в которой эти данные используются, с приёмником данных. В нашем случае источник данных — это экземпляр Vue, а приёмник — это атрибут src элемента <img>.

Решение задачи


Для того чтобы привязать значение свойства image из объекта с данными к свойству src тега <img>, мы воспользуемся директивой Vue v-bind. Перепишем код тега <img> из файла index.html:

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

Когда Vue, обрабатывая страницу, видит такую конструкцию, фреймворк заменяет её на следующий HTML-код:

<img src="./assets/vmSocks-green.jpg" />

Если всё сделано правильно, то на странице будет выведено изображение.


Изображение зелёных носков выведено на странице

А если поменять значение свойства image объекта data, то соответствующим образом изменится и значение атрибута src, что приведёт к выводу на странице нового изображения.

Предположим, нам надо заменить изображение зелёных носков на изображение синих. Для этого, учитывая то, что путь к файлу с новым изображением выглядит как ./assets/vmSocks-blue.jpg (файл изображения можно найти здесь), достаточно привести код описания свойства image в объекте data к такому виду:

image: "./assets/vmSocks-blue.jpg"

Это приведёт к тому, что на странице появится изображение синих носков.


Изображение синих носков выведено на странице

Дополнительные варианты использования v-bind


Директиву v-bind можно использовать не только с атрибутом src. Она может помочь нам и в динамической настройке атрибута изображения alt.

Добавим в объект с опциями data новое свойство altText:

altText: "A pair of socks"

Привяжем соответствующие данные к атрибуту alt, приведя код элемента <img> к такому виду:

<img v-bind:src="image" v-bind:alt="altText" />

Здесь, как и в случае с атрибутом src, используется конструкция, состоящая из v-bind, двоеточия и имени атрибута (alt).

Теперь, если в данных экземпляра Vue изменятся свойства image или altText, в соответствующие атрибуты элемента <img> попадут обновлённые данные. При этом связь атрибутов элемента и данных, хранящихся в экземпляре Vue, не нарушится.

Этот приём постоянно используется при разработке Vue-приложений. Из-за этого существует сокращённый вариант записи конструкции v-bind:имяатрибута. Он выглядит как :имяатрибута. Если использовать этот приём при написании кода тега <img>, то получится следующее:

<img :src="image" />

Это просто и удобно. Данный приём улучшает чистоту кода.

Практикум


Добавьте на страницу ссылку (элемент <a>) с текстом More products like this. В объекте data создайте свойство link, содержащее ссылку https://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=socks. Свяжите, используя директиву v-bind, свойство link с атрибутом href элемента <a>.

> Вот заготовка, которую вы можете использовать для решения этой задачи.

> Вот решение задачи.

Итоги


Вот что мы сегодня изучили:

  • Данные, хранящиеся в экземпляре Vue, можно привязывать к HTML-атрибутам.
  • Для привязки данных к атрибутам используется директива v-bind. Сокращённая запись этой директивы выглядит как двоеточие (:).
  • Имя атрибута, которое идёт за двоеточием, указывает на атрибут, к которому осуществляется привязка данных.
  • В качестве значения атрибута, указываемого в кавычках, используется имя ключа, по которому можно найти данные, подключаемые к атрибуту.

Если вы проходите этот курс — просим вас рассказать о том, какую среду вы используете для выполнения домашних заданий.

> Часть 1: Создание экземпляра Vue
> Часть 2: Привязка атрибутов в Vue