В этом проекте вы научитесь динамически отображать данные домашней страницы с использованием Vue.js. Этот проект предназначен для того, чтобы помочь вам понять процесс извлечения данных из JSON-файла и их отображения в компоненте Vue.js.
👀 Предпросмотр
🎯 Задачи
В этом проекте вы научитесь:
Запрашивать список постов домашней страницы с помощью Axios и связывать его с компонентом List.vue.
Реализовывать стиль и эффект макета домашней страницы, чтобы соответствовать предоставленному дизайну.
🏆 Достижения
После завершения этого проекта вы сможете:
Использовать Axios для извлечения данных из JSON-файла.
Связать извлеченные данные с компонентом Vue.js и отобразить их в шаблоне.
Стилизовать компоненты, чтобы соответствовать определенному дизайну.
Интегрировать различные компоненты Vue.js для создания полной домашней страницы.
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"])
html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"])
html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"])
html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"])
html/BasicStructureGroup -.-> html/basic_elems("Basic Elements")
html/BasicStructureGroup -.-> html/head_elems("Head Elements")
html/LayoutandSectioningGroup -.-> html/layout("Layout Elements")
html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements")
html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements")
subgraph Lab Skills
html/basic_elems -.-> lab-445739{{"Динамизация данных домашней страницы"}}
html/head_elems -.-> lab-445739{{"Динамизация данных домашней страницы"}}
html/layout -.-> lab-445739{{"Динамизация данных домашней страницы"}}
html/multimedia -.-> lab-445739{{"Динамизация данных домашней страницы"}}
html/inter_elems -.-> lab-445739{{"Динамизация данных домашней страницы"}}
end
Настройка структуры проекта
В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы завершить этот шаг:
Откройте папку проекта. Структура каталогов следующая:
components/List.vue - это компонент списка статей, который нужно добавить для этого испытания.
public/static/data/list.json - это файл с данными для получения списка статей.
public/static/images - это файл с изображениями, используемыми для списка статей.
Далее загрузите зависимости с помощью команды npm install в терминале, подождите, пока зависимости будут загружены, а затем запустите проект с помощью команды npm run serve.
Как только проект запустится успешно, нажмите на "Web 8080", чтобы просмотреть его в браузере. Эффект работы страницы показан на следующем изображении.
Завершение функции отображения списка
В этом шаге вы научитесь запрашивать данные списка постов домашней страницы с помощью axios и связывать их с компонентом List.vue.
Откройте файл List.vue, расположенный в папке src/components.
Импортируйте библиотеку axios в <script>:
// TODO
import axios from "axios";
В функции data() определите свойство dataList для хранения списка данных:
data() {
return {
dataList: []
};
}
В хуке жизненного цикла created() вызовите метод getList() для получения списка данных:
created() {
this.getList();
}
Реализуйте метод getList() для извлечения данных из файла public/static/data/list.json:
В этом шаге обеспечивается получение данных списка постов домашней страницы из файла public/static/data/list.json и связывание их с компонентом List.vue.
Следуя этим шагам, вы завершили динамизацию данных домашней страницы, включая получение данных из файла public/static/data/list.json и отображение элементов списка в требуемом макете.
We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy