Это серия статей по VueJs для начинающих, основанная на Vue.js v3.0, кодовое название «One Piece».
Введение
Vue (произносится /vjuː/, как view) — это прогрессивный JavaScript-фреймворк для построения пользовательских веб-интерфейсов.
Он предоставляет инструменты, помогающие сделать веб-сайты и приложения более быстрыми и динамичными.
Построенный на стандартных HTML, CSS и Javascript Vue имеет небольшой вес и использует виртуальный DOM для изменения HTML-разметки, что делает его довольно быстрым.
Почему Vue называют «прогрессивным фреймворком»?
Vue является прогрессивным, поскольку вы можете использовать его где угодно — от простой функции в существующем веб-приложении для добавления интерактивности до полнофункциональной основы для крупномасштабного приложения, такого как социальные сети или веб-приложение для потокового видео.
Vue постепенно адаптируется к многочисленным библиотекам внутри своей экосистемы, помимо основной библиотеки, и достаточно гибок для поддержки внешних библиотек, что позволяет создавать более сложные многофункциональные приложения.
Быстрый запуск
Для использования Vue вы можете подключить его библиотеку в тег скрипта в существующем веб-приложении, как показано ниже, или использовать его с помощью инструментов сборки (эта тема будет рассмотрена в одном из следующих постов).
<script src="https://unpkg.com/vue@3"></script>
<div id="app"></div>
<script>
let app = Vue.createApp({}).mount("#app");
</script>
Затем вы определяете HTML-блок, селектор которого предпочтительно содержит идентификатор, который вы передаете в функцию mount экземпляра Vue.
Простое приложение Vue
Анатомия приложения Vue состоит из двух частей, шаблона, который находится в HTML, и экземпляра Vue.
В нашем случае, после подключения библиотеки Vue из unpkg, мы должны последовать этому примеру, разместив HTML-блок, который будет служить частью, где находится видимая часть нашего приложения (шаблон), и экземпляр Vue, который является невидимой частью нашего приложения, где, как ожидается, будет размещена большая часть логики.
Давайте разделим эти две части.
Шаблон
Шаблон приложения Vue — это HTML-блок, имеющий уникальный атрибут selector, который мы не должны использовать ни в какой другой части дерева DOM, чтобы наше приложение Vue не дало неожиданных результатов.
<div id="app"> {{ greetings }} </div>
Двойные фигурные скобки вокруг переменной greetings — это то, что известно как синтаксис «усов». Усы — это заметный разделитель во многих языках шаблонов, используемый для интерполяции текста в конечную разметку шаблонов.
Проще говоря, Vue заменяет все, что находится внутри фигурных скобок, соответствующим выражением JavaScript, применяемым к вложенной переменной в конечной разметке. Это будет выполнено только в том случае, если переменная была объявлена внутри экземпляра Vue, в противном случае Vue выдаст ошибку.
Экземпляр Vue
Второй частью нашего приложения является экземпляр Vue. Новый экземпляр Vue создается с помощью Vue.createApp(), затем присоединяется к шаблону, передавая специальный селектор из нашего шаблона в функции mounted, в результате чего все, что находится внутри нашего шаблона, становится частью приложения Vue.
<script>
let app = Vue.createApp({
return{
return {
message: "Hello there, my name is Mr. Noob"
}
}
}).mount("#app");
</script>
Свойство data, возвращающее объект Object, который содержит нашу переменную greetings, является одним из свойств экземпляра Vue, которое предоставляет нам реактивные данные для работы с ними внутри приложения Vue.
Подробнее о переменных и реактивности в Vue будет рассказано в следующих статьях.
Ниже приведен пример простого приложения Vue, которое при запуске отобразит сообщение «Hello there, my name is Mr. Noob» на результирующей HTML-странице.
<script src="https://unpkg.com/vue@3"></script>
<div id="app"> {{ message }} </div>
<script>
let app = Vue.createApp({
data(){
message: "Hello there, my name is Mr. Noob"
}
}).mount("#app");
</script>
Vue поддерживает запуск нескольких экземпляров на одной странице, в примере выше мы можем добавить новый экземпляр Vue следующим образом.
<script src="https://unpkg.com/vue@3"></script>
<div id="app"> {{ message }} </div>
+ <div id="app-two"> {{ message }} </div>
<script>
let app = Vue.createApp({
data(){
message: "Hello there, my name is Mr. Noob"
}
}).mount("#app");
+ let secondApp = Vue.createApp({
+ data(){
+ message: "Hi, I am Jr, Mr. Noob's son, running from another Vue app instance."
+ }
+ }).mount("#app-two");
</script>
Таким образом, вы можете иметь несколько приложений Vue на одной веб-странице, выполняющих различные задачи или добавляющих несколько функций.
В реальном мире один экземпляр может отображать слайд-шоу из изображений, а другой — отправлять электронные письма с рассылкой в удаленную базу данных через HTTP API-вызовы.
Примеры использования Vue
Vue имеет широкий спектр применения, который охватывает всю шкалу front-end разработки.
Мы можем использовать его для придания динамизма существующему веб-приложению, например, для добавления простой карусели или контента, который меняется при взаимодействии с пользователем, например, при движении мыши или вводе текста, а также для создания сложных веб-приложений, таких как магазины электронной коммерции с множеством категорий и страниц товаров, поддерживающих маршрутизацию, хранение данных в браузере с помощью собственных библиотек Vue, таких как vue-router и vuex, с такими функциями, как корзина, внешние запросы API и так далее.
Vue позволяет разработчикам начать с малого и поддерживает постепенное добавление функций без необходимости полного разрушения существующих приложений, чтобы их приспособить.
Выбирать ли «ванильный» Vue для создания приложений или использовать один из многочисленных проверенных в боях фреймворков Vue, зависит от конкретных случаев использования и предпочтений.
Ниже приведен список некоторых популярных фреймворков Vue.
- NuxtJs
- Gridsome
- VuePress
- Quasar Framework