Основы работы с фреймворком Vue

Мы уже выяснили, что при создании экземпляра Vue он принимает параметром объект с настройками. В общем-то изучение Vue в основном и состоит из изучения этих настроек.

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

Следующая настройка - data - хранит в себе данные, которые мы хотим выводить на нашей HTML странице. Данные хранятся в виде объекта ключ-значение.

Пусть у нас в data в ключе message хранится сообщение с текстом 'hello', вот так:

let app = new Vue({
el: '#app',
data: {
message: 'hello',
},
});
Это сообщение мы можем вывести в любом месте нашего HTML следующим образом: {{ message }}, вот так:

<div id="app">
{{ message }}
</div>
То есть: если у нас в data есть элемент с некоторым с ключом, то содержимое этого элемента мы можем вывести на экран с помощью двойных фигурных скобок. Для этого в фигурных скобках следует написать ключ этого элемента - и его содержимое выведется на экран.

Давайте соберем все вместе и запустим:

<div id="app">
{{ message }}
</div>
let app = new Vue({
el: '#app',
data: {
message: 'hello',
},
});
Результатом этого кода будет следующий HTML - вместо {{ message }} вставится текст 'hello':

<div id="app">
hello
</div>
Давайте потренируемся еще - пусть теперь у нас в data хранятся два сообщения: message1 и message2, вот так:

let app = new Vue({
el: '#app',
data: {
message1: 'hello1',
message2: 'hello2',
},
});
Выведем их на экран:

<div id="app">
{{ message1 }}
{{ message2 }}
</div>
Результатом этого кода будет следующий HTML:

<div id="app">
hello1
hello2
</div>

Операции в скобках
В фигурных скобках можно выполнять различный JavaScript код.

Давайте рассмотрим это на практическом примере.

Пусть у нас есть два элемента с числами - var1 и var2:

let app = new Vue({
el: '#app',
data: {
var1: 1,
var2: 2,
},
});
Давайте, например, сложим наши переменные var1 и var2:

<div id="app">
{{ var1 + var2 }}
</div>
Результатом этого кода будет следующий HTML:

<div id="app">
3
</div>

Массивы и объекты
Вывод содержимого массивов и объектов во Vue осуществляется так же, как и в чистом JavaScript. Давайте посмотрим на примерах.

Пусть в data у нас есть свойство arr, которое содержит внутри себя некоторый массив:

let app = new Vue({
el: '#app',
data: {
arr: [1, 2, 3],
},
});
Давайте выведем элементы этого массива на экран:

<div id="app">
{{ arr[0] }}
{{ arr[1] }}
{{ arr[2] }}
</div>
Пусть теперь в data у нас записан объект:

let app = new Vue({
el: '#app',
data: {
obj: {a: 1, b: 2, c: 3},
},
});
Давайте выведем содержимое этого объекта на экран:

<div id="app">
{{ obj.a }}
{{ obj.b }}
{{ obj.c }}
</div>
Либо можно воспользоваться альтернативным способом:

<div id="app">
{{ obj['a'] }}
{{ obj['b'] }}
{{ obj['c'] }}
</div>