Урок 2 :: Creating the Vue App :: Создание приложения Vue

Вот, что мы с Вами сделаем на этом уроке.
Vue Mastery

Пройдем по этой ссылке:
Creating the Vue App ➳

... Все внимательно послушаем, посмотрим, прочитаем.

Затем сделаем конспект (мой см ниже).

Конспект

Создание приложения Vue
Готовы ли вы создать приложение Vue? Чтобы начать этот урок, вы можете либо получить программой git коммандой checkout исходный код в ветке L2-start репозитория, либо перейти в CodePen, чтобы взять файлы там.

Примечание переводчика

Чтобы перейти на ветку с файлами начала урока 2 выполните команду:

git checkout L2-start

Чтобы перейти на ветку с файлами окончания урока 2 выполните команду:

git checkout L2-end

Ознакомление с исходным кодом.
Чтобы ознакомиться с исходным кодом, вы увидите, что у нас есть каталог assets. Внутри есть каталог для изображений. У нас есть также 2 графических файла для синих носков и зеленых носков. У нас также есть CSS-файл для всех наших стилей.

Внутри index.html, мы импортируем эти стили. Затем мы импортируем саму библиотеку Vue.js. Импорт библиотеки Vue по ссылке CDN - самый простой способ начать использовать Vue. Вы заметите, что во время этой записи я использую ссылку CDN для бета-версии Vue 3, но если вы смотрите это, а Vue 3 уже вышел, вам имеет смысл перейти на официальный ресурс с документацией Vue.js и скопировать ссылку CDN туда (“Для создания прототипов и обучения”). Замените ее в теге сценария вашего index.html файла.

Примечание переводчика

Здесь: Vue 3 - главная страница раздела подробно рассматривается процесс установки Vue 3 актуальной на сегодня (20210803) версии 3.1.5.

В нижней части файла мы импортируем наш main.js файл, который до сих пор довольно прост: только 1 строка const product = 'Socks'

Вы заметите, что в шаблоне есть элемент h1 с надписью “Product goes here.” (“Товар идет сюда”). Итак, теперь вопрос в следующем: как мы сможем показать наши замечательные носки с помощью Vue?

Создание приложения Vue
Чтобы отобразить наши данные в HTML, нам сначала нужно создать приложение Vue. В файле main.js, мы создадим наше приложение:

📄 main.js

const app = Vue.createApp({})

В качестве аргумента мы собираемся передать объект и добавить свойство данных. Это будет функция, которая возвращает другой объект, в котором мы будем хранить наши данные. Здесь мы добавим продукт в качестве элемента данных.

📄 main.js

const app = Vue.createApp({
    data() {
        return {
            product: 'Socks'
        }
    }
})

Теперь нам просто нужно убедиться, что мы импортируем наше приложение Vue в index.html файл.

📄 index.html

<!-- Import App -->
<script src="./main.js"></script>

Установка Нашего Приложения
Теперь, когда мы создали наше приложение, нам нужно подключить только что созданное приложение в наш DOM. Мы сделаем это внутри тега сценария, в нашем файлe index.html.

📄 index.html

<!-- Mount App -->
<script>
  const mountedApp = app.mount('#app')
</script>

К приложению app, которое мы только что создали применяем метод .mount(), для которого в качестве аргумента требуется селектор DOM. Это позволяет нам подключить приложение Vue к этой части нашего DOM.

Отображение данных
Теперь, когда мы создали, импортировали и смонтировали приложение Vue, мы можем начать отображать данные, которые находятся в нем.

Чтобы отобразить данные о продукте product в элементе h1, мы напишем:

📄 index.html

<div id="app">
  <h1>{{ product }}</h1>
</div>

Теперь, если мы проверим браузер, мы увидим, что наш “Продукт" успешно отображается. Отлично! Но как именно это работает?

Понимание принципов работы экземпляра Vue
Когда мы создавали наше приложение Vue, мы передали объект options, который позволил нам добавить некоторые дополнительные свойства для настройки приложения. Это создает наш экземпляр Vue, сердце нашего приложения Vue, которое питает все.

📄 main.js

const app = Vue.createApp({Options Object})

Импортировав это приложение и установив его в DOM, мы, по сути, подключили приложение к нашему DOM, предоставив нашему HTML прямую линию связи с приложением. Таким образом, наш код шаблона может получить доступ к параметрам приложения, таким как его данные.

Если вам интересно, что происходит с этим синтаксисом двойной фигурной скобки, вы можете представить его как телефон, у которого есть доступ к телефону в нашем приложении Vue. Из нашего шаблона мы можем спросить приложение: “Эй, что там за товар?”. И приложение отвечает: “Носки”. Когда страница отображается, мы видим, что на странице отображаются “Носки".

Если этот синтаксис двойной фигурной скобки или синтаксис усов является для вас новым, то не надо волноваться. Привыкните. Этот синтаксис позволяет нам писать выражения JavaScript. Другими словами, позволяет нам запускать валидный JavaScript в нашем HTML.

Реактивность Vue
Что произойдет, если мы изменим вид товара с “Носков” на “Ботинки”?

📄 main.js

const app = Vue.createApp({
    data() {
        return {
            product: 'Boots' // updated data value //
        }
    }
})

Из-за того, как работает Vue, содержание h1, которое связано со значением product, автоматически получит новое значение, и наш DOM обновится, чтобы отобразить “Boots” (“Ботинки”).

📄 index.html

<div id="app">
  <h1>{{ product }}</h1> <! -- обновления значения будут получены автоматически -->
</div>

Это происходит потому, что Vue реагирует. Под капотом Vue есть целая система реактивности, которая обрабатывает обновления. Когда значение данных изменяется, любое место, основанное на этих данных, автоматически обновляется для нас. Нам не нужно ничего делать, чтобы это произошло.

(В качестве примечания, здесь, на Vue Mastery, у нас есть целый курс реактивности Vue 3. Так что, если вы заинтересованы в изучении системы реактивности под капотом, вы можете пройти этот продвинутый курс позже.)

Примечание переводчика

А пока, для тренировки, попробуйте сделать следующие простые упражнения.

Упражнение 1. В консоле браузера (вызывается по F12) введите:
mountedApp.product и нажмите "Enter". Посмотрите, какое текущее значение отобразилось в консоле.

Упражнение 2. В консоле браузера введите:
mountedApp.product='Это совсем другие русские носки!' и нажмите "Enter". Посмотрите, как это действие повлияло на отображение в браузере (см ниже Результат выполнения данного урока).

Это и есть рективность.

Задача кодирования
Мы подошли к концу этого урока, который подводит нас к первой задаче кодирования. Вы можете найти код решения, проверив L2-конечную ветвь репозитория или просмотрев решение в Codepen.

Чтобы перейти на ветку с файлами окончания урока 2 выполните команду:

git checkout L2-end

Добавьте description (описание) к объекту данных.

Отобразите описание с помощью выражения в теге p.

Код файла index.html данного урока

    <div id="app">
      <h1>{{ product }}</h1>
      <!-- Solution -->
      <p>{{ description }}</p>
      <!-- Solution -->
    </div>

    <!-- Import App -->
    <script src="./main.js"></script>

    <!-- Mount App -->
    <script>
      const mountedApp = app.mount('#app')
    </script>

Код файла main.js данного урока

const app = Vue.createApp({
    data() {
        return {
            product: 'Socks :: Носки русские',
            // Solution
            description: 'A warm fuzzy pair of socks. Пара теплых пушистых носков.' 
            // Solution
        }
    }
})

Результат выполнения данного урока

Примечание переводчика

1. Я слегка меняю контент оригинальных файлов курса для тренировки, проверки русификации и т.д.

2. Код для HTML я размещаю в этом файле между тегами body.

3. Обратите внимание, чтобы в консоле браузера не было ошибок.

Теперь Нажмите здесь для перехода к следующему уроку ➳

... или ...