Skip to content

3. проект [vuejs-01]: основи

Щоб пояснити код, що виконується в [vuejs-00], ми спростимо його в [vuejs-01]. Ми дублюємо папку [vuejs-00] у [vuejs-01]:

Image

Проєкт [vuejs-01] складається в основному з чотирьох файлів:

  • [main.js] [2] є точкою входу в проект;
  • [App.vue, HelloWorld.vue] та [3-4] — це компоненти [Vue.js], які опціонально містять такі елементи:
    • [<template>...</template>]: код HTML;
    • [<script>...</script>]: код JavaScript, пов’язаний із кодом HTML;
    • [<style>...</style>]: стиль CSS, пов’язаний із кодом HTML;
  • [public/index.html] [5]: документ HTML, що відображається командою [npm run serve];

Файл [public/index.html], що відображається під час виконання проєкту, виглядає так:


<!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>
    <!-- згенеровані файли будуть автоматично вставлені -->
  </body>
</html>

Отже, цей файл HTML статично нічого не відображає. Тут немає коду HTML. Відображення є динамічним: код jS проекту згенерує HTML, який повністю замінить тег [<div id=’app’>] у рядку 14. Код HTML, згенерований кодом jS проекту та вставлений замість тегу [<div>] у рядку 14, походить із тегів [template] компонентів [vue.js], файли з розширенням [.vue].

Код HTML динамічно вставляється у рядок 14 за допомогою наступного скрипта [vuejs-01/main.js]:


// імпортування
import Vue from 'vue'
import App from './App.vue'

// конфігурація
Vue.config.productionTip = false

// інстанціювання проекту [App]
new Vue({
  render: h => h(App),
}).$mount('#додаток')

Коментарі

  • рядок 2: об’єкт [Vue] надається фреймворком [vue.js];
  • рядок 3: об’єкт [App] надається файлом [vuejs-01/App.vue];
  • рядок 6: конфігурація об’єкта [Vue];
  • рядки 9–11: саме ці рядки:
    • генерують код HTML додатка. У рядку 10 вказано, що його генерує файл [App.vue];
    • завантажують код HTML, згенерований у рядку 10, у розділ [<div id=’app’></div>] файлу [public/index.html];

Будь-який проект [Vue.js] може зберегти файл [index.html] без змін.

Файл [App.vue] з початкового проєкту [vuejs-00] у проєкті [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>

Коментарі

  • фрагмент [.vue] складається щонайбільше з трьох розділів:
    • [<template>...</template>]: код HTML;
    • [<script>...</script>]: код JavaScript, пов’язаний із кодом HTML;
    • [<style>...</style>]: стиль CSS, пов’язаний із кодом HTML;

Тут у нас немає розділу [style].

  • рядки 1–6: код HTML фрагмента (сторінки, компонента, вигляду тощо);
  • рядки 2–5: розділ [template] може містити лише один елемент. Зазвичай розміщують розділ [div], який охоплює весь HTML фрагмента. Також можна розмістити тег <template>;
  • рядок 3: зображення;

Image

  • рядок 4: компонент із назвою [HelloWorld]. Принцип роботи [Vue.js] полягає у створенні веб-сторінок за допомогою фрагментів, визначених у файлах [.vue], як-от [App.vue]. Цей компонент визначений у файлі [HelloWorld.vue], що зазначений у рядку 9 відповідного скрипта jS;
  • рядок 4: компонент може приймати параметри. Параметром тут є атрибут [msg];
  • рядки 8–17: скрипт jS фрагмента (або компонента);
  • рядок 9: щоб мати змогу використовувати компонент [HelloWorld] у компоненті [App], потрібно імпортувати його визначення у частину [script];
  • рядки 11–16: скрипт визначає об’єкт та експортує його, щоб зробити його доступним зовні;
  • рядок 12: атрибут [name] визначає ім’я експортованого компонента;
  • рядки 13–15: атрибут [components] перелічує компоненти, які використовує компонент [App]. Вони експортуються разом із ним;

У рядку 9 немає обов’язкової вимоги, щоб компонент [HelloWorld] мав таку саму назву, як і файл, що його визначає. Його можна імпортувати як [X] та експортувати як компонент [Bonjour]:

Image

  • рядок 14: компонент [X] експортується під назвою [Bonjour]. Далі він використовується під цією назвою, рядок 4;

Перший варіант є найпоширенішим, тому ми будемо визначати наші компоненти саме таким чином;


<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>

Рядок 14 є скороченням для коду [HelloWorld : HelloWorld]: компонент [HelloWorld] (праворуч, імпортований у рядку 9) експортується під назвою [HelloWorld] (ліворуч).

Image

Ми спрощуємо компонент [HelloWorld.vue] наступним чином:


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

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

Коментарі

  • компонент [HelloWorld] має таку саму структуру файлу, як і головний компонент [App];
  • рядок 3: тут відбувається обчислення виразу JavaScript, а саме виразу [msg];
  • рядки 10–12: визначають властивості компонента, а точніше — його параметри. Коли компонент [App] створив екземпляр компонента [HelloWorld], він зробив це за допомогою такого синтаксису: 

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

Компонент [HelloWorld] створюється шляхом присвоєння значення параметру (атрибуту) [msg]. Якщо простежити [template] від компонента [HelloWorld], то він набуває такого вигляду:


<div>
    <h1>Notre première application Vue.js</h1>
</div>
  • рядки 7–14: властивості компонента, визначені у вигляді об’єкта, який експортується;
    • рядок 9: компонент експортується під назвою [HelloWorld];
    • рядки 10–12: його параметри визначаються властивістю [props];

У підсумку, якщо об’єднати шаблони двох використаних компонентів [App, HelloWorld], файл [index.html] матиме такий вигляд:


<!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>

Ми запускаємо додаток, змінивши команду [serve] [1] у файлі [package.json]:

Image

Тоді відобразиться сторінка [2].

Тепер розглянемо код цієї сторінки:

Image

  • у [1], замінити на [clic droit];
  • в [2] — вихідний код сторінки. Бачимо, що це код вихідного файлу [index.html], і це не те, що було відображено. Саме сторінка [index.html] була завантажена спочатку. Потім, динамічно, код JavaScript змінив цю сторінку, але це нам не показується;

Коли сторінки генеруються динамічно за допомогою JavaScript, опція [2] не має сенсу. Потрібно перейти до інструментів браузера (F12 у Firefox), щоб переглянути код сторінки, яка зараз відображається:

Image

  • у [1] — інспектор DOM (Document Object Model) відображуваного документа;
  • на [2] — те, що насправді міститься в цьому DOM;
  • [3-4] — інструменти, які ми будемо використовувати для відображення об’єктів JavaScript, що використовуються фреймворком [Vue.js];
  • [4] — це розширення (у даному випадку для Firefox) для налагодження додатків [Vue.js]:
    • для Firefox: [https://addons.mozilla.org/fr/firefox/addon/vue-js-devtools/];
    • для Chrome: [https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd];

Розглянемо вкладку [Vue] [4]:

Image

Вигляд [1-4] показує нам структуру [Vue.js] документа: корінь документа [2] (index.html) містить компонент [App] (3), який, у свою чергу, містить компонент [HelloWorld] (4). При натисканні на [4] з’являються властивості компонента [HelloWorld] [5].

У [4] (праворуч) видно індикатор [$vm0]. Це ім’я змінної, яке можна використовувати в консолі JavaScript [6] для позначення об’єкта [HelloWorld]. Зробимо це:

Image

  • у [2] ми обчислюємо вираз [$vm0], що призводить до відображення його структури. Зазвичай нам не доведеться безпосередньо використовувати цю структуру;

На завершення продемонструємо можливості [hot reload] за допомогою команди [serve], яка використовується для виконання проєкту:

  • у [App.vue] змініть повідомлення, яке відображає [HelloWorld]:

Image

  • у [1] змінюється текст повідомлення;
  • у [2-3] сторінка автоматично оновлюється без нашого втручання;

Тепер ми створимо різні проекти [vuejs-xx], щоб проілюструвати важливі моменти [Vue.js]. Під «важливими» слід розуміти «ті, які ми будемо використовувати в клієнті [vue.js] сервера розрахунку податку». Інші «важливі» моменти не розглядатимуться, якщо вони не використовуються в клієнті. Отже, це не буде вичерпним оглядом [vue.js].

https://stahe.github.io
Цей навчальний курс, написаний Сержем Тахе, надається громадськості на умовах Creative Commons «Вказання авторства — Некомерційне використання — Поділитися на рівних умовах 3.0 Без змін.