Patrik Eder

Úvod do Vue

Vue - čti [vjů] je progresivní javascript framework, kterej je možný použít téměř všude (od celýho návrhu singlepage aplikací až po využití vybraných komponent).
Super na něm je, že "neznásilňuje" DOM, protože sám renderuje jednotlivý komponenty podle nastavených šablon.
Doteď jsem stavěl frontendy na bázi hlavní funkce/třídy webu, na kterou jsem lepil prototypy dalších podfunkcí. Jednotlivý části webu se neměnily dynamicky, ale překreslením celýho DOM objektu (vanilla -

document.querySelector('div').innerHTML = ' ... '

, nebo jQuery

$("div").html('...')

) což byla docela prasárna.
Pokročilejší renderování už jsem řešil něčím ve stylu

document.createElement('div')

Vlastně jsem nikdy na frontendu nepoužíval šablonování. Když jsem si před rokem (při zkoumání Angular - ten mi smrděl) všiml toho, že všechny moderní frameworky používají šablony, říkal jsem si, že je to pro moje použití naprosto zbytečná věc.
JENŽE opak je pravdou!

Šablona totiž neznamená "šablona vzhledu" - resp sestavení HTML objektů a doplnění případných proměnných (třeba překlad webu) jak jsem si myslel, ale Templejty se dají využít tak komplexně až z toho jde hlava kolem.
Nevim jak konrétně šablonování využívají ostatní nový frameworky, ale Vueácký v-bind, v-html, v-for, v-if a mnoho dalších logických operátorů mě fakt dostaly!

Vue.js je super v nativní podobě - při psaní komponent stačí vytvořit jeden soubor s koncovkou .vue, kterej vlastně není nic jinýho než obyčejný html bez body.
Soubor zpravidla obsahuje:

Šablonu
```
<template/>
```
Modul
```
<script/>
```
Styl
```
<style/>
```

Pro představu jeden example, kterej se objevuje všude na webu - konkrétně přičítací tlačítko ale trochu jinak - počítání metodou.

<template>
 <button @click="mujklik">Podpora ES6 - Stisknuto: {{kliku}} krát</button>
</template>
<script>
 module.exports = {
  name: "Klikatko",
  data(){
   return {
    kliku: 0
   };
  },
  methods:{
   mujklik(){
    this.kliku++;
   }
  }
 }
</script>
<style scoped>
 button{
  background-color: #41b883;
  color: #34495e;
  border: 0;
  padding: 10px;
 }
</style>

A je hotovo... řekněme, že to uložim jako klikatko.vue
Pokud tuhle komponentu necham načíst do Vue instance, stačí v jakýkoliv templejtě napsat:

<klikatko/>

a automaticky se vyrenderuje tlačítko, který si bude přičítat hodnotu při kliknutí.
Prolink na example

Jen pro info - v example jsou moduly 2... a to konkrétně dlouhý starý ES5 a pak ES6 s arrow funkcema. Pokud se Vám nezobrazuje tlačítko s ES6, koukejte si nainstalovat moderní prohlížeč, kterej měl poslední aktualizaci alespoň koncem roku 2015 ;)

No a co dál? Filtry, direktivy, pluginy, axios promise .... je toho fakt mega.
Doporučuju kouknout na ofiko web Vue.js kde je všechno popsaný dopodrobna.
Sám nemam na backendu webpack, node.js a další ultramoderní nástroje.... (jo a babel voe... babel pro podporu mrtvýho IE), ale i tak se dají naplno využít frontendový nástroje :)

Možná - hodim na git komponenty, který tak nějak tvořim... je to sranda, ale víceméně se jedná o specializovaný komponenty pro danej projekt => pro Vás k ničemu... asi... :D
Na začátek doporučuju mrknout na zdrojovej kód examplu s tlačítkem - tam máte preloadnutý potřebný JSka a už si můžete testovat...

Dík za pozornost!