Ім'я файлу: ІТ1.docx
Розширення: docx
Розмір: 1529кб.
Дата: 22.03.2023
скачати
Пов'язані файли:
%D0%9B_6.pdf
1.Таблица строки Новий КПК.doc
7 Пам’ятка про процесуальні права та обов’язки потерпілого.docx
N_2021_VІІ_Конф_Медико-біологічні-проблеми-фізичного-виховання-р
N_2021_VІІ_Конф_Медико-біологічні-проблеми-фізичного-виховання-р
Stasenko.pdf
СоцТест.docx
8.docx

Національний авіаційний університет

Кафедра комп’ютеризованих систем управління

Інтернет технології

ЗВІТ

з лабораторної роботи № 1

Тема: Створення екземпляру Vue. Прив’язка атрибутів


Перевірила: .


Київ 2023

Мета: навчитися використовувати Vue для виведення даних на веб сторінку.
Хід роботи

Створюю всі необхідні файли для роботи з веб (index.html, index.js, style.css). Копіюю стилі із додатку А у style.css та підключаю його до сторінки за допомогою тегу




Далі підключаю Vue до нашого вебу. Так як посилання на імпорт в мене не працювало, я знайшов інпорт на stack overflow та підключив до вебу наступний Vue




Далі крок за кроком я наповнював index.js відповідно до лабораторної роботи.

Додав фотографію через Vue фреймворк

Результат додавання фотографії до сторінки

Наступна інструкція з додаванням bind до alt в тег img в мене нічого не вивела, але в остаточному коді, видно, що Vue зробив підміну значень



Результат роботи v:bind до alt в тезі img
Домашнє завдання
Додав всі необхідні параметри та замінив динамічно їх значення за допомогою Vue фреймворку

Р езультат домашньої роботи

При натисканні на посилання, відкривається наступний сайт



Сайт на який ми посилалися через текст
Весь фінальний код буде представлений нижче, після контрольних запитань.
Контрольні запитання

  1. Як створити екземпляр Vue? Для створення нового екземпляру Vue для початку треба підключити фреймворд до сторінки, а потім прописати простий виклик конструктора за допомогою команди new Vue({}) і передати в фігурні скобки об’єкт.

  2. Які є способи виводити дані на веб-сторінку. Особливості синтаксису Mustache який використовується для виводу даних на сторінку. За допомогою чого можна прив’язувати дані які зберігаються в екземплярі Vie до HTML-атрибутів.

На веб сторінку дані можна виводити двома способами – Динамічно та статично.

Статично – вказавши звичайні параметри як текст, заголовки і тд, те, що не змінюється фреймворком, а передбачено програмістом на початку.

Динамічно – заміна існуючих, або ні значень для того, щоб досягти зміни тексту/кольору/зоображення та інших можливих мультимедійних засобів.

Особливості синтаксису Mustache полягає в динамічному заміщенню тексту за допомогою Vue змінних, які містять текст. Нам достатньо на HTML сторінці написати {{назваVueзмінної}} і замість змінної виведеться текст.

До html атрибутів можна прив’язувати змінні Vue за допомогою команди v-bind:НазваАтрибуту=”Назва Vue змінної” в такому випадку Vue замінить значення зі змінної на текст. Існує скорочена форма запису :НазваАтрибуту=”Назва Vue змінної” яка більш лаконічна і не вимагає запам'ятовувати текст команди.

  1. Що використовується у якості значення атрибута яке вказується в лапках. Якщо в тезі цей атрибут має приставку v-bind:, : тоді його значення має відповідати Vue змінній, але якщо ні то звичайний текст, або html key words


Додаток А

Index.js

let app = new Vue({

el: '#app',

data: {

product: "Шкарпетки",

description: "Пара теплих шкарпеток",

text: "«Більше подібних продуктів»",

link:"https://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=socks.",

image: "img/vmSocks-green.jpg",

textAlt: "Пара шкарпеток"

}

})

Index.html


















{{ product }}




{{description}}


{{text}}











скачати

© Усі права захищені
написати до нас