Инициализация Vue и отображение первого сообщения

Для начала мы определим простую структуру приложения, в котором будет довольно простая разметка:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    <script>
    //your code
    </script>
</body>
</html>

Теперь, когда у нас есть настроенный шаблон, мы можем инициализировать Vue и связать его с пространством приложения HTML, используя следующий код:

const app = new Vue().$mount('#app');

Этот код создает новый экземпляр Vue и монтирует его в элемент HTML с идентификатором приложения. Если вы сохраните свой файл и откроете его в браузере, вы заметите, что ничего не произошло. Однако под капотом эта строка кода связывает div с переменной app, которая является экземпляром приложения Vue.

Сам Vue имеет много объектов и свойств, которые мы теперь можем использовать для создания нашего приложения. Первое, с чем вы столкнетесь, это свойство el. Используя HTML ID, это свойство сообщает Vue, к какому элементу оно должно быть привязано и где будет содержаться приложение. Это наиболее распространенный способ монтирования вашего экземпляра Vue, и весь код Vue должен происходить внутри этого элемента:

const app = new Vue({
        el: '#app'
      });

Когда свойство el не указано в экземпляре, Vue инициализируется в размонтированном состоянии — это позволяет любым функциям или методам, которые вы могли бы указать, запускаться перед монтированием. Затем вы можете самостоятельно вызвать функцию инициализации, когда будете готовы. За кулисами при использовании свойства el Vue монтирует экземпляр с помощью функции $ .mount. Вы также можете вызвать данную функцию вручную:

const app = new Vue();
// When ready to mount app:
app.$mount('#app');

Однако, поскольку нам не нужно будет задерживать выполнение монтирования на протяжении всей книги, мы можем использовать элемент el с экземпляром Vue. Использование свойства el также является наиболее распространенным способом монтирования приложения Vue.

Помимо значения el, у Vue есть объект данных, который содержит любые данные, которые нам нужны для доступа к приложению или пространству приложения. Создайте новый объект данных в экземпляре Vue и присвойте значение свойству, выполнив следующие действия:

 const app = new Vue({
     el: '#app',

     data: {
         message: 'Hello!'
     }
 });

В пространстве приложения у нас теперь есть доступ к переменной message. Для отображения данных в приложении Vue использует язык шаблонов Mustache для вывода данных или переменных. Это достигается путем помещения имени переменной в двойные фигурные скобки {{variable}}. Логические операторы, такие как if или foreach, получают атрибуты HTML, которые будут рассмотрены позже в этой главе.

В пространстве приложения добавьте код для вывода строки:

<div id="app">
    {{ message }}
</div>

Сохраните файл, откройте его в своем браузере, и вам должен быть представлен ваша строка Hello!.

Если вы не видите никакого вывода, проверьте консоль JavaScript, чтобы увидеть, есть ли какие-либо ошибки. Убедитесь, что удаленный файл JavaScript загружается правильно, поскольку некоторые браузеры и операционные системы требуют дополнительных мер безопасности, прежде чем разрешить загрузку некоторых удаленных файлов при локальном просмотре страниц на вашем компьютере.

Объект данных может обрабатывать несколько ключей и типов данных. Добавьте еще несколько значений к объекту данных и посмотрите, что произойдет. Обязательно добавляйте запятую после каждого значения. Значения данных — простой JavaScript и могут также обрабатываться основные математические функции — попробуйте добавить новый ценовой ключ и установить значение 18 + 6, чтобы увидеть, что происходит. Или попробуйте добавить массив JavaScript и распечатать его:

const app = new Vue({
    el: '#app',

    data: {
        message: 'Hello!',
        price: 18 + 6,
        details: ['one', 'two', 'three']
    }
});

Теперь в своем приложении вы можете вывести каждое из этих значений — {{price}} и {{details}} теперь выводят данные — хотя список может оказаться не совсем таким, как вы ожидали. Мы рассмотрим использование и отображение списков в статье  «Отображение, циклы, поиск и фильтрация данных».

Все данные в Vue являются реактивными и могут быть обновлены пользователем или приложением. Это можно проверить, открыв консоль JavaScript браузера и обновив содержимое самостоятельно. Попробуйте набрать app.message = ‘Goodbye!’; и нажмите Enter — содержимое вашего приложения будет обновлено. Это потому, что вы ссылаетесь на свойство напрямую — первое приложение ссылается на переменную const app, к которой привязано ваше приложение. Точка обозначает свойство внутри, а сообщение ссылается на ключ данных. Вы также можете обновить app.details или цену на что угодно!