Vue – Javascript бібліотека, яка дозволяє створювати динамічні фронтенд додатки. Vue також добре підходить для односторінкових додатків (single page applications, далі SPA). Односторінкові додатки працюють трохи інакше, ніж вбудовані бекенд веб-додатки. Замість того, щоб робити запити на різні маршрути у бекенді, і отримувати як відповідь повністю відображену сторінку, SPA робить всю візуалізацію сторінки в інтерфейсі, і тільки відправляє запити на сервер, коли потрібні нові дані або їх потрібно оновити чи зберегти.
Це може покращити відгук веб-додатку, оскільки можна буде рендерити сторінки один раз і динамічно відображати їх на основі поточного контексту додатку. Щоб це працювало, потрібен спосіб відрізняти різні види сторінок. У SPA це робиться за допомогою роутингу. Vue має повністю підтримувану сторонню бібліотеку роутингу, яка називається vue-router.
У цій статті ми встановимо простий SPA, який буде показувати деяку інформацію про популярні криптовалюти. Ми назвемо його "Crypto Info". Він матиме декілька сторінок, які будуть зв'язані за допомогою vue-router. Ви вже маєте бути знайомі з Vue, а також вміти створювати та використовувати компоненти Vue.
Встановлення
Для початку скористуємося інсталятором командного рядка Vue. Відкрийте термінал і пропишіть наступні команди:
# встановлення vue-cli
$ npm install --global vue-cli
# створення нового проекту, використовуючи шаблон "webpack"
$ vue init webpack router-app
Дайте відповіді на запитання на екрані. Не забудьте відповісти «так» на встановлення vue-router.
Це дозволить встановити версію шаблону Vue 2.x.
Для Vue 1.x використовуйте: vue init webpack#1.0 router-app
? Project name router-app <enter>
? Project description A Vue.js project <enter>
? Author <enter>
? Vue build standalone <enter>
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
Як тільки застосунок буде встановлений, інсталюйте всі залежності та запустіть dev-сервер.
# встановіть залежності та вперед!
$ cd router-app
$ npm install
$ npm run dev
Тепер у вас є можливість вказати в браузері http://localhost:8080 і побачити щось на зразок цього:
Трохи покопаємося
Інструмент командного рядка vue під'єднає vue-router для нас. Для кращого розуміння того, як це працює, ми можемо поглянути на створений шаблон. Відкрийте /src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
Перші два рядки імпортують vue і vue-router. Третій рядок імпортує компонент під назвою Hello. @ — це просто хороший псевдонім для директорії /src, яка була інстальована у веб-пакеті інструментом командного рядка Vue.
Далі ми вкажемо Vue використовувати плагін vue-router. Тепер роутер налаштований на один маршрут і використовує компоненти Vue в якості сторінок. У наведеному вище прикладі ми хочемо відображати компонент Hello кожен раз, коли користувач переходить до /.
Далі відкрийте /src/main.js
// Версія збірки Vue завантажується командою `import`
// (runtime-only або standalone) був встановлений в webpack.base.conf з псевдонімом.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<app>',
components: { App }
})
Перший рядок знову імпортує Vue. Другий рядок вводить компонент під назвою App. Він буде служити кореневим компонентом для додатка. Третій рядок імпортує налаштування роутера, які ми розглядали раніше. Наступний рядок вказує Vue, чи треба показувати підказки й попередження у консолі розробника вашого браузеру. Встановимо значення false.
Новий екземпляр Vue створений і змонтований в #app у div нашого html. Далі створюємо екземпляр компоненту App і вводимо попередню конфігурацію роутера.
Тепер відкрийте /src/App.vue
<template>
<div>
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Це, як я вже згадував раніше, кореневий компонент. Він послугує точкою, з якої будуть рендеритися компоненти нашої сторінки. Зверніть увагу на те, що усі компоненти, які ми будемо використовувати, знаходяться у .vue файлах, що дозволяє нам зберегти шаблон, javascript і стиль в один файл.
У тезі < template > у нас є лише проста розмітка. Важливим елементом є тег < router-view >. Роутер використовує цей тег в якості контейнеру для рендерингу різних компонентів, прив'язаних до різних маршрутів. Просто думайте про нього як про заповнювач.
Тег < script > містить простий об'єкт компонента Vue, який нічого не робить. Тег < style > містить шаблон, наданий інструментом командного рядка Vue.
Тепер відкрийте /src/components/Hello.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
<br>
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped="">
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Це дуже схоже на компонент App. Знову-таки, у тезі < template > є HTML-розмітка для компонента. У цьому випадку усі посилання і текст відображуються, коли ми переходимо на http://localhost:8080. Це пов'язано з тим, що в нашій конфігурації роутера ми вказали, що / або кореневий шлях нашого додатку має вказувати на Hello.vue.
Тепер видалимо зміст за замовчуванням та створимо простішу домашню сторінку. Відредагуйте Hello.vue наступним чином:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Hello',
data () {
return {
msg: 'Welcome to Crypto Info'
}
}
}
</script>
Після перезавантаження ви повинні побачити сторінку, подібну до цієї:
Створення та прив'язка до маршрутів
Тепер створімо нову сторінку та додамо посилання для навігації між сторінками. Відкрийте /src/router/index.js і відредагуйте його, щоб він виглядав наступним чином:
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '/about',
name: 'About',
component: About
}
]
})
Ми додали шлях /about, який вказує на новий компонент під назвою About. Тепер відкрийте /src/App.vue і відредагуйте розділ < template >, щоб він виглядав так:
<template>
<div>
<img src="./assets/logo.png">
<router-link :to="{ name: 'Hello' }">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
Як ви можете бачити, ми додали два теги < router-link >, використовуючи два різних методи. Роутер використовує < router-link >, щоб створити html-посилання на створені вами маршрути. Перший метод використовує іменований маршрут. Якщо ви пам'ятаєте, в /src/router/index.js ми додали параметр name до наших маршрутів. У цьому випадку, назва маршруту — Hello, як і у компонента, на який він вказує. Другий спосіб — це стандартний метод, який просто визначає шлях, на який ми хочемо посилатися.
Якщо ви оновите браузер, то побачите початкову сторінку привітання, але з двома доданими посиланнями.
Якщо ви натиснете на посилання About, то отримаєте порожню сторінку. Це тому, що ми ще не створили компонент. Виправимо це, створивши /src/components/About.vue.
<template>
<div class="about">
<h1>What is a Crypto-Currency?</h1>
<p>
It's a digital currency in which encryption techniques are used to regulate the generation of units of currency
and verify the transfer of funds, operating independently of a central bank.
</p>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
Тепер, якщо ви оновите браузер і натиснете About, ви побачите нову сторінку:
Динамічні маршрути
Таким чином, ми можемо створити нову сторінку і шлях, що вказатиме на неї, але як щодо передачі параметрів? Нам знадобиться сторінка, яка відображатиме корисну інформацію про різні криптовалюти на основі ідентифікатора рядка, переданого в URL-адресі. Зробімо це так.
Відкрийте /src/router/index.js знову і додайте третій маршрут.
...
import Coins from '@/components/Coins'
...
export default new Router({
routes: [
...
{
path: '/coins/:id',
name: 'Coins',
component: Coins
}
]
})
Щоб відображати найновішу інформацію про різні валюти, ми використаємо популярний HTTP-клієнт axios для отримання даних з безкоштовного API капіталізації ринку коінів (Coin Market Capitalization API). Ми прийматимемо параметр рядка в URL-адресі :id. Він буде переданий API, щоб отримати відповідні дані.
Спочатку потрібно встановити axios.
npm install --save axios
Далі створити файл під назвою /src/components/Coins.vue
<template>
<div>
<p>Name: {{ coin.name }}</p>
<p>Symbol: {{ coin.symbol }}</p>
<p>Price (USD): {{ coin.price_usd }}</p>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Coins',
data() {
return {
coin: {}
}
},
created() {
this.fetchData()
},
watch: {
'$route': 'fetchData'
},
methods: {
fetchData() {
axios.get('https://web.archive.org/web/20230324193928/https://api.coinmarketcap.com/v1/ticker/'+this.$route.params.id+'/')
.then((resp) => {
this.coin = resp.data[0]
console.log(resp)
})
.catch((err) => {
console.log(err)
})
}
}
}
</script>
Ви помітите, що в об'єкті даних нашого компонента ми оголошуємо порожній об'єкт з ім'ям coin. Це збереже інформацію про коін після його отримання. У розділі < template > є певна розмітка, щоб відобразити назву, символ та ціну долара США на коін. Метод created— це спеціальний «гачок», який використовується у Vue, і який викликається перед рендерингом компонента. У цьому випадку ми викликаємо метод fetchData, який робить запит GET з axios до API капіталізації ринку коінів та передає параметр :id в кінці.
Ми отримуємо параметр з об'єкта $route властивості params. VueRouter автоматично вводить цей об'єкт. Нам потрібен параметр :id, який ми визначили в нашому файлі роутера. В разі успіху, як визначено у методі then, ми зберігаємо дані, що повертаються, в наш об'єкт coin. Потім він відобразиться у шаблоні.
Ще одна річ, яка нам потрібна, — це додати watch для об'єкта $route. Компоненти VueRouter для швидкості рендеряться лише один раз. Якщо вам потрібен повторний рендеринг, вам треба зробити його вручну, тому що в цьому випадку ми робимо повторний рендеринг, коли параметр :id в $route змінюється, а потім завантажує нові дані.
Тепер створімо ще кілька посилань у /src/App.vue, щоб дізнатися, як ця нова сторінка може бути використана.
<template>
<div>
<img src="./assets/logo.png">
<router-link :to="{ name: 'Hello' }">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/coins/ethereum">Ethereum</router-link>
<router-link to="/coins/bitcoin">Bitcoin</router-link>
<router-view></router-view>
</div>
<template>
Якщо ви оновите браузер і натиснете Ethereum, то побачите щось на зразок цього:
Тепер натисніть на Bitcoin, і ви також побачите відповідну інформацію для цього коіна. Якщо ви хочете спробувати інші коіни, подивіться https://api.coinmarketcap.com/v1/ticker/ і вставте декілька ідентифікаторів із списку в URL-адресу нашого додатку.
Ще немає коментарів