VueJS 2: píšeme komponentu - schématická značka (SVG grafika)

O komponentách ve VueJS již na tomto blogu vyšlo: VueJS 2: komponenty a VueJS 2: píšeme komponentu - zobrazení věku

Vlastní komponenta pomocí VueJS

Zadání

Vytvoříme komponentu, která zobrazí schématickou značku rezistoru. Použijeme přitom SVG grafiku.

Řešení

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

Komponenty se bude jmenovat svg-resistor (anglický název), bude mít atributy: x (x-ová souřadnice), y (y-ová souřadnice), rotate (úhel natočení), color (barva).

Na webové stránce se použije tímto způsobem (ovšem uvitř elementu <svg>!): 

<svg-resistor x="120" y="120" :rotate="-45" ></svg-resistor>

Každý z atributů x, y, rotate, color má svou výchozí hodnotu; nebude-li zadán (jako v tomto případě, kdy chybí color), bude použita výchozí hodnota.

Deklarace komponenty

Vlastnosti (properties) komponenty jsou v části props, u každé je uveden datový typ a výchozí hodnota.

V části computed (vypočítané nebo vyhodnocené hodnoty) se skládá textový řetězec, jehož výsledek může vypadat např.: translate(100, 80), rotate(-90)a slouží k posunu (translate) a otočení (rotate) komponenty při jejím vykreslení uvnitř elementu SVG.

Část template definuje vizuální podobu komponenty, tj. to, co VueJS vloží do webové stránky namísto komponenty <svg-resistor></svg-resistor>

Vue.component("svg-resistor", {

  props: {

    x: {

      type: Number,

      default: 0

    },

    y: {

      type: Number,

      default: 0

    },

    rotate: {

      type: Number,

      default: 0

    },

    color: {

      type: String,

      default: "black"

    }

  },

  computed: {

    transform: function(){

      return "translate(" + this.x + ", " + this.y + "), " + "rotate(" + this.rotate + ")";

    }

  },

  template: '<path :transform="transform" d="M 0, 0 h 10 v -7.5 h 30 v 15 h -30 v -7.5 M 40, 0 h 10 "  :stroke="color" fill="none" />'

});

Použití v HTML

<svg width="302" height="302">

  <svg-resistor x="120" y="120" :rotate="-45" ></svg-resistor>

  <svg-resistor x="30" y="80" :rotate="0" ></svg-resistor>

</svg>

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).

VueJS 2: píšeme komponentu - zobrazení věku

Vlastní komponenta pomocí VueJS

Zadání

Vytvoříme komponentu, která ze zadaného roku narození vypočítá a zobrazí věk.

Řešení

Poznámka: komponenta bude velmi jednoduchá, jde jen o ukázku; nebudou se kontrolovat vstupní data.

Komponenta se bude jmenovat age, s jedním atributem born (rok narození). Použije se na webové stránce tímto způsobem: <age born="2000"></age>

Výsledkem bude zobrazený věk.

1. krok

Vue.component("age", {

  template: "<span>{{age}}</span>",

});

Do HTML stránky se vykreslí obsah template, tj. <span>{{age}}</span>

Uvnitř spanu je ve dvojitých složených závorkách proměnná age (nemá nic společného s názvem komponenty!). Místo ní se vloží její hodnota, tj. vypočítaný věk.

2. krok, přidání atributu born

Vue.component("age", {

  template: "<span>{{age}}</span>",

  props: ["born"],

});

Přidali jsme do props atribut born, který použije naše komponenta. Tento atribut se chová jako proměnná, jejíž hodnotu zadáme. To nám umožní ji použít  stylem <age born="2000"></age>

3. krok, výpočet věku

Vue.component("age", {

  template: "<span>{{age}}</span>",

  props: ["born"],

  computed: {

    age: function(){

      var actYear = new Date().getFullYear();

      return actYear - this.born;

    }

  }

});

Přidali jsme do computed výpočet age; ve funkci se do lokální proměnné actYear uloží aktuální rok, funkce vrací návratovou hodnotu příkazem return (jako rozdíl mezi aktuálním rokem a rokem narození), která se vloží do proměnné age. Její hodnota (tj. vypočítaná hodnota) se zobrazí mezi dvěma spany. Pozor, atribut born musíme uvnitř funkce zapsat jako this.born

4. použití v HTML

<age born="1974"></age> <age born="2000"></age> <age born="2007"></age>

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).

VueJS 2: komponenty

Poslední dobou se prosazují webové komponenty (vysvětleno např. zde). Krátce řečeno, jsou to uživatelsky definované tagy pro HTML. Buď jen zobrazí určitý obsah nebo umí i reagovat na hodnoty atributů a/nebo na události.

Webové komponenty se dají skvěle psát i pomocí frameworku VueJS. Je k nim výborná, podrobná a srozumitelná dokumentace.

Vypůjčím si hotový příklad z dokumentace.

1. Registrace komponenty (definice)

Vue.component('my-component', {

  template: '<div>A custom component!</div>'

})

Název nové komponenty (HTML tagu) je my-component, tag se tedy zapíše <my-component> (samozřejmě je to párový tag).

Template je HTML šablona, neboli to, co se zobrazí v prohlížeči v místě, kde se použije komponenta.

2. Vytvoření instance VueJS

// create a root instance

new Vue({

  el: '#example'

})

3. Použití komponenty v HTML stránce

<div id="example">

  <my-component></my-component>

</div>

4. Výsledný kód v prohlížeči (zobrazená HTML stránka)

<div id="example">

  <div>A custom component!</div>

</div>

Na místě, kde je ve zdrojovém kódu zapsána komponenta <my-component></my-component> se zobrazí obsah šablony (to, co je definováno jako template).

Komponenty mohou mít i atributy, které mohou (nemusí) mít hodnoty. Také mohou reagovat na události.

Při psaní webových stránek a programování webových a hybridních mobilních aplikací se webové komponenty silně prosazují. Zpřehledňují kód a umožňují jednoduchým způsobem opakovaně použít již definovaný obsah a/nebo chování.