Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.
В этой статье мы рассмотрим, как создавать многократно используемые переходы и делать запросы в приложении Vue.
Инкапсулированный переходный компонент
Мы можем инкапсулировать переходы в отдельный компонент, чтобы мы могли повторно использовать его где угодно.
Например, мы можем создать компонент перехода, который имеет компонент transition, а затем повторно использовать его следующим образом:
styles.css :
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
index.js :
Vue.component("foo-transition", {
template: `
<transition name="fade">
<slot></slot>
</transition>
`
});
new Vue({
el: "#app",
data: {
show: true
}
});
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link type="text/css" rel="stylesheet" href='styles.css'></link>
</head>
<body>
<div id="app">
<button v-on:click="show = !show">
Toggle transition
</button>
<foo-transition>
<p v-if='show'>foo</p>
</foo-transition>
<foo-transition>
<p v-if='show'>bar</p>
</foo-transition>
</div>
<script src="index.js"></script>
</body>
</html>
В приведенном выше коде у нас есть многоразовый компонент foo-transition, который имеет компонент transition с slot внутри, поэтому мы можем включать и выключать то, что мы хотим в компоненте foo-transition, с примененными к нему эффектами transition.
Затем в index.html мы повторно использовали foo-transition, написав:
<foo-transition> <p v-if='show'>foo</p> </foo-transition> <foo-transition> <p v-if='show'>bar</p> </foo-transition>
Затем, когда мы будем переключать show между true и false, мы увидим, что к обоим элементам p применен эффект плавного перехода.
Кроме того, мы также можем использовать v-bind='$attrs' для привязки атрибутов от родительского к дочернему и v-on='$listeners' для передачи прослушивателей событий от родительского к дочернему.
Например, мы можем изменить приведенный выше пример следующим образом:
styles.css :
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.foo {
color: green;
}
index.js :
Vue.component("foo-transition", {
template: `
<transition name="fade" v-bind="$attrs" v-on="$listeners">
<slot></slot>
</transition>
`
});
new Vue({
el: "#app",
data: {
show: true
}
});
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link type="text/css" rel="stylesheet" href='styles.css'></link>
</head>
<body>
<div id="app">
<button @click="show = !show">
Toggle transition
</button>
<foo-transition class="foo">
<p v-if='show'>foo</p>
</foo-transition>
</div>
<script src="index.js"></script>
</body>
</html>
В приведенном выше коде у нас v-bind=”$attrs” в transitions. Таким образом, к нему будет применен класс foo, если мы установим для него значение foo в foo-transition.
Используйте Axios для получения данных
Vue не имеет собственного HTTP-клиента, поэтому для выполнения HTTP-запросов мы должны добавить свой собственный. Axios - хороший выбор, поскольку он доступен через CDN и в виде пакета Node.
Кроме того, он основан на обещаниях, поэтому нам не придется иметь дело с вложенными обратными вызовами.
Например, мы можем использовать его следующим образом:
index.js :
new Vue({
el: "#app",
data: {
info: {}
},
async mounted() {
const { data } = await axios.get(
"https://api.coindesk.com/v1/bpi/currentprice.json"
);
this.info = data;
}
});
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="info.bpi">
{{info.bpi['USD'].code}} - {{info.bpi['USD'].rate}}
</p>
</div>
<script src="index.js"></script>
</body>
</html>
В приведенном выше коде мы использовали библиотеку Axios, включив ее из CDN. Затем мы получаем данные в ловушке mounted. Поскольку axios.get возвращает обещание, мы можем использовать синтаксис async и await для выполнения запроса.
Альтернативой может служить Fetch API, который похож на Axios, но нам не нужно добавлять библиотеку для его использования.
Использование vue-router для обработки маршрутизации на стороне клиента
Vue Router - один из наиболее часто используемых маршрутизаторов для приложений Vue. Он позволяет нам сопоставлять URL-адреса с компонентами, а также получать параметры маршрута и запроса и передавать их нашим компонентам.
Он также поддерживает вложенные маршруты и переходы.
Простой пример:
index.js :
const Foo = { template: "<div>foo</div>" };
const Bar = { template: "<div>bar</div>" };
const routes = [
{ path: "/foo", component: Foo },
{ path: "/bar", component: Bar }
];
const router = new VueRouter({
routes
});
new Vue({
el: "#app",
router
});
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/foo">Foo</router-link>
<router-link to="/bar">Bar</router-link>
<router-view></router-view>
</div>
<script src="index.js"></script>
</body>
</html>
В приведенном выше коде мы добавили Vue Router, а затем добавили router-view для отображения содержимого маршрута, то есть компонентов, которые мы сопоставили.
Затем у нас есть router-link, на который мы можем нажимать, чтобы перемещаться между маршрутами.
Заключение
Мы можем создавать повторно используемые компоненты перехода, добавляя слоты внутри transition компонентов. Для выполнения HTTP-запросов мы можем использовать HTTP-клиент Axios, чтобы упростить отправку запросов. Наконец, мы можем использовать Vue Router для сопоставления URL-адресов нашим компонентам.
