Практическая работа для студентов по теме "Вывод изображений на веб-страницу в фреймворке VUE"

МЕТОДИЧЕСКИЕ  РЕКОМЕНДАЦИИ  ДЛЯ   ОБУЧАЮЩИХСЯ	ОГАПОУ «Ульяновский авиационный колледж – МЦК»
	ПРОФЕССИИОНАЛЬНЫЙ ЦИКЛ
	ПМ09 «Проектирование разработка и оптимизация веб-приложений» Практическая работа   Вывод изображений на веб-страницу в фреймворке VUE для специальности СПО 09.02.07 Информационные системы и программирование  (Квалификация – Разработчик веб и мультимедийных приложений) Ульяновск 2023

Тема «Вывод изображений на веб-страницу в фреймворке VUE

.

Цель: Научиться выводить изображения, с использованием фреймворка vue.

Необходимое оборудование и программное обеспечение: персональный компьютер с операционной системой windows v.10, редактор кода (visual studio code или PhpStorm), браузер (Google Chrome или аналог).

Вопросы по самоподготовке

1.      Различие между локальной и глобальной регистрацией компонентов

2.      Компоненты Vue. Импорт.

3.      Хуки жизненого цикла vue js

4.      Загрузчик vite

5.      Преимущества vite перед webpack.

6.      Средства отладки проекта vue devTools.

Теоретическая часть:

Vue.js — это JavaScript-фреймворк для создания пользовательских интерфейсов с упором на одностраничные приложения. Vue.js легкий и высокопроизводительный, удобен для разработчиков, имеет низкий порог входа, очень гибкий и имеет отличные инструменты. Фреймворк (framework) можно рассматривать как некий каркас для создания приложений на определенном языке программирования.

Экземпляр Vue, который часто называют vmVue, является моделью ViewModel шаблона MVVM, которому следует Vue. Экземпляр Vue является корнем приложения Vue. Создается новый экземпляр Vue и монтируется к элементу HTML, содержащему идентификатор #app.

Порядок выполнения работы:

1.      Создадим проект (vue create showimage);

2.      Выбираем конфигурацию на vue3

3.      Удаляем из папки components файл HelloWorld.vue

4.      Убираем лишнее в App.vue

Создаем основной скелет страницы

Подберем восемь изображений и поместим их в папку src\assets

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

В самом шаблоне файла app.vue реализуем вывод изображений

Для правильного отображения используем для верстки стили Flex

В браузере отобразится страница

Задание

Используя компоненты создать оптимизированный код, перенеся вывод изображений в компонент ImageShows

Список использованных источников

1.      Даккет, Д., Javascript и jQuery. Интерактивная веб-разработка / Д. Даккет. – М. : Эксмо, 2017. – 640 с.: ISBN: 978-5-699-80285-2

2.      Хэнчетт Э., Листоун Б., Vue.js в действии/ Э.Хэнчетт, Б Листоун – СПб : Питер, 2019.-304с. : ISBN 978-5-4461-1098-8

3.      https://v3.ru.vuejs.org/ [Электронный ресурс]

4.      https://habr.com/ru/post/329452/ [Электронный ресурс]