Vue.js

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

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

Агляд

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

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

Гісторыя

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

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

Версіі

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

Асаблівасці

Кампаненты

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

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

<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, будзе выглядаць наступным чынам:

<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 — новы просты спосаб кіравання станам