Vue.js

narzędzie do tworzenia w vue – vue-cli

npm install -g @vue/cli

 

Vue, czym jest, co zawiera:

tworzenie projektu

dołączenie skryptu vue.js do kodu

– 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-

 

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

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

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 –

 

 

 

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.