Vue 2 podstawy

W tutorialu pokażę jak rozpocząć swoję przygodę z frameworkiem javascriptowym Vue. Vue jest jednym z frameworków javascriptowych. Nie jest tak popularny jak Angular czy React ale stopniowo zyskuje coraz większą popularność. Dzięki swojej prostocie i wszechstronności wzbudza ogromne zainteresowanie twórców aplikacji www. Służy do budowy efektywnych, reaktywnych, złożonych i skalowalnych aplikacji, przy czym pozwala na korzystanie z komponentów wielokrotnego użytku.

Aby rozpocząć pracę wystarczy dołączyć w swoim projekcie plik biblioteki vue.js. Alternatywnie można skorzystać z narzędzia vue-cli, które pozwala tworzyć i konfigurować szablony projektów na bazie bibliotek Webpack i Browserify. Oprócz tego vue-cli zapewnia obsługę automatycznego odświeżania (ang. hot reloading), a także zawiera narzędzia dla programistów. Pracę rozpoczniemy od prostszego sposobu czyli załączenia biblioteki vue z cdn-a do przykładowego pliku index.html.

<!-- dla strony developerskiej -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- dla produkcyjnej zalecane jest linkowanie do konkretnej wersji -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Na początek stwórzymy prosty plik html.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="vue-app">
    {{ message }}
  </div>

  <script src="app.js"></script>
</body>
</html>

oraz plik app.js:

var app = new Vue({
  el: '#vue-app',
  data: {
    message: 'Hello World!'
  }
});

Omówię teraz działanie kodu pokrótce. W pliku html wewnątrz tagu o id vue-app umieszczony jest zapis {{ message }}. W pliku javascript tworzymy nową instancję obiektu Vue. W atrybucie el określamy element, w którym html będzie przetwarzany przez Vue. W atrybucie data podaliśmy treść zmiennej message, której wartość wyświetlamy w htmlu. Stworzyliśmy właśnie pierwszą aplikację w Vue :). Jeśli chcemy przypisać jakąś wartość do atrybutu (w tym przypadku title) należy użyć poniższego zapisu.

<div id="vue-app">
	<span v-bind:title="message">
		teskt
	</span>
</div>

Można użyć również wersji skróconej v-bind.

<div id="vue-app">
	<span :title="message">
		tekst
	</span>
</div>

Napiszemy prostą metodę w Vue. Metodami są funkcje umieszczone w property methods.

var app = new Vue({
  el: '#vue-app',
  data: {
    message: 'Hello World!'
  },
  methods: {
    greet: function () {
      return 'Hi ' + this.message;
    }
  }
});

Na powyższym listingu napisaliśmy metodę greet(). Aby ją wywołać w html wystarczy napisać:

<div id="vue-app">
	<h1>{{ greet() }}</h1>
</div>

Jak się pewnie domyślasz wewnątrz tagu h1 zostanie wypisany tekst "Hi Hello World!". Zróbmy jeszcze jeden przykład z inną metodą oraz zobaczmy jak działa wiązanie danych za pomocą v-model. Jak widać dodaliśmy kolejną zmienną counter z domyślną wartością 0 oraz metodę add, która zwiększa po prostu ten licznik o podaną wartość.

var app = new Vue({
  el: '#vue-app',
  data: {
    message: 'Hello Vue!',
    counter: 0
  },
  methods: {
    greet: function () {
      return 'Good Morning '+this.name;
    },
    add: function (inc) {
        this.counter += inc;
    }
  }
});

Wypiszmy wartość licznika w html. Ponadto zauważ, że wiążemy za pomocą v-model zmienną counter z inputem tekstowym. Ponadto umieściliśmy button, który po kliknięciu doda wartość 10 do licznika (odpowiada za to modyfikator @click, można też użyć zapisu v-on:click). Zdarzy się to tylko raz, dlatego że mamy dopisany do click modyfikator .once. Więcej na ten temat w dokumentacji eventów vue.

<div id="vue-app">
    <h1>{{ greet() }}</h1>
    {{ message }}
    <br>
    <input type="text" v-model="counter">
    <br>Counter: {{ counter }}
    <br>
    <button @click.once="add(10)">+</button>
  </div>