vue podstawy

Stan aplikacji

globalny stan aplikacji. Każdy komponent posiada swoje własne dane, stan aplikacji to dane dostępne z poziomu wszystkich komponentów.

Dane stanu aplikacji są inicjalizowane podczas jej uruchamiania. Każdy komponent aplikacji może je odczytać, ale nie może ich łatwo zmienić.

Każdy element stanu posiada mutację — funkcję wywoływaną po wystąpieniu określonych zdarzeń w komponentach aplikacji.

Komponenty

fragmenty aplikacji posiadające własne dane oraz widoki, które mogą być użyte wielokrotnie. Każdy komponent ma swój własny zasięg stylów i powiązań, dzięki czemu jest całkowicie odizolowany od pozostałych.

tworzenie

var MyComponent = Vue.extend({...})

rejestracja

Vue.component('my-component', MyComponent);

użycie

<my-component></my-component>

Deklaratywne widoki

widoki umożliwiające bezpośrednie wiązanie danych modeli JavaScript z ich reprezentacją.

Dyrektywy

v-model, v-if, v-show

atrybuty elementów HTML w Vue.js, które umożliwiają różne sposoby wiązania danych  z warstwą widoku.

Tworzenie własnych dyrektów z wykorzystaniem funkcji:

  • bind – wewnątrz niej można dołączyć do elementu detektor zdarzeń
  • update – pobiera jako argument poprzednią i nową wartość, kod wykonany w przypadku zmiany danych
  • unbind – wykonywana przy odłączeniu dyrektywy od elementu (usunięcie detektora zdarzeń)

Vue 2.0 zalecane jest używanie komponentów zamiast niestandardowych dyrektyw

Wzorzec MVVM

wzorzec architektoniczny Model-Widok-WidokModel (ang. Model View ViewModel), którego najważniejszym elementem jest WidokModel (ang. ViewModel), odgrywający rolę pośrednika między widokiem a modelem i umożliwiający przepływ danych między nimi.

Wzorzec MVC

wzorzec architektoniczny Model-Widok-Kontroler (ang. Model View Controller) – umożliwia oddzielenie widoku od modelu i sposobu, w jaki przepływa między nimi informacja.

Jednokierunkowe wiązanie danych

rodzaj wiązania danych, w którym zmiany w modelu danych są automatycznie propagowane do warstwy widoku, ale nie na odwrót.

Reaktywność

natychmiastowa propagacja zmian danych do warstwy widoku.

Dwukierunkowe wiązanie danych

rodzaj wiązania danych, przy którym zmiany w modelu danych są automatycznie propagowane do warstwy widoku, a zmiany zachodzące w warstwie widoku są natychmiast odzwierciedlane w modelu danych

Vuex

architektura aplikacji Vue. Umożliwia proste zarządzanie stanem aplikacji.

vue-cli

pozwala tworzyć i konfigurować szablony projektów na bazie bibliotek Webpack i Browserify, zapewnia obsługę automatycznego odświeżania (ang. hot reloading), zawiera narzędzia dla programistów.

Właściwości obliczane (ang. computed properties)

właściwości wewnątrz obiektu data, które pozwalają uniknąć osadzania obliczeń bezpośrednio w kodzie szablonu. Więcej in- formacji na temat właściwości obliczanych znajdziesz w oficjalnej dokumentacji na stronie http://vuejs.org/guide/computed.html.

Podstawowe mechanizmy

  • deklaratywne wiązanie danych
  • budowanie komponentów
  • pluginy
    • dodające globalne właściwości lub metody (vue-element)
    • dodające globalne zasoby (vue-touch)
    • dodające metody do prototypu Vue
    • dostarczające usługi zewnętrzne lub interface API (vue-router)

Pluginy

zawierają metodę install, mającą dostęp do globalnego obiektu Vue i może go modyfikować.

Korzystanie z plugina za pomocą metody use globalnego obiektu Vue z instancją pluginu jako parametru: Vue.use(instancja pluginu) np Vue.use(Router)

#vue