Kódování pomocí Vue

Vue je tento skvělý, oblíbený a snadno naučitelný rámec uživatelského rozhraní. Vše, co potřebujete vědět, abyste mohli začít, je HTML, CSS a Javascript. Pojďme se tedy ponořit a začít se učit, jak Vue funguje, a vytvářet aplikaci s VueJS. Pokud již Vue znáte a chcete se vrhnout rovnou na cvičení, zde je odkaz

Úvod

Vue je progresivní rámec pro vytváření uživatelských rozhraní. Progresivní v tomto případě znamená, že Vue může existovat jak ve stávajícím řešení, tak i pohánět celý web díky svému bohatému ekosystému. Vue se zaměřuje na aktualizace uživatelského rozhraní a ponechává části, jako je směrování a globální správa stavu, mimo rámec, ale v případě potřeby jej lze snadno zahrnout.

Při vytváření aplikace ve Vue je každá stránka rozdělena na malé opakovaně použitelné součásti, které lze sdílet mezi součástmi a stránkami.

Při rozdělení logiky na menší komponenty se základ kódu stane lépe spravovatelným a také testovatelnějším. Každá komponenta má svůj vlastní stav, takže pokud bychom komponentu znovu použili na několika místech, změny jedné komponenty by neovlivnily ostatní.

Vue využívá virtuální DOM a může se tak rozhodnout, kdy nejlépe aktualizovat DOM a také provádět asynchronní aktualizace DOM. Což poskytuje rychlé a optimalizované aktualizace uživatelského rozhraní.

V jádru Vue.js je to systém, který nám umožňuje deklarativně vykreslovat data do DOM pomocí jednoduché syntaxe šablony. Zvažte následující příklad.

  <div id="app">
    {{ message }}
  </div>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue'
    }
  })
  Hello Vue

Nyní jsme vytvořili naši první aplikaci, i když je to velmi jednoduchá aplikace. Vue však dělá hodně pod kapotou a nyní propojil DOM s našimi daty komponent. Při změně našich dat se tedy změní i pohled, takže komponenty Vue budou reaktivní.

HTML, CSS a Javascript

Jedinými požadavky pro výuku Vue je HTML, CSS a Javascript. To je také to, z čeho se skládá každá součást, rozdělená na různé části. Každá komponenta Vue se skládá z:

  • script tag, definující Javascript

  • šablona tag, definující HTML

  • styl tag, definující CSS

Jedná se například o komponentu, která tiskne Hello Vue!, a jak nevidíme nic víc než HTML, CSS a Javascript.

  <script>
    export default {
      name: 'app',
      data: () => ({ message: 'Hello Vue!' }),
    }
  </script>

  <template>
    <div class="app" >
      {{ message }}
    </div>
  </template>

  <style scoped>
    .app {
      color: greeen;
    }
  </style>

Toto je exportovatelná komponenta, kterou může použít jakákoli jiná komponenta. Všimněte si <style scoped> , je to něco, co je zahrnuto ve Vue a dělá styl omezený na aktuální komponentu, aniž by to ovlivnilo žádné další třídy.

Instance Vue

Každá aplikace Vue začíná vytvořením instance Vue s funkcí Vue

new Vue({
  render: h => h(App),
}).$mount('#app')

Obvykle to v main.js vypadá nějak takto soubor. Zde vytvoříme naši instanci Vue a řekneme Vue, že kořenová komponenta je aplikace, která je importována v main.js . Poté Vue vytvoří strom komponent komponenty App a všech jejích dílčích komponent a tak dále. Když Vue vytvoří strom komponent a vypočítá jeho počáteční stav, vloží strom komponent do #app prvek, obvykle prvek div někde v kořenovém souboru HTML.

Data

Pokud vezmeme v úvahu kořenovou instanci Vue, tato instance potřebuje vědět, kdy provést aktualizaci komponent ve stromu komponent. Zde přichází na řadu vlastnost data. Vlastnost data říká Vue, které atributy by měly spustit vykreslení dané komponenty.

Funguje to tak, že když Vue vytvoří strom komponent, zkontroluje všechny atributy ve všech vlastnostech dat komponent a vytvoří gettery a settery pro každý atribut. Když se jeden z těchto datových atributů změní, Vue obdrží událost a může tak spustit opětovné vykreslení.

  data: function() {
    return { message: '' };
  }

Takže ve výše uvedeném příkladu, když se zpráva změní, Vue spustí překreslení této komponenty. K atributům ve vlastnosti data se přistupuje přímo pod tímto, takže v tomto případě message lze změnit pomocí this.message

Metody

Metody jsou místa, kam obvykle vkládáme logiku týkající se změn stavu komponenty. Zvažte následující

  <script>
    export default {
      name: 'app',
      data: () => ({
        clicks: 0,
      }),
      methods: {
        onClick() {
          this.clicks = this.clicks + 1;
        },
      },
    }
  </script>

  <template>
    <div>
      <button @click="onClick">click me</button>
      <div>
        You clicked {{ clicks }} times!!
      </div>
    </div>
  </template>

Tato jednoduchá součást počítá každé kliknutí. Když klikneme, zavoláme metodu onClick, která aktualizuje datový atribut kliknutí této komponenty. Když se proměnná dat kliknutí aktualizuje, Vue si všimne a provede překreslení této komponenty a poté zobrazí správnou hodnotu stavu této komponenty.

Syntaxe šablony

Vue používá syntaxi HTML jako šablona, ​​která je výkonná a odstraňuje většinu potřeby psát Javascript do šablony. V šabloně napíšeme HTML s některými dalšími direktivami Vue a deklarativně svážeme vykreslené prvky DOM s daty instance Vue.

Nejzákladnějším typem datové vazby jsou dvojité závorky pro tisk dat do DOM

  <div>
    {{ message }}
  </div>

Datová vazba

Když chceme svázat určitý kus dat s deklarací komponenty nebo prvku v šabloně, použijeme direktivu v-on.

  <h1 v-on:title="title">
    {{ message }}
  </h1>

v-on říká, že title je javascriptový prvek, který by se měl nacházet ve script tagu komponenty. v-on má většinou používanou zkratku :

  <h1 :title="title">
    {{ message }}
  </h1>

Události

Když chceme poslouchat událost DOM, jako je kliknutí, posloucháme to pomocí v-on vue směrnice také. Vue má jinou zkratku pro události, @

  <button v-on:click="actionOnClick">
    click me
  </button>

  <!-- shorthand -->
  <button @click="actionOnClick">
    click me
  </button>

v-if vs v-show

v-if a v-show jsou 2 různé způsoby, jak rozhodnout, zda by se prvky měly zobrazovat v uživatelském rozhraní. Mají zásadní rozdíl v tom v-if odebere prvek z DOM, když je false, zatímco v-show nastavte display:none .

  <div v-if="show" />

  <div v-show="show" />

v-for

v-for se používá při iteraci přes prvky v šabloně. Klíče "musí" být zadány, protože je to klíč, který Vue váže k DOM k prvku. Klíče musí být pro daný prvek jedinečné a poskytnutí nejedinečného klíče bude mít za následek chybné aktualizace.

  <div v-for="item in items" :key="item.id">
    {{ item.name }}
  </div>

Nedělejte to

  <div v-for="(item, index) in items" :key="index">
    {{ item.name }}
  </div>

Protože index není specifický pro položku, ale pro iteraci, pokud by se prvky v položkách změnily, například při řazení nebo filtrování, aktualizovaly by se nesprávné prvky.

Komunikace komponent

Stránka v aplikaci Vue se skládá z mnoha malých komponent ve stromu komponent, jak jsme viděli v sekci komponent. Dost často chceme komunikovat mezi komponentami ve stromu komponent. Existují 2 způsoby komunikace, nahoru a dolů. Když komunikujeme, posíláme data dolů do podřízených komponent, což bude v podřízené komponentě viditelné jako rekvizity. Když chce podřízená komponenta komunikovat s nadřazenou komponentou, vyšle událost.

Vysvětleme také na příkladu

  <script>
    export default {
      name: 'animals',
      data: () => ({
        animalList: ['dog', 'cat', 'horse']
        selectedAnimal: '',
      }),
      methods: {
        onSelect(animal) {
          this.selectedAnimal = animal;
        },
      },
    }
  </script>

  <template>
    <div>
      <dropdown :list="animalList" @selected="onSelect">
      <div v-if="selectedAnimal">
        You selected {{ selectedAnimal }}
      </div>
    </div>
  </template>

Nejprve máme zvířecí komponentu, tato komponenta zobrazuje rozevírací seznam a vybranou hodnotu tohoto rozevíracího seznamu. Seznam, který chceme v rozevíracím seznamu zobrazit, odešleme této komponentě a také posloucháme událost selected , u kterého jsme nastavili vybranéZvíře data vlastnictví.

  <script>
    export default {
      name: 'dropdown',
      props: ['list'],
      methods: {
        onSelect(event) {
          this.$emit('selected', event.target.value);
        }
      }
    }
  </script>

  <template>
    <select @change="onSelect">
      <option v-for="item in list" :value="item" :key="item">{{item}}</option>
    <select>
  </template>

Komponenta rozevíracího seznamu vykreslí seznam, který jí předají rekvizity, a vyšle událost, když je vybrána hodnota v rozevíracím seznamu. To ukazuje, jak data proudí dolů k podřízeným komponentám pomocí rekvizit a jak mohou být události emitovány a naslouchány nadřazenými komponentami.

Vypočítaná vlastnost

Vypočítané jsou getry v komponentě. Výsledek getterů je uložen do mezipaměti a bude přepočítán pouze v případě, že se změní hodnoty, na kterých závisí ve vlastnosti data. Vypočtené hodnoty lze použít jak ve značce script, tak v značce šablony.

  computed: {
    getMessage() {
      return this.message.firstname + '' + this.message.lastname;
    }
  }

Takže při prvním použití tohoto výpočtu bude výsledek uložen do mezipaměti a bude znovu vyhodnocen pouze v případě, že se změní atribut dat zprávy.

Computeds jsou také dobrým místem pro umístění kódu Javascript, který by jinak byl umístěn do šablony, a něčeho, co direktivy šablony vue nepokrývají. Například když chceme v šabloně iterovat pouze část pole.

  computed: {
    getFilteredArray() {
      return this.array.filter(item => item.message === this.message);
    }
  }

Pak bychom mohli filtrovat přes getFilteredArray vypočítané v šabloně namísto použití Javascriptu přímo v šabloně.

Vlastnost sledování

Ve vlastnosti watch můžeme naslouchat změnám v datech, počítaných nebo rekvizitách, a když se změní, máme zpětné volání, které se spustí. Jako

  watch: {
    message(value) {
      this.doStuff();
    }
  }

Když se zpráva změní, v tomto případě zavoláme doStuff.

Události životního cyklu

Každá instance komponenty ve stromu komponent má určitou životnost, stručně:

  • vytvoří se při vložení do DOM

  • aktualizuje se během doby, kdy je v DOM, pokud se změní rekvizity nebo data

  • zničí se, když by měl být odstraněn z DOM.

V komponentě Vue můžeme naslouchat těmto událostem a když k nim dojde, připojit se k těmto událostem a provádět akce. Například jedna událost životního cyklu se nazývá připojená a je spuštěna, když je instance komponenty připojena do DOM. Tato událost se stane jednou během životnosti každé instance komponenty, a když k této události dojde, můžeme se rozhodnout, co dělat, když se naše komponenta připojí. Například:

  mounted() {
    this.fetchFromApi().then(res => this.resultFromApi = res);
  }

Nejčastěji používané události životního cyklu jsou:

  • vytvořeno, když je komponenta vytvořena a před jejím vložením do DOM

  • namontován, když je komponenta vložena do DOM

  • aktualizováno, když se komponenta znovu vykreslí

  • zničeno, když je komponenta zničena

Úplný příklad toho, kdy je spuštěna každá událost životního cyklu, naleznete v diagramu životního cyklu v dokumentech vues.

Cvičení

Po přečtení tohoto článku doufám, že jste dostali dobrý úvod do VueJS. Vytvořil jsem sérii cvičení pro vyzkoušení VueJs a vytvoření aplikace počasí. Podívejte se prosím na cvičení na mém githubu.