Vue.js

Vue.js (звычайна пазначаецца як Vue; вымаўляецца як «в’ю»^[5]) — гэта JavaScript-бібліятэка з адкрытым зыходным кодам для стварэння карыстальніцкіх інтэрфейсаў і аднастаронкавых вэб-праграм (англ.: single-page application, SPA)^[11]. Яна была створана Эванам Ю і падтрымліваецца ім і камандай^[12].

Vue.js
Тып	бібліятэка, JavaScript-фрэймворк[d], Вэб-фрэймворк і бібліятэка JavaScript[d]
Аўтар	Эван Ю
Распрацоўшчык	GitHub
Напісана на	JavaScript[1] і TypeScript[2]
Аперацыйная сістэма	кросплатформавасць[d]
Мовы інтэрфейсу	JavaScript
Першы выпуск	люты 2014[3]
Апошняя версія	3.5.25 (24 лістапада 2025)[4]
Ліцэнзія	MIT License
Сайт	vuejs.org
Медыяфайлы на Вікісховішчы

Агляд

Vue.js мае інкрыментальна адаптаваную архітэктуру, арыентаваную на дэкларатыўны рэндэрынг і кампаноўку кампанентаў. Асноўная бібліятэка арыентавана толькі на ўзровень прадстаўлення^[5]. Дадатковыя магчымасці, неабходныя для складаных вэб-праграм, такія як маршрутызацыя, кіраванне станамі і інструменты зборкі, даступныя праз афіцыйныя бібліятэкі і пакеты^[13].

Vue.js дазваляе пашыраць HTML пры дапамозе атрыбутаў HTML, якія называюцца дырэктывамі^[14]. Дырэктывы забяспечваюць функцыянальнасць HTML-праграм і могуць быць як убудаванымі, так і вызначанымі карыстальнікам.

Гісторыя

Vue быў створаны Эванам Ю пасля працы ў Google, дзе ён выкарыстоўваў AngularJS у некалькіх праектах. Пазней ён падсумаваў свае думкі: «Я падумаў, што змагу ўзяць тую частку Angular, якая мне падабалася, і стварыць нешта сапраўды лёгкае»^[15]. Першы камміт (eng. commit) зыходнага кода праекта датаваны ліпенем 2013 года, а першы публічны анонс Vue адбыўся ў лютым наступнага, 2014 года^[16][17].

Назвы версій часта паходзяць з мангі і анімэ.

Версіі

Версія	Дата выпуску	Назва	Канец LTS	Канец падтрымкі
3.3	2023-05-11	Rurouni Kenshin[18]
3.2	2021-08-05	Quintessential Quintuplets[19]
3.1	2021-06-07	Pluto[20]
3.0	2020-09-18	One Piece[21]
2.7	2022-07-01	Наруто [22]	2023-12-31	2023-12-31
2.6	2019-02-04	Macross[23]	2022-03-18	2023-09-18
2.5	2017-10-13	Level E[24]
2.4	2017-07-13	Kill la Kill[25]
2.3	2017-04-27	JoJo’s Bizarre Adventure[26]
2.2	2017-02-26	Initial D[27]
2.1	2016-11-22	Hunter X Hunter[28]
2.0	2016-09-30	Ghost in the Shell[29]
1.0	2015-10-27	Евангеліён [30]
0,12	2015-06-12	Dragon Ball [31]
0,11	2014-11-07	Cowboy Bebop[32]
0,10	2014-03-23	Бягун па лязе[33]
0,9	2014-02-25	Animatrix[34]
0,8	2014-01-27	-[35]	першая публічна абвешчаная версія [16][17]
0,7	2013-12-24	-[36]
0,6	2013-12-08	VueJS [37]

Асаблівасці

Кампаненты

Кампаненты Vue пашыраюць базавыя элементы HTML для інкапсуляцыі прыгоднага для шматразовага выкарыстання кода. На высокім узроўні кампаненты — гэта прыстасаваныя элементы, да якіх кампілятар Vue прымацоўвае паводзіны. У Vue кампанент — гэта, у сутнасці, экзэмпляр Vue з загадзя вызначанымі параметрамі^[38]. Прыведзены ніжэй фрагмент кода змяшчае прыклад кампанента 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. Існуюць наступныя інструменты:

• Аўтаматычнае прымяненне класаў для CSS-пераходаў і анімацыі
• Інтэграцыя іншых бібліятэк CSS-анімацыі, такіх як Animate.css
• Выкарыстанне JavaScript для прамога маніпулявання DOM падчас пераходаў
• Інтэграцыя іншых бібліятэк анімацыі JavaScript, напрыклад Velocity.js

Калі элемент, абгорнуты ў кампанент пераходу, устаўляецца ці выдаляецца, адбываецца наступнае:

1. Vue аўтаматычна вызначае, ці прымяняюцца да мэтавага элемента CSS-пераходы або анімацыя. Калі так, то класы CSS-пераходаў будуць дадавацца/выдаляцца ў адпаведныя моманты часу.
2. Калі кампанент пераходу змяшчае JavaScript-хукі, то гэтыя хукі будуць выклікацца ў адпаведныя моманты часу.
3. Калі CSS-пераходы/анімацыя не выяўлены і хукі JavaScript не прадстаўлены, то аперацыі DOM па ўстаўцы і/або выдаленні будуць выкананы адразу на наступным фрэйме^[39][40].

Маршрутызацыя

<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>

Код вышэй:

1. Устанаўлівае знешні маршрут па адрасе websitename.com/user/<id>.
2. Які будзе адлюстроўвацца ў кампаненце User, вызначаным у (const User. . .)
3. Дазваляе кампаненту User перадаць пэўны id карыстальніка, які быў уведзены ў URL, выкарыстоўваючы ключ params аб’екта $route: $route.params.id.
4. Гэты шаблон (змяняецца перададзенымі ў маршрутызатар параметрамі) будзе выведзены ў <router-view></router-view> усярэдзіне div#app DOM.
5. Канчаткова сфарміраваны HTML для карыстальніка, які набраў: websitename.com/user/1, будзе выглядаць наступным чынам^[41]:

<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>

Экасістэма

У склад асноўнай бібліятэкі ўваходзяць інструменты і бібліятэкі, распрацаваныя як асноўнай камандай, так і звычайнымі распрацоўшчыкамі.

Афіцыйныя інструменты

• Devtools — Браўзернае пашырэнне devtools для адладкі праграм на Vue.js
• Vue CLI — стандартны інструментарый для хуткай распрацоўкі Vue.js
• Vue Loader — загрузчык вэб-пакетаў, які дазваляе запісваць кампаненты Vue у фармаце Single-File Components (SFC).

Афіцыйныя бібліятэкі

• Vue Router — афіцыйны маршрутызатар
• Vuex — цэнтралізаванае кіраванне станам, натхнёнае Flux
• Vue Server Renderer — рэндэрынг на баку сервера
• Pinia — новы просты спосаб кіравання станам

Зноскі

1. The vue-js Open Source Project on Open Hub: Languages Page — 2006. Праверана 20 верасня 2018.

   <a href='https://wikidata.org/wiki/Track:Q124688'></a>
2. https://github.com/EvanLi/Github-Ranking/blob/master/Data/github-ranking-2025-07-06.csv — 2025.
3. https://egghead.io/podcasts/evan-you-creator-of-vue-js
4. Release 3.5.25 — 2025. Праверана 24 лістапада 2025.
5. Introduction (англ.). Vuejs.org. Праверана January 3, 2020.
6. Macrae, Callum (2018). Vue.js: Up and Running: Building Accessible and Performant Web Apps(англ.). O'Reilly Media. ISBN 978-1-4919-9721-5.
7. Nelson, Brett (2018). Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch(англ.). Apress. ISBN 978-1-4842-3781-6.
8. Yerburgh, Edd (2019). Testing Vue.js Applications(англ.). Manning Publications. ISBN 978-1-61729-524-9.
9. Freeman, Adam (2018). Pro Vue.js 2(англ.). Apress. ISBN 978-1-4842-3805-9.
10. Franklin, Jack; Wanyoike, Michael; Bouchefra, Ahmed; Silas, Kingsley; Campbell, Chad A.; Jacques, Nilson; Omole, Olayinka; Mulders, Michiel (2019). Working with Vue.js(англ.). SitePoint. ISBN 978-1-4920-7144-0.(недаступная спасылка)
11. ^{[5][6][7][8][9][10]}
12. Meet the Team (англ.). Vuejs.org. Праверана September 23, 2019.
13. Evan is creating Vue.js (англ.). Patreon. Праверана March 11, 2017.
14. What is Vue.js (англ.). W3Schools. Праверана January 21, 2020.
15. Evan You. Between the Wires. November 3, 2016. Архівавана з арыгінала 3 чэрвеня 2017. Праверана 31 жніўня 2023.
16. Vue.js: JavaScript MVVM made simple (нявызн.). Hacker News (3 лютага 2014). Праверана 29 студзеня 2023.
17. First Week of Launching Vue.js (нявызн.). Evan You (11 лютага 2014). Праверана 29 студзеня 2023.
18. v3.3.0 Rurouni Kenshin (англ.). Vue.js (11 мая 2023). Праверана 12 мая 2023.
19. v3.2.0 Quintessential Quintuplets (англ.). Vue.js (5 жніўня 2021). Праверана August 10, 2021.
20. v3.1.0 Pluto (англ.). Vue.js (7 чэрвеня 2021). Праверана July 18, 2021.
21. v3.0.0 One Piece (англ.). Vue.js (18 верасня 2020). Праверана September 23, 2020.
22. v2.7.0 Naruto (англ.). Vue.js (1 ліпеня 2022). Праверана July 1, 2022.
23. v2.6.0 Macross (англ.). Vue.js (4 лютага 2019). Праверана September 23, 2020.
24. v2.5.0 Level E (англ.). Vue.js (13 кастрычніка 2017). Праверана September 23, 2020.
25. v2.4.0 Kill la Kill (англ.). Vue.js (13 ліпеня 2017). Праверана September 23, 2020.
26. v2.3.0 JoJo's Bizarre Adventure (англ.). Vue.js (27 красавіка 2017). Праверана September 23, 2020.
27. v2.2.0 Initial D (англ.). Vue.js (26 лютага 2017). Праверана September 23, 2020.
28. v2.1.0 Hunter X Hunter (англ.). Vue.js (22 лістапада 2016). Праверана September 23, 2020.
29. v2.0.0 Ghost in the Shell (англ.). Vue.js (30 верасня 2016). Праверана September 23, 2020.
30. 1.0.0 Evangelion (англ.). Vue.js (27 кастрычніка 2015). Праверана September 23, 2020.
31. 0.12.0: Dragon Ball (англ.). Vue.js (12 чэрвеня 2015). Праверана September 23, 2020.
32. v0.11.0: Cowboy Bebop (англ.). Vue.js (7 лістапада 2014). Праверана September 23, 2020.
33. v0.10.0: Blade Runner (англ.). Vue.js (23 сакавіка 2014). Праверана September 23, 2020.
34. v0.9.0: Animatrix (англ.). Vue.js (25 лютага 2014). Праверана September 23, 2020.
35. v0.8.0 (англ.). Vue.js (27 студзеня 2014). Праверана September 23, 2020.
36. v0.7.0 (англ.). Vue.js (24 снежня 2013). Праверана September 23, 2020.
37. 0.6.0: VueJS (англ.). Vue.js (8 снежня 2013). Праверана September 23, 2020.
38. Components (англ.). Vuejs.org. Праверана March 11, 2017.
39. Transition Effects (англ.). Vuejs.org. Праверана March 11, 2017.
40. Transitioning State (англ.). Vuejs.org. Праверана March 11, 2017.
41. You. Vue Nested Routing (2) (нявызн.)(недаступная спасылка). Vue Home Page (subpage). Архівавана з першакрыніцы 8 мая 2017. Праверана May 10, 2017.