narzędzie do tworzenia w vue – vue-cli

npm install -g @vue/cli

 

Vue, czym jest, co zawiera:

  • mechanizmy templateowania kodu czy powiązywanie danych z elementami DOMu poprzez zapisanie wyrażenia w potrójnym nawiasie klamrowym {{{ myText }}} gdzie myText: „Hello <br> beautiful world” – zostanie zinterpretowane jako kod html i po słowie Hello kolejne rozpoczną się od nowej lini, w nowszej wersji Vue poprzez użycie v-html

tworzenie projektu

dołączenie skryptu vue.js do kodu

  • wersja developerska – https://vuejs.org/js/vue.js
  • wersja produkcyjna – https://vuejs.org/js/vue.min.js

– vue create <project name>

  1. manualny setup projektu:
  2. technologie tworzonej aplikacji:
    1. TypeScript
    2. PAW
    3. Router ✓
    4. Vuex
    5. CSS pre-processors ✓
    6. Linter / Formatter ✓
    7. Unit testing ✓
    8. E2E Testing
  3. CSS pre-procesor – sccs/sass
  4. ESLint + Airbnb
  5. Lint on save
  6. unit testin na Jest lub Mocha + Chai
  7. in dedicated config files – w osobnym pliku

Dyrektywy

atrybuty stosowane w szablonach, poprzedzone prefiksem v-

  • v-model – wiązanie elementów DOM (np input) z wartościami obiektu data
  • v-for – wykonywanie pętli na powiązanym elemencie DOM
    • kiedy zamkniemy w nawiasach nazwę wywołania pojedynczego odwołania dostajemy dostęp do indexu konkretnego odwołania: v-for=”(id, index) in userIds” :key=”index”
  • v-if – warunkowe renderowanie elementu DOM
  • v-else
  • v-show
  • v-on – dołącza do elementu detektor zdarzeń.
    • alias @ – v-on:keyup.enter=”addItem” = @keyup.enter=”addItem” – more
  • v-bind – wiązanie wyrażeń do atrybutów elementów DOM
    • alias : – v-bind:title=”MyTitle” = :title=”MyTitle”

 

dyrektywa v-bind – pozwala łączyć reaktywny element z obiektu data z templatem, skrótowo zastępowana :

v-bind:style=”myStyle” skracamy do :style=”myStyle”

 

Użycie Vue

  • el – wskazujemy nadrzędny element którego cała zawartość będzie obserwowana i przetwarzana jako wirtualne drzewo DOM (Virtual DOM)
  • data – funkcja przechowywująca  dane
  • methods – przechowuje funkcje dostępne w zasięgu instancji
  • computed – wartości obliczane dynamicznie

Odwołanie się do powyższych właściwości za pomocą this

 

Tagi slot

stanowią one placeholder, zamiast nich renderowane jest to co zostało umieszczone w elemencie rodzica.

 

const NewComponent = {
  name: 'NewComponent',
  template: `
<h2>Lorem ipsum dolor</h2>

`
}

new Vue({
  el: "#app",
  components: {
    NewComponent,
  },
  data: {
    name: "Agnieszka",
    myStyle: {
      color: '#e22117'
    }
  },
  methods: {
    handleClick() {
      alert('heeello!');
    }
  },
  template: `
    


&lt;div&gt;


&lt;h1 :style="myStyle"&gt;Hello {{name}}&lt;/h1&gt;



&lt;NewComponent/&gt;
&lt;button v-on:click="handleClick"&gt;click me&lt;/button&gt;
&lt;/div&gt;



  `
});

deklaracja użycia stworzonych komponentów przez obiekt components, a użycie poprzez zamieszczenie nazwy w tagach.

dyrektywa v-on – obsługa eventów, skrótowo zastępowana @ + nazwa eventu
v-on:click=”handleClick” skracamy do @click=”handleClick”

dyrektywa v-model – tworzy 2-way binding

Komponenty tworzymy w plikach z rozszerzeniem .vue a potem importujemy do pliku .js

 

cukier syntaktyczny do v-banding i @input=”handlerchange”

 

Eventy

  • @click
  • @keypress
  • @keyup

v-model

pozwala na two way banding – przypisując do pola input v-model=”name” zmieniamy wartość pola poprzez zmianę tekstu na stronie w polu input

Event modifiers

modyfikuje sposób w jaki event nasłuchuje, poprzez znak . i wprowadzenie filtra np klawisz alt:


&lt;button @click.alt="logMessage"&gt;Click Me!&lt;/button&gt;

@click.prevent – nadany na link blokuje jego domyślną akcję przejścia na stronę.

dokumentacja

 

if else statement

v-if

v-else-if – kiedy pierwszy element ma deklarację v-if, a drugi v-else-if – tylko przy false pierwszego, drugi jest rozpatrywany.


&lt;button @click="toggleName"&gt;Click Me to {{ showName }} name&lt;/button&gt;
&lt;button @click="toggleAge"&gt;Click Me to {{ showAge }} age&lt;/button&gt;



mario



25



xxx

v-for

Komponenty
każdy komponent reprezentuje odmienny część aplikacji, strony – header, footer, login panel

App.vue – root component –