Основы Vue 3

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

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

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

Vue 3 является логическим продолжением предыдущей версии фреймвока - Vuejs 2, первый релиз которого вышел еще в феврале 2014 года. Его создателем является Эван Ю (Evan You), который до этого работал в Google над AngularJS. С тех пор фреймфорк динамично развивается. В сентябре 2020 года вышла текущая версия фреймворка - Vue 3, особенностью которой стало то, что эта версия полностью написана на языке TypeScript вместо JavaScript, который использовался ранее. Собственно в данном руководстве рассматривается именно версия Vue 3.

Следует отметить, что Vue 3, хотя и продолжает традицию Vue.js 2.x и имеет много общего, тем не менее также имеет определенные отличия. Причем команда разработчиков Vue продолжит выпускать и поддерживать Vue.js 2.x. В связи с чем данное руководство посвящено именно версии Vue 3, а касательно предыдущей версии - Vue.js 2.x необходимую информацию можно найти в отдельном руководстве по Vue.js.

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

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

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

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

Vue 3 поддерживается всеми основными современными браузерами.

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

Создадим первое приложение на Vue 3. Прежде всего нам надо подключить файлы фреймворка на веб-страницу. Это можно сделать разными способами. Самый простой представляет загрузка файлов фреймворка из CDN по ссылке:

https://unpkg.com/vue

Также можно установить Vue 3 через пакетный менеджер npm с помощью команды:

npm install vue

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

<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</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"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  },
  methods: {
    setMessage(event) {
      this.message = event.target.value;
    }
  }
}).mount('#app');
</script>
</body>
</html>

Чтобы создать объект приложения в Vue 3 применяется функция Vue.createApp. В эту функцию передается объект, который определяет используемые данные через параметр data и выполняемые в приложении действия через параметр methods.

Данные представляют объект, который содержит одно свойство - message - некоторая строка, которая выводится на веб-страницу:

data() {
    return {
      message: 'Hello Vue 3!'
    }
}

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

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

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

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

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

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

И в конце, чтобы связать созданный объект Vue с конкретным элементом веб-страницы, применяется метод mount(). В этот метод передается селектор html-элемента:

.mount('#app')

Так, в данном случае мы говорим, что объект Vue будет выполняться в рамках элемента html с идентификатором app.

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

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

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

СодержаниеВперед

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