· 6 years ago · Jan 03, 2020, 10:04 PM
1### Rozdział 4
2
3### Wprowadzenie do Vue.js
4
5Tworzenie stron internetowych jest przedsięwzięciem angażującym wiele różnych technologi. Znajomość HTML, CSS, JavaScript, wybranego języka dla backendu, oraz SQL to zestaw startowy potrzebny przy każdym projekcie średnich rozmiarów. Każda z wymienionych technologii ma swoją własną specyfikę, podatności bezpieczeństwa i ograniczenia. Programiści dążący do zredukowania potrzebnego nakładu pracy, zmniejszenia ryzyka wystąpienia podatności bezpieczeństwa czy błędu, wybierają pracę z tzw. *Frameworkami*. **Frameworkiem nazywamy zestaw komponentów i bibliotek określających strukturę i mechanizm działania aplikacji**. {Riehle, Dirk (2000), [*Framework Design: A Role Modeling Approach*](http://www.riehle.org/computer-science/research/dissertation/diss-a4.pdf) (PDF), [Swiss Federal Institute of Technology](https://en.wikipedia.org/wiki/ETH_Zurich)}
6
7Obecnie jednym z najpopularniejszych frameworków w rozwoju systemów internetowych jest Vue.js. Autor pracy wybrał go za jego przystępną dokumentację techniczną, przejrzystość kodu i estetykę tworzonych interfejsów.
8
9W projekcie wykorzystano Vue.js w wersji 4.0.5. Na dzień pisania pracy jest to najnowsza stabilna wersja. W porównaniu do wcześniejszych, oferuje:
10
11#### Podgląd zmian "na żywo"
12
13Podczas projektowania aplikacji możliwa jest praca w trybie *serve*, który umożliwa podgląd wprowadzonych zmian bez konieczności ponownej kompilacji całego rozwiązania.
14
15#### Eliminacja nieużywanych bibliotek
16
17Biblioteki, które nie są używane w rozwiązaniu, nie są do niego dołączane, co zmniejsza rozmiar aplikacji.
18
19#### Edycja zmiennych aplikacji w przeglądarce
20
21W trybie deweloperskim możliwe jest zmienianie wartości zmiennych JavaScript w podglądzie aplikacji w przeglądarce. Ułatwia to szukanie błędów i dobieranie parametrów.
22
23#### Vue-CLI
24
25Zestaw narzędzi konsolowych. Automatyzuje przygotowanie projektu ze wspieranymi wtyczkami i instaluje potrzebne zależności.
26
27### Wybrane koncepty
28
29#### API
30
31> Kontrakt pomiędzy aplikacją kliencką i serwerem, który zapewnia, że na ściśle określony komunikat z zapytaniem klienta, serwer odpowie również w ściśle określony sposób lub rozpocznie określoną akcję.
32>
33> Bierhoff, Kevin (23 April 2009). ["API Protocol Compliance in Object-Oriented Software"](https://www.cs.cmu.edu/~kbierhof/thesis/bierhoff-thesis.pdf) (PDF). *CMU Institute for Software Research*. Retrieved 29 July 2016.
34
35#### Komponent
36
37
38
39Element aplikacji posiadający swój wygląd, umiejscowienie, realację z innymi komponentami i funkcje. Architektura komponentowa służy budowaniu projektów które korzystają w wielu częściach aplikacji ze wspólnych elementów. Są zatem dla aplikacji internetowych tym, czym dla c++ jest [programowanie obiektowe](John C. Mitchell, *Concepts in programming languages*, 2003.).
40
41*W Vue każdy komponent jest instancją Vue z pre-definiowanymi opcjami.* [odwołanie](https://vuejs.org/v2/guide/index.html)
42
43``` js
44// Definiowanie nowego komponentu o nazwie todo-item w kodzie JS
45Vue.component('todo-item', {
46 template: '<li>This is a todo</li>'
47})
48var app = new Vue(...)
49```
50
51```html
52<ol>
53 <!-- Tworzenie instancji komponentu todo-item w kodzie HTML -->
54 <!-- komponenty zapisuje się za pomocą tzw. kebab-case -->
55 <todo-item></todo-item>
56</ol>
57```
58
59
60
61Powyższy przykład wyróżnia się prostotą, która jednak ogranicza go w realnych zastosowaniach. Taki komponent wyświetlałby użytkownikowi taki sam tekst dla każdego elementu "todo-item" w aplikacji udającej listę zadań. Aby mieć większą kontrolę nad takim komponentem potrzebne jest użycie innej funkcjonalności Vue.
62
63#### Props
64
65Skrót od ang. *properties* czyli *właściwość*. Jest to rozwiązanie Vue pozwalające na dzielenie się wartościam przez komponenty (zazwyczaj przez te powiązane relacjami dziedziczenia)
66
67Rozwijając przykład z poprzedniego podrozdziału:
68
69```html
70<div id="app-7">
71 <ol>
72 <!--
73 Now we provide each todo-item with the todo object
74 it's representing, so that its content can be dynamic.
75 We also need to provide each component with a "key",
76 which will be explained later.
77 -->
78 <todo-item
79 v-for="item in groceryList"
80 v-bind:todo="item"
81 v-bind:key="item.id"
82 ></todo-item>
83 </ol>
84</div>
85```
86
87Teraz komponent *todo-item* akceptuje *prop*, który zostanie potem wykorzystany do przesłania wartości do nowego komponentu.
88
89
90Za pomocą dyrektywy *v-for* dla każdego elementu obiektu *grocery list* zostanie stworzony komponent *todo-item*
91
92Kazdy stworzony komponent będzie posiadał w swojej *prop'ie* obiekt *groceryList* z którego wykorzysta wartości dzięki dyrektywie `v-bind:todo="item"`.
93
94Kolejność pobierania wartości z elementów obiektu ustala dyrektywa `v-bind:key="item.id"`
95
96```js
97Vue.component('todo-item', {
98 props: ['todo'],
99 template: '<li>{{ todo.text }}</li>'
100})
101
102var app7 = new Vue({
103 el: '#app-7',
104 data: {
105 groceryList: [
106 { id: 0, text: 'Vegetables' },
107 { id: 1, text: 'Cheese' },
108 { id: 2, text: 'Whatever else humans are supposed to eat' }
109 ]
110 }
111})
112```
113
114
115
116Dzięki takiemu rozwiązaniu oddzielono komponenty dziedziczące od komponentu głównego. Możliwe jest dalsze rozwijanie komponentu *todo-item* bez wpływu na komponent główny. Podzielono też kod na dwa mniejsze moduły co wspomaga czytelność.
117
118[One-Way Data Flow](https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow)
119
120czy potrzebuję to opisywać jeśli moja aplikacja chyba z tego nie korzysta?
121
122Chyba nie, ogólnie to lepiej jak omówię funkcje z kodu których używam, dyrektywy i bindy i jeśli będę potrzebował ten koncept to dopiero. Co myślisz?
123
124
125
126#### Manager Zdarzeń
127
128z ang. *Event Manager*. System zarządzający komunikacją komponentów.
129Użytkownik podczas używania aplikacji nie ma bezpośrednio wpływu na wykonywane skrypty JavaScript. Aby aplikacja reagowała na jego działania skryptami potrzebujemy posłużyć się dyrektywą `v-on` która nasłuchuje zdarzeń z DOM i uruchamia skrypty.
130
131``` html
132<div id="example-1">
133 <button v-on:click="counter += 1">Add 1</button>
134 <p>The button above has been clicked {{ counter }} times.</p>
135</div>
136```
137
138```js
139var example1 = new Vue({
140 el: '#example-1',
141 data: {
142 counter: 0
143 }
144})
145```