Основы Vue.js

Что такое Vue.js. Первое приложение

Последнее обновление: 29.08.2017

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

Первый релиз фреймворка увидел свет в феврале 2014 года. Его создателем является Эван Ю (Evan You), который до этого работал в Google над AngularJS. С тех пор фреймфорк динамично развивается, его текущей версией является версия 2.3.

Официальный сайт фреймворка - https://vuejs.org/, где можно найти непосредственно файлы фреймворка, а также сопроводительные материалы и документацию. Кроме того, сам проект доступен на github по адресу https://github.com/vuejs/vue.

Vue.js имеет довольно небольшой размер - не более 20 кБ, и при этом обладает хорошей производительностью по сравнению с такими фреймворками как Angular или React. Поэтому неудивительно, что данный фреймворк в последнее время набирает обороты и становится все более популярным.

Одним из ключевых моментов в работе Vue.js является виртуальный DOM. Структура веб-страницы, как правило, описывается с помощью DOM (Document Object Model), которая представляет организацию элементов html на странице. Для взаимодействия с DOM (добавления, изменения, удаления html-элементов) применяется JavaScript. Но когда мы пытаемся манипулировать html-элементами с помощью JavaScript, то мы можем столкнуться со снижением производительности, особенно при изменении большого количества элементов. А операции над элементами могут занять некоторое время, что неизбежно скажется на пользовательском опыте. Однако если бы мы работали из кода js с объектами JavaScript, то операции производились бы быстрее.

Для этого Vue.js использует виртуальный DOM. Виртуальный DOM представляет легковесную копию обычного DOM. Если приложению нужно узнать информацию о состоянии элементов, то происходит обращение к виртуальному DOM. Если данные, которые используются в приложении Vue.js, изменяются, то изменения вначале вносятся в виртуальный DOM. Потом Vue выбирает минимальный набор компонентов, для которых надо выполнить изменения на веб-странице, чтобы реальный DOM соответствовал виртуальному. Благодаря виртуальному DOM повышается производительность приложения.

Vue.js поддерживается всеми браузерами, которые совместимы с ECMAScript 5. На данный момент это все современные браузеры, в том числе IE11.

Первое приложение

Создадим первое приложение на Vue.js. Прежде всего нам надо подключить файлы фреймворка на веб-страницу. Все необходимые материалы для загрузки можно найти по адресу https://vuejs.org/v2/guide/installation.html. С этой страницы можно загрузить файл фреймворка локально (доступен в двух вариантах: Production и Development).

Установка Vue.js

Вместо использования локального файла мы можем загружать фреймворк из CDN по ссылке:

https://unpkg.com/vue@2.7.14/dist/vue.js

Либо если используется Node.js, то можно установить Vue.js через пакетный менеджер npm с помощью команды:

npm install vue

В данном случае будем использовать подключение файла из CDN. Для этого определим следующую веб-страницу:

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <input type="text" v-on:input="setMessage" />
    <p>{{message}}</p>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            setMessage: function(event){
                this.message = event.target.value;
            }
        }
    })
</script>
</body>
</html>

Для создания объекта приложения в Vue.js применяется объект Vue. Этот объект, во-первых, определяет корневой элемент приложения на веб-странице с помощью параметра el:

el: '#app'

То есть корневым элементом приложения будет элемент с id равным app.

Также объект определяет используемые данные через параметр data:

data: {
	message: 'Hello Vue!'
}

В данном случае определено только свойство message, которая хранит строку.

В элементе с id=app на веб-странице, используя двойные фигурные скобки мы можем вывести значение свойства message и более того связать участок веб-станицы с этим элементом.

<p>{{message}}</p>

Последний параметр объекта Vue - methods определяет действия, которые выполняются в приложении:

methods: {
	setMessage: function(event){
		this.message = event.target.value;
	}
}

Здесь определен метод setMessage, который является обработчиком события ввода для элемента input на странице. Через параметр event в этот метод передается информация о событии. В частности, используя значение event.target.value, мы можем получить введенное пользователем значение и присвоить его переменной message. Для получения переменной message, которая была определена выше в параметра data, применяется ключевое слово this.

А для связи элемента input с этим методом определяется атрибут v-on:input="setMessage".

Теперь запустим веб-страницу в веб-браузере (можно просто кинуть веб-страницу в браузер):

Первое приложение на Vue.js

И при вводе в текстовое поле будет автоматически изменяться значение, которое выводится на веб-страницу.

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850