From Wikipedia, the free encyclopedia
Vue.js (звычайна пазначаецца як Vue; вымаўляецца як «в’ю»[4]) — гэта JavaScript-бібліятэка з адкрытым зыходным кодам для стварэння карыстальніцкіх інтэрфейсаў і аднастаронкавых вэб-праграм (англ.: single-page application, SPA)[10]. Яна была створана Эванам Ю і падтрымліваецца ім і камандай[11].
Vue.js | |
---|---|
Тып | бібліятэка, JavaScript-фрэймворк[d], Вэб-фрэймворк і бібліятэка JavaScript[d] |
Аўтар | Эван Ю |
Распрацоўшчык | GitHub |
Напісана на | JavaScript[1] і TypeScript |
Аперацыйная сістэма | кросплатформавае праграмнае забеспячэнне |
Мовы інтэрфейсу | JavaScript |
Першы выпуск | люты 2014[2] |
Апошняя версія |
|
Ліцэнзія | MIT License |
Сайт | vuejs.org |
Медыяфайлы на Вікісховішчы |
Vue.js мае інкрыментальна адаптаваную архітэктуру, арыентаваную на дэкларатыўны рэндэрынг і кампаноўку кампанентаў. Асноўная бібліятэка арыентавана толькі на ўзровень прадстаўлення[4]. Дадатковыя магчымасці, неабходныя для складаных вэб-праграм, такія як маршрутызацыя, кіраванне станамі і інструменты зборкі, даступныя праз афіцыйныя бібліятэкі і пакеты[12].
Vue.js дазваляе пашыраць HTML пры дапамозе атрыбутаў HTML, якія называюцца дырэктывамі[13]. Дырэктывы забяспечваюць функцыянальнасць HTML-праграм і могуць быць як убудаванымі, так і вызначанымі карыстальнікам.
Vue быў створаны Эванам Ю пасля працы ў Google, дзе ён выкарыстоўваў AngularJS у некалькіх праектах. Пазней ён падсумаваў свае думкі: «Я падумаў, што змагу ўзяць тую частку Angular, якая мне падабалася, і стварыць нешта сапраўды лёгкае»[14]. Першы камміт (eng. commit) зыходнага кода праекта датаваны ліпенем 2013 года, а першы публічны анонс Vue адбыўся ў лютым наступнага, 2014 года[15][16].
Назвы версій часта паходзяць з мангі і анімэ.
Версія | Дата выпуску | Назва | Канец LTS | Канец падтрымкі |
---|---|---|---|---|
3.3 | 2023-05-11 | Rurouni Kenshin[17] | ||
3.2 | 2021-08-05 | Quintessential Quintuplets[18] | ||
3.1 | 2021-06-07 | Pluto[19] | ||
3.0 | 2020-09-18 | One Piece[20] | ||
2.7 | 2022-07-01 | Наруто [21] | 2023-12-31 | 2023-12-31 |
2.6 | 2019-02-04 | Macross[22] | 2022-03-18 | 2023-09-18 |
2.5 | 2017-10-13 | Level E[23] | ||
2.4 | 2017-07-13 | Kill la Kill[24] | ||
2.3 | 2017-04-27 | JoJo’s Bizarre Adventure[25] | ||
2.2 | 2017-02-26 | Initial D[26] | ||
2.1 | 2016-11-22 | Hunter X Hunter[27] | ||
2.0 | 2016-09-30 | Ghost in the Shell[28] | ||
1.0 | 2015-10-27 | Евангеліён [29] | ||
0,12 | 2015-06-12 | Dragon Ball [30] | ||
0,11 | 2014-11-07 | Cowboy Bebop[31] | ||
0,10 | 2014-03-23 | Бягун па лязе[32] | ||
0,9 | 2014-02-25 | Animatrix[33] | ||
0,8 | 2014-01-27 | -[34] | першая публічна абвешчаная версія [15][16] | |
0,7 | 2013-12-24 | -[35] | ||
0,6 | 2013-12-08 | VueJS [36] |
Кампаненты Vue пашыраюць базавыя элементы HTML для інкапсуляцыі прыгоднага для шматразовага выкарыстання кода. На высокім узроўні кампаненты — гэта прыстасаваныя элементы, да якіх кампілятар Vue прымацоўвае паводзіны. У Vue кампанент — гэта, у сутнасці, экзэмпляр Vue з загадзя вызначанымі параметрамі[37]. Прыведзены ніжэй фрагмент кода змяшчае прыклад кампанента Vue. Кампанент паказвае кнопку і выводзіць колькасць націскаў на яе:
<template>
<div id="tuto">
<button-clicked v-bind:initial-count="0"></button-clicked>
</div>
</template>
<script>
Vue.component('button-clicked', {
props: ['initialCount'],
data: () => ({
count: 0,
}),
template: '<button v-on:click="onClick">Clicked <nowiki>{{ count }}</nowiki> times</button>',
computed: {
countTimesTwo() {
return this.count * 2;
}
},
watch: {
count(newValue, oldValue) {
console.log(`The value of count is changed from ${oldValue} to ${newValue}.`);
}
},
methods: {
onClick() {
this.count += 1;
}
},
mounted() {
this.count = this.initialCount;
}
});
new Vue({
el: '#tuto',
});
</script>
Vue дае мноства спосабаў ужывання эфектаў пераходу пры ўстаўцы, абнаўленні або выдаленні элементаў з DOM. Існуюць наступныя інструменты:
Калі элемент, абгорнуты ў кампанент пераходу, устаўляецца ці выдаляецца, адбываецца наступнае:
<div id="app">
<router-view></router-view>
</div>
...
<script>
...
const User = {
template: '<div>User <nowiki>{{ $route.params.id }}</nowiki></div>'
};
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
});
...
</script>
Код вышэй:
websitename.com/user/<id>
.$route.params.id
.<router-view></router-view>
усярэдзіне div#app DOM.websitename.com/user/1
, будзе выглядаць наступным чынам[40]:<div id="app">
<div>
<div>User 1</div>
</div>
</div>
У склад асноўнай бібліятэкі ўваходзяць інструменты і бібліятэкі, распрацаваныя як асноўнай камандай, так і звычайнымі распрацоўшчыкамі.