Корисник:PavleJovanovic01/песак

Vue.js (Вју.џејес)

Vue.js је софтвер отвореног кода који спада у front-end JavaScript библиотеку чија се архитектура заснива на томе да се презентациони део апликације одвоји од серверског дела. Најчешће се користи за израду веб апликација, а може се користити и у изради веб сајтова.

Направљен је од стране програмера Евен Ју, а одржавањем овог софтвера поред њега баве се и многи други програмери који користе овај софтвер и желе да га учине бољим.

Велика предност Vue.js-а је та што је могуће додавањ само модула који су потребни, за разлику од неких других библиотека сличног типа. Та карактеристика омогућава много мању величину крајњег кода и самим тим оптимизованији и бржи рад апликације.

Архитектура овог софтверског алата нам омогућава коришћење компоненти за израду нашег сајта/апликације. основне функције вју-а су фокусиране само на презентациони део апликације. Додавањ било које друге функционалности, као што су: рутирање, привремено чување података, ”грађење софтвера,, , повлачење података са сервера итд... се може извршити укључивањем неких од званично подржаних модула и пакета који су други програмери написали и објавили у оквиру покрета софтвер отвореног кода.

Вју омогућава коришћење класичне HTML синтаксе и проширеном листом посебних хтмл тагова који омогућавају лакши начин писања веб апликација.

Вју је тренотно на верзији 3.2 која је изашла 5. Августа 2021. године.

Компоненте

Компоненте су клључни део Вју библиотеке и омогућавају поновног искоришћавања одређеног дела кода који је исти за различите делове апликације. Састоје се од HTML дела, CSS дела i JavaScript дела. Могу да прихватају одређене податке који се даље користе у коду те апликације. Највећа предност компоненти је то што је могуће креирати их само једном и једноставно их користити на више места и могуће је додавати различите варијанте истих.

Пример једне Вју компоненте:

<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 {{ count }} 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>

Шаблон

шаблон је део у коме се налази HTML део компоненте и служи за приказ података кориснику. Такође је могуће убацити команде које омогућавају једноставнији начин интеракције са елементима на станици. Такве команде се баве стварима као што су шта се дешава када се пређе мишем или се кликне на одређени елемент. Синтакса за ове команде је в-он: догађај на који желимо да додамо неку одређену функцију. Исто тако у шаблон може да се додају и подаци који су дефинисани у JavaScript делу компоненте.

Реактивност

Захваљујући архитектури и начину на који је Вју писан, рутиранје и било која друга функционалност која би у апликацији писаној у ванила javascript-u изазвала поновно учитаванје и потребу да се сачека одређено време да се команда изврши, изгледа као да се извршила без било каквог учитавања што пружа много бољи кориснички осећај.