Vue.js

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

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

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

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

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

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

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

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

 Устанаўлівае знешні маршрут па адрасе websitename.com/user/<id>.
 Які будзе адлюстроўвацца ў кампаненце User, вызначаным у (const User. . .)
 Дазваляе кампаненту User перадаць пэўны id карыстальніка, які быў уведзены ў URL, выкарыстоўваючы ключ params аб’екта $route: $route.params.id.
 Гэты шаблон (змяняецца перададзенымі ў маршрутызатар параметрамі) будзе выведзены ў <code><router-view></router-view></code> усярэдзіне div#app DOM.
 Канчаткова сфарміраваны 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 — новы просты спосаб кіравання станам

Катэгорыя:Бібліятэкі JavaScript
Катэгорыя:Вэб-распрацоўка
Катэгорыя:Праграмнае забеспячэнне з ліцэнзіяй MIT
Катэгорыя:Праграмнае забеспячэнне, распрацаванае ў 2014 годзе