company_banner

Vue.js для начинающих, урок 2: привязка атрибутов

Автор оригинала: vuemastery.com
  • Перевод
  • Tutorial
Это второй урок учебного курса по Vue.js для начинающих, который рекомендует Наталья Теплухина, Staff Engineer в Gitlab и Core Team Member фреймворка Vue (Q/A сессия с Наташей прошла в нашем инстаграм, а расшифровку можно прочитать здесь)

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



Vue.js для начинающих, урок 1: экземпляр Vue
Vue.js для начинающих, урок 2: привязка атрибутов
Vue.js для начинающих, урок 3: условный рендеринг
Vue.js для начинающих, урок 4: рендеринг списков
Vue.js для начинающих, урок 5: обработка событий
Vue.js для начинающих, урок 6: привязка классов и стилей
Vue.js для начинающих, урок 7: вычисляемые свойства
Vue.js для начинающих, урок 8: компоненты

Цель урока


Здесь мы разберёмся с тем, как, используя привязку атрибутов, вывести изображение, и задать текст атрибута 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. Сокращённая запись этой директивы выглядит как двоеточие (:).
  • Имя атрибута, которое идёт за двоеточием, указывает на атрибут, к которому осуществляется привязка данных.
  • В качестве значения атрибута, указываемого в кавычках, используется имя ключа, по которому можно найти данные, подключаемые к атрибуту.

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

Vue.js для начинающих, урок 1: экземпляр Vue
Vue.js для начинающих, урок 2: привязка атрибутов
Vue.js для начинающих, урок 3: условный рендеринг
Vue.js для начинающих, урок 4: рендеринг списков
Vue.js для начинающих, урок 5: обработка событий
Vue.js для начинающих, урок 6: привязка классов и стилей
Vue.js для начинающих, урок 7: вычисляемые свойства
Vue.js для начинающих, урок 8: компоненты

RUVDS.com
VDS/VPS-хостинг. Скидка 10% по коду HABR

Комментарии 10

    +2
    Почти 6 тысяч символов для того, что бы разобраться с тем, как, используя привязку атрибутов, вывести изображение, и задать текст атрибута alt.
      0
      тяжело в учении, легко в бою :)
      +5
      Я прям представляю, как человек учится по таким урокам:
      — тааак, подключил вью, вывел текст, на сегодня хватит.
      спустя 4 дня:
      — юху, скоро я стану программистом, добавлю сегодня атрибут к изображению. Вау, работает, ну все, можно создавать портфолио, как раз скидочка на сервера есть в статье.

      Но это, так, шучу. На самом деле подобных разжевываний, как в этой статье, очень не хватает когда ты совсем новичек. Так и не начал учить программирование в школе, из-за того что попадались слишком сложные книги. Проблема только в том, что новички сюда не должны лезть, они сначала должны выучить JS как минимум. А дальше, уже владея азами, чем раньше человек начнет читать офф доку, тем быстрее он будет становится похожим на взрослую особь программиста.
        +1
        остался нераскрытым самый главный вопрос: почему заголовок мы выводим через фигурные скобки, а значения атрибутов через в-бинд или через двоеточие? где логика?
          0
          Мне тоже не понятно как так.
            0
            Mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive
            vuejs.org/v2/guide/syntax.html
              0

              Возможно, они хотели, чтобы разметка была валидным html-кодом, потому и не сделали очевидный еще со времен Реакта
              <img src={{image}} />


              Но с другой стороны, разве <img :src=“...” /> — это валидный html?

              +1
              А на jQuery в три строчки это сделать нельзя разве?
                0

                В jQuery нет (и не может быть) реактивности. Это очень важно. Фишка всех фреймворков за последние 5-10 лет — это именно реактивность. Кто-то случайно догадался, что подход, который уже сто лет применяется в экселе (а до экселя еще и в древних табличных процессорах, работающих в текстовом режиме 80x25 под дос), отлично ложится и на фронтенд тоже. И понеслась, спали шоры с глаз у целой индустрии. (Похожая фигня произошла с async-await на серверной стороне, кстати. То, что двадцатилетие было перед носом, никто из нас просто не замечал.)

                  0
                  В стиле Экселя — это значит примерно так: Кликаем мышкой A1, затем на клавиатуре "+", далее кликаем мышкой B1, затем знак "=" на клавиатуре, затем кликаем мышкой С1 и в С1 видим результат сложения A1 и B1. Я правильно понимаю, это и есть реактивность в стиле Эксель? А то я часто слышу этот термин, а что конкретно он значит я так и не понял. Я просто подумал, что это маркетинговый ход, чтобы поднять стоимость продукта, и капитализацию компании соответственно. Т.к. по часам разработки это гораздо больше, чем простой jQuery.

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

              Самое читаемое