Vue.js

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

Зноскі