Vue - szybki start

Vue.js to framework często używany z Laravelem. W dodatku łatwy do nauczenia i można z niego korzystać do różnej wielkości projektów, tak małych jak i większych. Uczymy się podstaw Vue. Do dzieła.

Ok, będziemy potrzebować trzech rzeczy. Pierwsza – CDN z atrybutem defer oraz odnośnik do pliku JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js" defer></script> 
    <script src="app2.js" defer></script>
</head>

Druga – root element naszej apki, do którego zrobimy mount. Musi mieć id albo coś, co można złapać selektorem:

<body>
    <div id="app">
    </div>
</body>
</html>

Trzecia – instancja apki + mount w pliku JavaScript:

const app = Vue.createApp({
    data() {
      return {
        name: "John Doe",
        age: 30
      };
    },
  });
  
  app.mount('#app');

Data to obiekt danych, które są dostępne dla naszej apki. Do mount idzie selektor root elementu. Teraz możemy wyświetlić sobie te zmienne za pomocą interpolacji:

<div id="app">
        <p>Hello {{name}}. You are {{age}} years old!</p>
</div>

Możemy też używać wyrażeń w tych nawiasach:

<div id="app">
        <p>Hello {{name.toUpperCase()}}. You are {{age * 12}} months old!</p>
</div>

Dodajmy url do naszych zmiennych:

const app = Vue.createApp({
    data() {
      return {
        name: "John Doe",
        age: 30,
        link: "https://www.google.com"
      };
    },
  });
  
  app.mount('#app');

Żeby bindować wartość atrybutu HTML (nie text content) z wartością z data potrzebna nam dyrektywa v-bind:

<div id="app">
        <p>Hello {{name.toUpperCase()}}. You are {{age * 12}} months old!</p>
        <p>Visit <a v-bind:href="link">Google</a></p>
    </div>

Istnieje też zapis skrócony:

<div id="app">
        <p>Hello {{name.toUpperCase()}}. You are {{age * 12}} months old!</p>
        <p>Visit <a :href="link">Google</a></p>
</div>

Ok, dodajmy czysty HTML gdzieś do data:

const app = Vue.createApp({
    data() {
      return {
        name: "John Doe",
        age: 30,
        link: "https://www.google.com",
        raw: "<strong>Hello World!</stron>"
      };
    },
  });
  
  app.mount('#app');

Do wyświetlania czystego HTML służy dyrektywa v-html:

<div id="app">
        <p>Hello {{name.toUpperCase()}}. You are {{age * 12}} months old!</p>
        <p>Visit <a :href="link">Google</a></p>
        <p v-html="raw"></p>
</div>

Ok, będziemy mieć Vue na oku i powoli go sobie przyswajać.

Vue – szybki start