Vue.js

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

## Агляд 
Vue.js мае інкрыментальна адаптаваную архітэктуру, арыентаваную на дэкларатыўны рэндэрынг і кампаноўку кампанентаў. Асноўная бібліятэка арыентавана толькі на ўзровень прадстаўлення.

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

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

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

### Версіі 
## Асаблівасці 
### Кампаненты 
Кампаненты Vue пашыраюць базавыя элементы HTML для інкапсуляцыі прыгоднага для шматразовага выкарыстання кода. На высокім узроўні кампаненты — гэта прыстасаваныя элементы, да якіх кампілятар Vue прымацоўвае паводзіны. У Vue кампанент — гэта, у сутнасці, экзэмпляр Vue з загадзя вызначанымі параметрамі. Прыведзены ніжэй фрагмент кода змяшчае прыклад кампанента Vue. Кампанент паказвае кнопку і выводзіць колькасць націскаў на яе:
```html

  
    
  

Vue.component('button-clicked', {
  props: ['initialCount'],
  data: () => ({
    count: 0,
  }),
  template: 'Clicked  times',
  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',
});

```

### Пераходы 
Vue дае мноства спосабаў ужывання эфектаў пераходу пры ўстаўцы, абнаўленні або выдаленні элементаў з DOM. Існуюць наступныя інструменты:

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

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

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

### Маршрутызацыя 
```html

  

...

...
const User = {
  template: 'User '
};

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
});
...

```
Код вышэй:

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

```html

  
    User 1
  

```

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

### Афіцыйныя інструменты 
* **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 годзе