Vue.js

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:

<button @click.alt="logMessage">Click Me!</button>

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

<button @click="toggleName">Click Me to {{ showName }} name</button>
<button @click="toggleAge">Click Me to {{ showAge }} age</button>



mario



25



xxx

v-for

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

App.vue – root component –