Videokurz: Základy VueJS 2.x

Dnes byl publikován můj videokurz Základy VueJS

Obsah kurzu
1. Příprava, instalace Google Chrome a NetBeans. (01:17)

2. Založení projektu v NetBeans. (02:38)

3. Přidání VueJS do projektu, úvodní nastavení VueJS. (04:48)

4. Provázání mezi HTML a JS, vypsání obsahu proměnné. (04:32)

5. Data a funkce (1), práce s proměnnými a funkcemi. Praktický příklad - jednoduchá kalkulačka. Volání funkce po stisku tlačítka. (10:07)

6. Data a funkce (2), práce s proměnnými a funkcemi. Podmíněný příkaz, podmínka. (05:18)

7. Automatické funkce, automaticky vypočítané proměnné. (07:05)

8. Podmíněné zobrazení části HTML při splnění podmínky. (04:51)

9. Úprava struktury, umístění souborů v projektu. (06:05)

10. Kaskádové styly CSS, vizuální vzhled aplikace. (06:15)

11. Cyklus (1), vypsání více odstavců za sebou. (04:43)

12. Cyklus (2), vypsání dat z JS do HTML pomocí cyklu. (05:03)

13. Cyklus (3), vypsání dat (objektů) z JS do HTML pomocí cyklu, práce s objektem. (09:17)

14. Změna hodnoty atributu v HTML, zakázání tlačítka na základě podmínky, nastavení CSS třídy podle podmínky. (04:54)

15. Seznam osob (zadání projektu). Zadání vlastní samostatné práce - aplikace pro seznam osob. (08:09)

16. Seznam osob (HTML kód) - ukázka řešení HTML kódu. (07:59)

17. Seznam osob (HTML kód) - ukázka řešení VueJS kódu. (08:01)

Úvodní video

Online videokurz najdete na naucmese.cz

Připravuji videokurz: Základy VueJS

Pracuji na videokurzu, ve kterém se naučíte základy VueJS. Je to populární JS framework vhodný pro psaní webových a mobilních aplikací. 

VueJS je mnohem jednodušší než AngularJS, přesto je stejně mocný. Náplní kurzu bude praktické zvládnutí VueJS tak, abyste mohli samostatně naprogramovat jednoduchou aplikaci. Důraz je na praktickou část, vše si vysvětlíme a názorně ukážeme.

Je vhodné mít základní znalosti HTML, CSS a JS (není to podmínkou, ale hodí se). Dále potřebujeme vývojové prostředí (např. NetBeans) a prohlížeč Google Chrome.

Znalost základů VueJS otevírá cestu k vlastním webovým a mobilním aplikacím!

=== Videokurz je již publikován ===
https://www.naucmese.cz/kurz/video-zaklady-vuejs-2-x

Parsování dat z webu, praktický návod: cena benzínu

Parsování dat

Parsování dat je (v tomto konkrétním případě) proces získání informací z webové stránky. Získaná data pak můžeme použít např. ve webové nebo mobilní aplikaci, ale i jinak - fantazii se meze nekladou.

Google Spreadsheet (Google Sheet, tabulka Google)

Co má tabulka Google (obdoba Exelu) společného s parsováním dat z webu? Je to zdarma dostupná možnost; stačí mít účet u společnosti Google (např. email ve tvaru [jmeno]@gmail.com) a máme automaticky dostupné i online dokumenty. Využijeme šikovnou funkci ImportHTML.

Zdroj dat

Nejprve potřebujeme webovou stránku s požadovanými daty. Pro tento příklad jsem zvolil stránku s cenami benzínu a nafty.

Praktická ukázka

Nebudu zde popisovat celý postup, lepší bude vidět to celé "naživo". Publikoval jsem video, které vše krok za krokem vysvětluje.

VueJS 2: píšeme komponentu - zobrazení matematického výrazu (Katex/Latex)

Pomocí komponent si můžeme definovat vlastní HTML tagy a použít je na webové stránce. Na tomto blogu již vyšlo: VueJS 2: komponenty, VueJS 2: píšeme komponentu - zobrazení věku, VueJS 2: píšeme komponentu - schématická značka (SVG grafika)

Katex

Pro psaní matematických symbolů, rovnic, ... byl vyvinut nástroj Latex. Jeho modifikace od Khan Academy je Katex.

Zadání

Vytvoříme komponentu, která zobrazí matematický výraz (vzorec, rovnici, ...) pomocí nástroje Katex. 

Řešení

Poznámka: jde o ukázku, nebude se provádět kontrola vstupních údajů (hodnoty atributů).

Komponenta bude mít název katex a bude obsahovat jeden atribut expr (expression). Zobrazí zadaný matematický výraz v konvencích Katexu/Latexu do webové stránky.

Deklarace komponenty

Vue.component("katex", {

  replace: true,

  props: {

    expr: {

      type: String,

      default: ""

    }

  },

  data: function(){

  },

  computed: {

    _expr: function(){

      try {

        return katex.renderToString(this.expr, {throwOnError: false});  

      } catch (err) {

        return "" 

      }

    }

  },

  template: '<span v-html="_expr"></span>'

});

Komponenta obsahuje jednu vlastnost a to expr, do které vložíme požadovaný matematický výraz. V části template se zobrazí obsah jako HTML kód vygenerovaný pomocí katex.renderToString(), který se generuje v části computed.

Použití v HTML

Komponentu lze použít např. takhle:

<p>

 expression directly: <span v-katex="{expr: 'x_{1}=\\frac{1}{2} \\cdot a^2'}"></span>

</p>

Výsledek

Jak vypadá výsledek se můžete podívat tady (pokud chcete provést úpravy, nejprve prosím klepněte vpravo nahoře na fork, dostanete tak vlastní kopii).