Основы работы с фреймворком 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>

Пусть в data хранится хранится имя и фамилия пользователя:

data: { name: 'Вася', surname: 'Иванов', }

Выведите данные пользователя на экран в каком-нибудь абзаце.

Операции в скобках

В фигурных скобках можно выполнять различный 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>

Пусть в data хранится следующее:

data: { num: 5, }

Выведите на экран квадрат свойства num.

Пусть в data хранится следующее:

data: { num1: 1, num2: 2, num3: 3, }

Выведите на экран сумму свойств num1, num2 и num3.

Массивы и объекты

Вывод содержимого массивов и объектов во 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>

Пусть в data хранится следующий массив:

data: { arr: [1, 2, 3], }

Выведите на экран сумму элементов этого массива.

Пусть в data хранится следующий объект:

data: { obj: {a: 1, b: 2, c: 3}, }

Выведите на экран сумму элементов этого объекта.