Kurs Vue.js krok po kroku – Przypisywanie atrybutów

Dzisiaj zajmiemy się przypisywaniem wartości do różnych atrybutów HTML. Coś co w zasadzie będziemy robili bardzo często i coś co jest absurdalnie proste (jak w zasadzie wszystko inne w Vue.js).

Do przypisywania wartości w Vue.js służy dyrektywa v-bind po której wymieniamy element do którego chcemy dane podstawić. Najlepiej widać to na przykładach:

<img v-bind:src="imageUrl">
<div :style="{ fontSize: fontSize + 'px' }"></div>

var app = new Vue({
  el: '#app',
  data: {
    imageUrl: 'someUrl',
    fontSize: 30
  }
})

Podobnie jak w przypadku omawianych zdarzeń i tutaj mamy skrót. Tak jak tam zamienialiśmy v-on:click na @click, tak tutaj v-bind:style możemy zamienić na samo :style.

Możemy nie tylko podstawiać suche dane ale także na nich operować. Chyba najczęściej przywoływany przykład to ten w którym po wykonaniu jakiejś akcji chcemy pokazać jakiś komunikat, tudzież zmienić mu kolor np. na czerwony przy powstaniu błędu.

<div class="alert" :class="{ 'alert-success': hasSuccess, 'alert-danger': hasError }">
    <p>Tutaj nasz komunikat</p>
</div>
    
<button @click="toggleClass">Przełącz klasę</button>

var app = new Vue({
  el: '#app',
  data: {
    hasSuccess: true,
    hasError: false,
  },
  methods: {
    toggleClass() {
      this.hasError = true;
      this.hasSuccess = false;
    }
  }
})

Co można prosto przetłumaczyć na: “jeżeli dana zmienna jest na TRUE to przypisz klasę, jak FALSE to oczywiście nie”.

Jeszcze prościej to widać tutaj:

<button @click="fontSize++">Więcej px</button>
<button @click="fontSize--">Mniej px</button>

<p :style="{ fontSize: fontSize + 'px' }">
  Obecnie font ma: {{ fontSize }} px
</p>

Kanał na YouTube

Ten kurs to przede wszystkim kurs VIDEO co oznacza, że więcej informacji, przykładów, omówienie poszczególnych kroków i w ogóle dużo więcej niż w powyższym tekście znajdziesz w materiale video. Materiał pojawi się w tym miejscu w ciągu najbliższych 2 tygodni. Nie chcesz przegapić? Subskrybuj kanał na YouTube!

Kurs Vue.js krok po kroku

1. Wprowadzenie i hello world
2. Chrome DevTools
3. Warunki i pętle
4. Zdarzenia i metody
5. Przypisywanie atrybutów
6. kolejne
7. odcinki
8. wkrótce