Jak rozpocząć pracę z Vue (część 1)

Nieznane słowo: Vue – tym zdaniem wyróżnia się jedno z moich narzędzi sprawdzających gramatykę. To zabawne, ponieważ prawdopodobnie dla większości programistów front-end, Vue jest znanym słowem. W końcu wszyscy kochamy frameworki JavaScript.

Dużo pracowałem z AngularJS. Później musiałem nauczyć się KnockoutJS, ponieważ Magento go używa. Nie powiedziałbym, że mi się to podobało (naprawdę), więc zacząłem pracować z Reactem, a kilka miesięcy temu miałem okazję pracować z aplikacjami Vue, więc zacząłem się uczyć Vue.

Nie było to dla mnie zbyt trudne i ostatecznie dołączyłem do zespołu Vue Storefront. Mój mały wniosek jest taki, że frameworki to tylko frameworki, a kiedy masz doświadczenie w jednym z nich, możesz szybko uczyć się od innych.

Oczywiście, jeśli chodzi o różne frameworki, API jest inne, podejście jest inne, ale na koniec dnia są instrukcje if-else, wycieki pamięci i problemy do rozwiązania.

Frameworki nie mają znaczenia. Ułatwiają budowanie interfejsów użytkownika, ale znajomość JavaScvript jest tutaj wskazówką, więc jeśli jesteś dobry w JavaScript, po prostu naucz się API frameworka i rozwiązuj problemy. W tym artykule pokażę, jak rozpocząć pracę z Vue z perspektywy programisty, który ma doświadczenie w innych frameworkach. W tym artykule nie znajdziesz nic o tym, jak wypisać hello world w konsoli, dodać 1+1, czym jest komponent i tak dalej. Mam nadzieję, że znasz już sekret jak console.logować Hello world. 😉

Konfiguracja projektu przy użyciu Vue CLI

W React mamy do dyspozycji Create React App. Tutaj można znaleźć coś podobnego i równie dobrego: Vue CLI. Pomaga zainstalować aplikację Vue. Za pomocą interfejsu Vue CLI można ręcznie wybrać żądane funkcje, takie jak vuex, router Vue, prettier, obsługa języka TypeScript itp. Vue CLI wygeneruje dla ciebie pliki projektu.

Można śmiało powiedzieć, że konfiguracja aplikacji Vue przy użyciu Vue CLI jest łatwym zadaniem. Spróbujmy.

Najpierw upewnij się, że masz zainstalowany Node i menedżer pakietów. Używam Node v14 i Yarn.

$ yarn global add @vue/cli @vue/cli-service-global
$ vue --version    // @vue/cli 4.5.15 for me

Przejdź do katalogu, w którym chcesz utworzyć nowy projekt i użyj następującego polecenia:

$ vue create another-cool-project

Następnie można zobaczyć coś takiego:

Użyłem opcji Default (Vue 3) ([Vue 3] babel, eslint) i mój projekt został pomyślnie zainstalowany.

🎉  Successfully created project another-cool-project.
👉  Get started with the following commands:

$ cd another-cool-project
$ yarn serve

Istnieje polecenie Yarn serve, które uruchamia serwer deweloperski, więc użyjmy ich, a w międzyczasie pokażę im najważniejsze katalogi i pliki nowo utworzonego projektu.

Struktura projektu Vue

Katalog publiczny

Zawiera publiczne pliki statyczne, takie jak index.html i favicon

folder src

Spędzisz tutaj dużo czasu, ponieważ jest to miejsce, w którym można znaleźć pliki źródłowe, takie jak komponenty, zasoby, pliki CSS i tak dalej.

plik main.js

Main.js jest punktem wejścia aplikacji Vue i zawiera kod JavaScript odpowiedzialny za inicjalizację aplikacji Vue.

katalog komponentów

Jeśli chcesz utworzyć komponent Vue, jest to miejsce, w którym to zrobisz.

Plik app.vue

Jest to podstawowy komponent, powiedzmy główny komponent aplikacji. Jest on używany w main.js do tworzenia nowej aplikacji Vue, takiej jak ta:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Wszystkie pliki i katalogi projektu powinny wyglądać następująco w kodzie Visual Studio:

Zrozumienie plików Vue

Kiedy widzisz plik .vue po raz pierwszy, może to być dziwne, ponieważ jest to mieszanka kodu JavaScript, HTML i CSS. Spójrz na to:

<template>
  <h1>This is the title</h1>
</template>

<script>
export default {
  name: 'Title',
}
</script>

<style>
h1 {
  color: violet
}
</style>

Istnieją więc trzy tagi: szablon, skrypt i styl. Pierwszy z nich to szablon komponentu, który opisuje strukturę kodu HTML. Składnia szablonów Vue pozwala na użycie HTML + specjalnych, powiedzmy, dyrektyw do powiązania danych, metod i zdarzeń z HTML.

W znaczniku script definiuje się komponenty i pisze kod JavaScript.

Znacznik stylu służy do stylizacji. Można na przykład używać stylów globalnych lub lokalnych (scoped), CSS lub SCSS. Szczegóły później.

Data binding

Chcę stworzyć prostą aplikację, która będzie pokazywała karty piłkarzy (ostatnio zacząłem grać w Fifa Ultimate team, więc to mnie inspiruje).

Każdy zawodnik ma imię i nazwisko, drużynę, kraj, pozycję i cenę. Na razie możemy umieścić zwykły HTML w App.js:

<template>
  <div class="player">
    <h1>Robert Lewandowski</h1>
    <p><strong>FC Bayern, Poland</strong></p>
    <p>Position: Striker</p>
    <p>Price: 1000</p>
  </div>
</template>

Jak zrobić to dynamicznie? Każdy komponent może mieć właściwość danych, funkcję, która zwraca obiekt, a następnie można użyć tego obiektu w szablonach i kodzie JavaScript komponentu.

Dodaj właściwość danych do komponentu:

export default {
  name: 'App',
  data() {
    return {
      name: 'Robert Lewandowski',
      club: 'FC Bayern',
      country: 'Poland',
      position: 'Striker',
      price: 1000
    }
  }
}

Teraz możemy użyć tych danych w szablonie i musimy powiązać każdą właściwość z HTML. Aby to zrobić, musimy użyć składni {{ }}, na przykład {{ name }} zastąpi nazwę ciągiem „Robert Lewandowski”.

Zobacz:

<template>
  <div class="player">
    <h1>{{ name }}</h1>
    <p><strong>{{ club }}, {{ country }}</strong></p>
    <p>Position: { position }</p>
    <p>Price: { price }</p>
  </div>
</template>

Wiązanie atrybutów lub właściwości komponentów

Dodajmy nową właściwość do odtwarzacza o nazwie: image:

image: './avatar.png' 

aby powiązać tę właściwość z atrybutem src obrazu, można użyć dyrektywy v-bind w tym kodzie:

<img v-bind:src="image" v-bind:alt="name" />

będzie renderowana w przeglądarce w następujący sposób:

<img src="./avatar.png" alt="Robert Lewandowski">

Wskazówka: istnieje skrót dla v-bind. Zobacz:

<img :src="image" :alt="name" />

Renderowanie warunkowe

Mam pomysł, aby dodać konkretną etykietę do zawodnika, która pokazuje, czy cena zawodnika jest niska czy wysoka.

Na przykład:

• jeśli cena jest niższa niż 5000, wyświetl „niska”.
• w przeciwnym razie wyświetl „wysoka”.

Vue udostępnia dyrektywy vue-if i vue-else, które umożliwiają warunkowe renderowanie znaczników:

<p>
  Price: {{ price }}
  <strong v-if="price < 2000">Low</strong>
  <strong v-else>High</strong>
</p>

Pamiętaj, że v-else działa tylko wtedy, gdy węzeł HTML znajduje się obok poprzedniego, który ma ustawioną dyrektywę v-if.

Obliczone właściwości

Zmodyfikujmy funkcję za pomocą etykietowania i dodajmy logikę do naszego komponentu aplikacji:

Pokaż etykietę tylko wtedy, gdy gracz jest wystawiony na sprzedaż.

Aby to zrobić, dodajmy nową właściwość do obiektu gracza o nazwie forSale:

forSale: false 

i zmodyfikować v-if w szablonie:

<p>
  Price: {{ price }}
  <strong v-if="price < 2000 && forSale">Low</strong>
  <strong v-if="price <= 2000 && forSale">High</strong>
</p>

To działa, ale jest trochę dziwne. Przykładanie logiki do świątyni nie jest dobrym pomysłem, nawet w tak prostym przykładzie. Nie martw się. Vue ma piękny mechanizm radzenia sobie z takimi sytuacjami: obliczane właściwości odpowiedzialne za zarządzanie złożoną logiką.

Zobacz, jak zdefiniować computed property:

export default {
  name: 'App',
  data() {
   // data here
  },
  computed: {
    playerLabel: function () {
      if (!this.forSale) {
          return null;
        }
        
        return (this.price < 2000) ? 'Low' : 'High'
    }
  }
}
</script>

Uwaga: Słowo kluczowe „this” w kodzie odnosi się do instancji Vue.

Teraz możesz użyć go w szablonie w następujący sposób:

<strong v-if="playerLabel">{{ playerLabel }}</strong>

Ważna uwaga: computed properties są buforowane na podstawie ich reaktywnych zależności. W naszym przypadku oznacza to, że szablon ponownie wyrenderujecomputed property tylko wtedy, gdy zmieni się flaga forSale lub cena.

Jeśli pochodzisz z Reacta, możesz porównać computed properties do haka useMemo.

Metody

Kiedy tworzysz aplikację internetową, powszechną rzeczą jest powiązanie zdarzeń z kodem javascript lub, powiedzmy, metodami.

Opcja metod umożliwia dodawanie metod do komponentów Vue. Stwórzmy metodę, która przełącza flagę forSale.

export default {
  name: 'App',
  data() {
    // data here
  },
  computed: {
    // computed properties
  },
  methods: {
    toggleForSale() {
      this.forSale = !this.forSale;
    }
  }
}
</script>

Więc mamy zadeklarowaną metodę i wiążemy ją z elementem DOM? Najpierw utwórzmy przycisk:

<button type="button">
  <span v-if="forSale">Remove from transfer list</span>
  <span v-if="!forSale">Add to transfer list</span>
</button>

Aby dołączyć zdarzenie do metody, musimy użyć dyrektywy v-on. W naszym przypadku chcemy połączyć metodę ze zdarzeniem kliknięcia:

<button type="button" v-on:click="toggleForSale">

Można również użyć czegoś takiego:

<button type="button" @click="toggleForSale">

Uwaga: Więcej o wydarzeniach opowiem później.

Watchers

Czasami trzeba obserwować, kiedy konkretna właściwość jest zmieniana i uruchomić jakiś kod. Vue udostępniło opcję oglądania. Zobacz:

export default {
  name: 'App',
  data() {
  },
  computed: {
  },
  methods: {
  },
  watch: {
    forSale(oldValue, newValue) {
      console.log(oldValue, newValue);
      // here you can a logic fired when forSale property is changed
      // for example an http request to external API can be fired here
      // axios.post(...)
    }
  }
}

Iteracja danych

Wyobraźmy sobie, że mamy więcej niż jednego gracza i chcemy wyświetlić ich wszystkich. Najpierw oczywiście musimy zmodyfikować nasz obiekt danych:

data() {
  return {
    players: [
      {
        id: 1,
        name: 'Mo Salah',
        club: 'Liverpool FC',
        country: 'Egypt',
        position: 'Striker',
        price: 2000,
        image: './avatar.png',
        forSale: false 
      },
      {
        id: 2
        name: 'Robert Lewandowski',
        club: 'FC Bayern',
        country: 'Poland',
        position: 'Striker',
        price: 3000,
        image: './avatar.png',
        forSale: true 
      }
    ]
  }
},

Zauważ, że dodałem właściwość id do każdego obiektu gracza. Wykorzystamy go później.

Aby iterować po tablicy, musimy użyć dyrektywy v-for:

<template>
  <div class="player" v-for="player in players" :key="player.id">
    <h1>{{ player.name }}</h1>
    <img :src="player.image" :alt="player.name" />
    <p><strong>{{ player.club }}, {{ player.country }}</strong></p>
    <p>Position: {{ player.position }}</p>
    <p>
      Price: {{ player.price }}
      <strong v-if="player.playerLabel">{{ player.playerLabel }}</strong>
    </p>
    <button type="button" @click="toggleForSale()">
      <span v-if="player.forSale">Remove from transfer list</span>
      <span v-if="!player.forSale">Add to transfer list</span>
    </button>
  </div>
</template>

Używając v-for, powtarzamy w tablicy graczy i otrzymujemy gracza. Następnie możemy uzyskać dostęp do właściwości obiektu gracza za pomocą odniesienia do gracza, takiego jak player.name, player. obraz itp.

Uwaga: po tej zmianie nasza etykieta ceny i detektory zdarzeń przestały działać, a to świetnie, ponieważ mamy kolejny problem do rozwiązania!

Rozwiążemy to, tworząc komponent gracza, ale… w następnym artykule.

Podsumowanie

Vue to świetny, progresywny framework, który może być dobrym wyborem nawet dla dużej aplikacji, jeśli myślisz o warstwie widoku.

Dzisiaj pokazałem ci kilka podstaw tworzenia aplikacji internetowych za pomocą Vue, ale tylko niewielką część. W kolejnych artykułach chciałbym przedstawić bardziej zaawansowane funkcje, takie jak:

• Komponenty Vue
• stylizacja
• zdarzenia
• state management
• formularze
• komunikacja z API
• testowanie
• i tak dalej

Skontaktuj się ze mną