Vue z lotu ptaka: jak zacząć korzystać z Vue.js

Chwyć swoją kopię Visual Dictionary CSS włącznie. diagramy wszystkich właściwości CSS.

Zdjęcie Sama Barka na Unsplash

Zawsze chciałeś zacząć uczyć się kodować w środowisku Vue, ale jakoś nie masz czasu w napiętym harmonogramie.

Może czujesz się przytłoczony przez wszystkie biblioteki i frameworki? Samouczek Vue z tego ptaka (wprowadzenie) może pomóc.

Podobnie jak React, Vue dzieli twoją aplikację JavaScript na kilka części:

  • obiekt aplikacji
  • metody i właściwości członków
  • oraz rzeczywisty widok (tutaj znajdują się elementy HTML).

Vue ma atrybuty HTML oparte na v

Vue dodaje wiele niestandardowych atrybutów do elementów, których zwykle nie widać w standardowym HTML, poprzedzając je znakiem v-.

Na przykład istnieje v-html, v-if, v-else i wiele innych. Wszystkie mają swój konkretny cel: renderowanie elementów. Rzućmy okiem.

Przełączniki boolowskie

Innym atrybutem v-show jest przełączanie elementów w oparciu o ich stan widoczności.

Jest to określone w danych właściwości aplikacji Vue jako {boolean: true;}.

Następnie w swoim HTML możesz użyć go do określenia, które elementy mają być wyświetlane.

Witaj!

Ilekroć App.data.boolean ma wartość true, element

będzie widoczny.

Twoja logika aplikacji może teraz „włączyć” element

„włączony” lub „wyłączony” w kodzie. Zmiana jest renderowana automatycznie.

Pętla

Dyrektywa v-for służy do tworzenia pętli do wyświetlania elementów HTML.

Oznacza to, że możesz osadzać iteratory bezpośrednio w elementach HTML w celu renderowania list danych przechowywanych w tablicy w stanie twojej aplikacji Vue. Nie musisz wpisywać tego samego elementu HTML w kółko.

Oto klasyczny przykład iteratora pętli.

Najpierw przygotuj dane w obiekcie aplikacji:

niech E = nowy Vue ({
     el: „#L”, // link do elementu id = „L”
   dane: {
  przedmiotów : [
      {message: „One”},
      {message: „Two”,}
      {message: „Three”}]}
});

Teraz w głównym kontenerze aplikacji HTML:

      
  • {{item.message}}

Dyrektywa v-for ma format „dla pozycji w elementach”.

Oznacza to, że tworzysz nową zmienną o nazwie item w swojej pętli {{... tutaj ...}}. Elementy właściwości pochodzą z samego obiektu danych aplikacji.

Spowoduje to wyświetlenie tablicy elementów obiektów JSON jako elementów HTML!

Byłoby to tak samo jak ręczne pisanie następującego HTML:

      
  • Jeden
  •   
  • Dwa
  •   
  • Trzy

Nie będę wchodził w szczegóły każdego atrybutu opartego na v i tego, co robi w tym samouczku. Ale jak widać, mogą być bardzo przydatne.

Jak w ten sposób budujesz aplikacje Vue?

Aplikacje budowlane

Łącząc dane stanu aplikacji z natywnymi atrybutami opartymi na v, tworzysz powiązania między logiką a renderowaniem widoku aplikacji.

To skraca twoją aplikację JavaScript, oszczędzając przepustowość (szczególnie w dużych aplikacjach). Pomaga także szybciej wykonywać zadania.

Na poniższym zrzucie ekranu rusztowanie aplikacji to miejsce, w którym będą renderowane wszystkie Twoje tagi i szablony.

Działa to bardzo podobnie do React. Vue traktuje główną aplikację

jako kontener dla całej aplikacji. Przechowuje właściwości i metody w obiekcie aplikacji (patrz poniżej).

Na zrzucie ekranu niebieska linia wskazuje sposób powiązania danych aplikacji z elementami HTML wyświetlającymi widok.

Zielona linia łączy twoje metody ze zdarzeniami.

Zwróć uwagę na czerwony kontur na powyższym obrazku. W Vue musisz powiązać adresy URL z atrybutem: href, a nie z atrybutem href. Jeśli tego nie zrobisz, link nie będzie działać.

// Poprawnie (zwróć uwagę na atrybut wiodący: przed href)
 {{url}} 
// Błąd (URl się nie uruchomi)
 {{url}} 

dane aplikacji

Podczas budowania aplikacji w Vue (lub nawet w innych podobnych ramach lub bibliotekach) zwykle myślisz o jednym podstawowym miejscu do przechowywania danych. W React może to być własność państwowa. W Vue jest po prostu przechowywany w obiekcie danych.

Zgodnie z samą dokumentacją Vue przechowywanie danych - często określane jako źródło prawdy - jest przechowywane we właściwości surowych danych w samym głównym obiekcie aplikacji:

const sourceOfTruth = {}

const application = new Vue ({data: sourceOfTruth});

Fajną rzeczą w tym jest to, że możesz przechowywać wartość we właściwości data: {...} i automatycznie udostępniać ją w swoich elementach HTML poprzez v-text, v-pre, v-once (renderowanie tylko raz) i v-cloak (poczekaj, aż strona zakończy renderowanie i Vue zostanie zamontowane) i wiele innych atrybutów.

Innymi słowy, właściwości (prymitywne wartości, obiekty i metody) stają się wszechobecne w całej aplikacji i mogą być używane we wszystkich dodatkowych funkcjach, jakie oferuje Vue w tabeli… do użycia wraz z atrybutami rozpoczynającymi się od prefiksu v.

I tylko notatka dodatkowa. Jeśli unikniesz używania v-cloak, możesz doświadczyć artefaktów renderowania. Na przykład styl CSS przeskakuje w ciągu pierwszej sekundy od załadowania aplikacji.

Obiekt aplikacji Vue

To tutaj zainicjujesz swoje dane i napiszesz metody aplikacji, które załatwią sprawę.

Jak widać, masz szereg właściwości i metod - tak jak w zwykłej klasie JavaScript.

Poniżej znajduje się zrzut ekranu przedstawiający główny obiekt aplikacji Vue. W tym miejscu budujesz logikę swojej aplikacji, przechowujesz właściwości, ciągi adresów URL i metody niestandardowe. To jak oddzielenie logiki kodu od widoku.

Kiedy dopiero zaczynasz, dobrym pomysłem jest zapoznanie się z widokiem z lotu ptaka, zanim przejdziesz do kodu.

Ponieważ nie wpisujesz kodu w tagach