Skip to content

3. projekt [vuejs-01]: podstawy

Aby wyjaśnić kod wykonywany w [vuejs-00], uprościmy go w [vuejs-01]. Duplikujemy folder [vuejs-00] w [vuejs-01]:

Image

Projekt [vuejs-01] składa się zasadniczo z czterech plików:

  • [main.js] i [2] stanowią punkt wejścia do projektu;
  • [App.vue, HelloWorld.vue] i [3-4] są komponentami pliku [Vue.js], zawierającymi opcjonalnie następujące elementy:
    • [<template>...</template>]: kod HTML;
    • [<script>...</script>]: kod JavaScript powiązany z kodem HTML;
    • [<style>...</style>]: styl CSS powiązany z kodem HTML;
  • [public/index.html] [5]: dokument HTML wyświetlany przez polecenie [npm run serve];

Plik [public/index.html] wyświetlany podczas uruchamiania projektu to ten:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vuejs</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- wygenerowane pliki zostaną automatycznie wstrzyknięte -->
  </body>
</html>

Ten plik HTML nie wyświetla zatem niczego statycznie. Nie ma tu kodu HTML. Wyświetlanie jest dynamiczne: kod jS projektu wygeneruje kod HTML, który całkowicie zastąpi tag [<div id=’app’>] w wierszu 14. Kod HTML, wygenerowany przez kod jS projektu i wstawiony w miejsce znacznika [<div>] w wierszu 14, pochodzi ze znaczników [template] komponentów [vue.js], a pliki mają rozszerzenie [.vue].

Kod HTML jest dynamicznie wstawiany w wierszu 14 przez następujący skrypt [vuejs-01/main.js]:


// importy
import Vue from 'vue'
import App from './App.vue'

// konfiguracja
Vue.config.productionTip = false

// instancjonowanie projektu [App]
new Vue({
  render: h => h(App),
}).$mount('#aplikacja')

Komentarze

  • wiersz 2: obiekt [Vue] jest dostarczany przez framework [vue.js];
  • wiersz 3: obiekt [App] jest dostarczany przez plik [vuejs-01/App.vue];
  • wiersz 6: konfiguracja obiektu [Vue];
  • wiersze 9–11: są to wiersze, które:
    • generują kod HTML aplikacji. Wiersz 10 – generuje go plik [App.vue];
    • ładują kod HTML wygenerowany w wierszu 10 do sekcji [<div id=’app’></div>] pliku [public/index.html];

Każdy projekt [Vue.js] może zachować plik [index.html] w niezmienionej postaci.

Plik [App.vue] z pierwotnego projektu [vuejs-00] został uproszczony w następujący sposób w projekcie [vuejs-01]:


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

Komentarze

  • Fragment [.vue] składa się z maksymalnie trzech sekcji:
    • [<template>...</template>]: kod HTML;
    • [<script>...</script>]: kod JavaScript powiązany z kodem HTML;
    • [<style>...</style>]: styl CSS powiązany z kodem HTML;

W tym przypadku nie ma sekcji o nazwie [style].

  • wiersze 1–6: kod HTML fragmentu (strona, komponent, widok itp.);
  • wiersze 2–5: sekcja [template] może zawierać tylko jeden element. Zazwyczaj umieszcza się sekcję [div], która obejmuje cały element HTML fragmentu. Można również umieścić tag <template>;
  • wiersz 3: obraz;

Image

  • wiersz 4: komponent o nazwie [HelloWorld]. Zasada działania [Vue.js] polega na tworzeniu stron internetowych przy użyciu fragmentów zdefiniowanych w plikach [.vue], takich jak tutaj [App.vue]. Komponent ten jest zdefiniowany w pliku [HelloWorld.vue], określonym w wierszu 9 powiązanego skryptu jS;
  • wiersz 4: komponent może przyjmować parametry. Parametrem jest tutaj atrybut [msg];
  • wiersze 8–17: skrypt jS fragmentu (lub komponentu);
  • wiersz 9: aby móc używać komponentu [HelloWorld] w komponencie [App], należy zaimportować jego definicję do części [script];
  • wiersze 11–16: skrypt definiuje obiekt i eksportuje go, aby udostępnić go na zewnątrz;
  • wiersz 12: atrybut [name] określa nazwę eksportowanego komponentu;
  • wiersze 13–15: atrybut [components] zawiera listę komponentów wykorzystywanych przez komponent [App]. Są one eksportowane wraz z nim;

W wierszu 9 nie ma wymogu, aby komponent [HelloWorld] nosił tę samą nazwę co plik, który go definiuje. Można by go zaimportować jako [X], a wyeksportować jako komponent [Bonjour]:

Image

  • wiersz 14: komponent [X] jest eksportowany pod nazwą [Bonjour]. Jest on następnie używany pod tą nazwą, wiersz 4;

Pierwsza wersja jest najczęściej spotykana, dlatego zdefiniujemy nasze komponenty w ten sposób;


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

Wiersz 14 stanowi skrót dla kodu [HelloWorld : HelloWorld]: komponent [HelloWorld] (po prawej, zaimportowany w wierszu 9) jest eksportowany pod nazwą [HelloWorld] (po lewej).

Image

Upraszczamy komponent [HelloWorld.vue] w następujący sposób:


<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

Uwagi

  • komponent [HelloWorld] ma taką samą strukturę pliku jak główny komponent [App];
  • wiersz 3: mamy tu obliczenie wyrażenia JavaScript, w tym przypadku wyrażenia [msg];
  • wiersze 10–12: definiują właściwości komponentu, a dokładniej jego parametry. Gdy komponent [App] utworzył instancję komponentu [HelloWorld], zrobił to przy użyciu następującej składni: 

<HelloWorld msg="Notre première application Vue.js" />

Komponent [HelloWorld] jest instancjonowany poprzez nadanie wartości parametrowi (atrybutowi) [msg]. Jeśli prześledzimy [template] komponentu [HelloWorld], otrzymamy:


<div>
    <h1>Notre première application Vue.js</h1>
</div>
  • wiersze 7–14: właściwości komponentu zdefiniowane w postaci eksportowanego obiektu;
    • wiersz 9: komponent jest eksportowany pod nazwą [HelloWorld];
    • wiersze 10–12: jego parametry są definiowane przez właściwość [props];

Ostatecznie, po połączeniu szablonów obu użytych komponentów [App, HelloWorld], wyświetlony plik [index.html] będzie wyglądał następująco:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>vuejs</title>
</head>
<body>
  <noscript>
    <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>
      <h1>Notre première application Vue.js</h1>
    </div>
  </div></body>
</html>

Uruchamiamy aplikację, modyfikując polecenie [serve] [1] w pliku [package.json]:

Image

Wyświetlana strona to wówczas [2].

Teraz przyjrzyjmy się kodowi tej strony:

Image

  • w [1], zamień na [clic droit];
  • w [2], kod źródłowy strony. Widać, że jest to kod z początkowego pliku [index.html], a nie ten, który został wyświetlony. To właśnie strona [index.html] została początkowo załadowana. Następnie kod JavaScript dynamicznie zmodyfikował tę stronę, ale nie jest to nam pokazane;

Gdy strony są generowane dynamicznie przez JavaScript, opcja [2] nie ma żadnego zastosowania. Należy przejść do narzędzi przeglądarki (F12 w przeglądarce Firefox), aby zobaczyć kod aktualnie wyświetlanej strony:

Image

  • w [1] – inspektor DOM (Document Object Model) wyświetlanego dokumentu;
  • na [2], czyli rzeczywistą zawartość tego DOM;
  • [3-4] – narzędzia, których będziemy używać do wyświetlania obiektów JavaScript wykorzystywanych przez framework [Vue.js];
  • [4] to rozszerzenie (w tym przypadku dla przeglądarki Firefox) służące do debugowania aplikacji [Vue.js]:
    • dla przeglądarki Firefox: [https://addons.mozilla.org/fr/firefox/addon/vue-js-devtools/];
    • dla przeglądarki Chrome: [https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd];

Przyjrzyjmy się zakładce [Vue] [4]:

Image

Widok [1-4] pokazuje nam strukturę [Vue.js] dokumentu: katalog główny dokumentu [2] (index.html) zawiera komponent [App] (3), który z kolei zawiera komponent [HelloWorld] (4). Kliknięcie na [4] powoduje wyświetlenie właściwości komponentu [HelloWorld] oraz [5].

W [4] (po prawej) widoczny jest wskaźnik [$vm0]. Jest to nazwa zmiennej, której można użyć w konsoli JavaScript [6] w celu wskazania obiektu [HelloWorld]. Zróbmy to:

Image

  • w [2] powoduje obliczenie wyrażenia [$vm0], co skutkuje wyświetleniem jego struktury. Zazwyczaj nie będziemy musieli bezpośrednio korzystać z tej struktury;

Na koniec pokażmy możliwości [hot reload] w ramach polecenia [serve] używanego do wykonania projektu:

  • w [App.vue] zmień komunikat wyświetlany przez [HelloWorld]:

Image

  • w [1] należy zmodyfikować wyświetlany komunikat;
  • w [2-3] strona jest automatycznie aktualizowana bez naszej interwencji;

Teraz utworzymy różne projekty [vuejs-xx], aby zilustrować istotne aspekty [Vue.js]. Przez „istotne” należy rozumieć „te, które będziemy wykorzystywać w kliencie [vue.js] serwera obliczającego podatek”. Inne „ważne” kwestie zostaną pominięte, jeśli nie są wykorzystywane w kliencie. Nie będzie to zatem wyczerpująca prezentacja [vue.js].

https://stahe.github.io
Ten kurs-samouczek, napisany przez Serge'a Tahé, jest udostępniany publicznie na warunkach Creative Commons Uznanie autorstwa – Bez wykorzystania komercyjnego – Na tych samych warunkach 3.0 Niezmienione.