Упражнение. Привязка к атрибутам

Завершено

Предположим, вам нужно отобразить изображение космического круиза для ваших клиентов. Так как каждый тип круизного приключения имеет другое изображение, и, возможно, другой стиль, вы хотите добавить свойства изображения в объект данных для вашего приложения.

Добавление свойств в объект данных

В предыдущем упражнении вы создали метод data() внутри объекта App. Теперь добавьте свойства для изображения.

1. Откройте файл index.js.

2. Сразу после строки // additional properties laterдобавьте следующий код.

   productImage: 'assets/cruise.jpg',
   productImageDescription: 'An astronaut floats outside the window while you sit in comfort',
   productImageStyle: {
       'border-radius': '15px'
   }
   

Файл index.js теперь содержит следующий код.

const app = Vue.createApp({
    data() {
        return {
            productName: 'Book a Cruise to the Moon',
            productDescription: 'Cruise to the moon in our luxurious shuttle. Watch the astronauts working outside the International Space Station.',
            // additional properties later
            productImage: 'assets/cruise.jpg',
            productImageDescription: 'An astronaut floats outside the window while you sit in comfort',
            productImageStyle: {
                'border-radius': '15px'
            }
        }
    },
});

Добавление HTML

Теперь обновите HTML, чтобы он включал изображение. Атрибуты и стиль задаются с помощью привязки атрибутов.

1. Откройте файл index.html .

2. Сразу после строки <div>{{ productDescription }}</div>добавьте следующий HTML-код.

   <img :src="productImage" :alt="productImageDescription" :style="productImageStyle" />
   

   Теперь весь элемент div для приложения должен выглядеть, как в следующем коде.

   <div id="app">
       <h2>{{ productName }}</h2>
       <div>{{ productDescription }}</div>
       <img :src="productImage" :alt="productImageDescription" :style="productImageStyle" />
   </div>
   

   Обратите внимание, что для всех атрибутов используется сокращенная нотация :attribute. Такое использование делает код более удобочитаемым, чем более длинный формат v-bind:attribute.

Проверка результатов

1. Сохраните все файлы.

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

   

3. Щелкните изображение правой кнопкой мыши и выберите Inspect (Проверить) или Inspect source (Проверить источник). Обратите внимание на средства разработчика в браузере и HTML. Обратите внимание, что в HTML-коде src и alt установлены на значения из данных Vue.

   <img src="assets/cruise.jpg" alt="An astronaut floats outside the window while you sit in comfort">
   

Знакомство с возможностями

Теперь у вас есть полностью функциональное приложение Vue.js. При изменении некоторых значений и свойств можно увидеть, как изменения отражаются на странице.

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