Что такое Vue.js?
Vue — это прогрессивный интерфейсный фреймворк, который можно легко добавить в существующее приложение. Мы также можем сделать из него одностраничное приложение. Это означает, что мы можем использовать его для добавления новых функций в существующие приложения или для создания новых приложений.
Это компонентная структура, что означает, что мы создаем приложения с помощью Vue, вставляя компоненты и передавая данные между ними.
Начиная
Мы можем начать с создания тега script
, чтобы добавить структуру Vue.js в наш код.
Существует версия разработки фреймворка, которую мы можем добавить, написав:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Версия для разработки не минимизирована, поэтому ее не следует использовать в продакшене.
Производственную версию можно добавить, написав:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Создание нашего первого приложения Vue
Мы можем начать с создания папки проекта, а затем добавить файлы index.html
и index.js
для хранения нашего кода HTML и JavaScript соответственно.
Затем в index.js
нам нужно создать новый экземпляр Vue, который является точкой входа нашего приложения Vue.
Для этого мы можем написать следующий код в index.js
:
new Vue({ el: "#app", data: { message: "Hello" } });
В приведенном выше коде мы создаем новый экземпляр Vue
, передавая объект с различными параметрами.
Свойство el
указывает Vue поместить наше приложение в элемент div
с идентификатором app
.
Свойство data
содержит исходные данные, которые мы можем использовать в шаблонах.
Затем в index.html
пишем следующий код:
<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>App</title> </head> <body> <div id="app"> {{message}} </div> <script src="index.js"></script> </body> </html>
Приведенный выше HTML-код имеет теги script
для платформы Vue, расположенные вверху, и еще один тег script
для нашего собственного кода, расположенный внизу.
В элементе div
с идентификатором app
мы добавили двойные фигурные скобки для отображения строки 'hello'
из data.message
в index.js
.
Автоматическое обновление данных шаблона из экземпляра Vue называется привязкой данных.
Данные также могут передаваться из шаблона обратно в экземпляр Vue, как мы увидим позже.
В этот момент мы должны увидеть:
Hello
на экране, когда мы загружаем браузер.
В Vue.js любое допустимое выражение JavaScript может быть помещено между двойными фигурными скобками.
Некоторые примеры этого:
{{ num + 1 }}
or:
{{ messages.reverse() }}
Условный рендеринг
Мы можем условно отображать элементы на экране, используя директиву v-if
. Директивы — это код Vue, который мы можем применить, чтобы заставить элемент что-то делать.
Например, мы можем написать следующий код:
index.js:
new Vue({ el: "#app", data: { message: "Hello" } });
index.html:
<p v-if="Math.random() > 0.5"> {{message}} </p> <p v-else> No Message </p>
Затем, когда мы загружаем браузер или обновляем его, мы видим, что иногда будет отображаться «Hello», поскольку оно отображается только тогда, когда Math.random()
возвращает что-то большее, чем 0.5
.
Директива v-else
предназначена для отображения чего-либо, если условие в v-if
равно false
. В приведенном выше коде, если Math.random()
возвращает некоторое число меньше 0,5, мы увидим «Нет сообщения».
Принятие входных данных
Приложение Vue может принимать входные данные через директиву v-model
. Эта директива принимает переменную в качестве значения.
v-model
получает ввод и устанавливает его в data
в экземпляре Vue
. Он также получит data
из экземпляра Vue
и отобразит его в шаблоне. Мы называем это двусторонней привязкой, поскольку данные устанавливаются автоматически, а уже установленные данные также передаются обратно в шаблон.
Например, если у нас есть следующий код:
index.js:
new Vue({ el: "#app", data: { message: "Hello" } });
index.html:
<input v-model="message" /> <p>{{message}}</p>
Когда страница загружается впервые, мы видим слово «Hello» внутри элемента input
. Это происходит потому, что значение data.message
отправляется из экземпляра Vue на вход директивой v-model
.
Затем, когда мы вводим что-то во ввод, это будет отображаться в элементе p
под ним. Это связано с тем, что данные, введенные в элемент input
, отправляются в экземпляр Vue, который мы создали в index.js
.
Введенные нами данные устанавливаются в data.message
объекта, который мы передали в new Vue
.
Обработка событий
События JavaScript должны обрабатываться, чтобы приложение могло правильно реагировать, когда пользователь выполняет действие.
Vue упрощает это, предоставляя директиву v-on
. @
— это сокращение от v-on
. Например, v-on:click
совпадает с @click
. Для обработки событий щелчка пользователя мы можем использовать класс v-on:click="onClick"
. Это вызывает метод onClick
в объекте, который мы передали экземпляру Vue, когда пользователь щелкает все, к чему применена эта директива.
click
в v-on:click
называется аргументом. Это потому, что мы можем заменить click
другими именами событий, которые мы определяем или встроены в браузер.
Используя эти знания, мы можем создать кнопку, которая выводит сообщение следующим образом:
index.js:
new Vue({ el: "#app", methods: { onClick() { alert("Hello"); } } });
index.html:
<div id="app"> <button v-on:click="onClick">Click Me</button> </div>
Когда мы нажимаем кнопку Click Me, наш код вызывает метод onClick
, поскольку в шаблоне есть v-on:click="onClick"
. Все в объекте может быть вызвано из шаблона.
Таким образом, мы должны увидеть всплывающее окно с надписью «Привет», когда мы нажимаем кнопку Click Me.
Отображение коллекций данных
Мы можем легко отображать наборы данных с помощью директивы v-for
. Он работает с массивами и объектами.
Например, это позволяет нам отображать элементы из массива в виде списка следующим образом:
index.js:
new Vue({ el: "#app", data: { persons: [{ name: "Mary" }, { name: "Phil" }, { name: "Jane" }] } });
index.html:
<div id="app"> <ul> <li v-for="person of persons">{{person.name}}</li> </ul> </div>
Код v-for="person of persons"
будет перебирать массив data.persons
в index.js
и отображать все элементы, получая свойство name
каждой записи, а затем отображать элемент в элементе li
. Это потому, что мы добавили v-for="person of persons"
в элемент li
.
Кроме того, v-for="person of persons"
и v-for="person in persons"
одинаковы.
В итоге мы должны увидеть:
Mary
Phil
Jane
Мы также можем использовать v-for
для отображения пар ключ-значение объекта следующим образом:
index.js:
new Vue({ el: "#app", data: { obj: { foo: "a", bar: "b", baz: "c" } } });
index.html:
<div id="app"> <ul> <li v-for="(value, name) in obj">{{name}} - {{value}}</li> </ul> </div>
Пары ключ-значение из data.obj
отображаются в li
элементах:
Итак, мы получаем:
foo - a
bar - b
baz - c
Создание компонентов
Vue полезен тем, что позволяет разделить наше приложение на компоненты.
Чтобы создать простой компонент, мы можем использовать метод Vue.component
следующим образом:
index.js:
Vue.component("custom-input", { data() { return { message: "foo" }; }, methods: { submit() { alert(this.message); } }, template: ` <div> <input v-model='message'> <p>{{message}}</p> </div> ` }); new Vue({ el: "#app" });
index.html:
<div id="app"> <custom-input></custom-input> </div>
В приведенном выше коде мы создали компонент, который доступен везде, вызвав метод Vue.component
с именем компонента в качестве первого аргумента.
Второй аргумент — это объект опций для создания компонента. Он немного отличается от того, что мы имеем в объекте, который мы передали для создания экземпляра Vue
.
Свойство data
— это функция, а не объект. Таким образом, состояние не будет выставлено наружу.
methods
и template
такие же, как те, которые мы установили в объекте, который мы используем для создания экземпляра Vue
.
В index.html
мы ссылаемся на наш компонент custom-input
, написав:
<div id="app"> <custom-input></custom-input> </div>
Обратите внимание, что мы можем ссылаться только на компоненты внутри элемента, в котором мы отображаем наше приложение Vue. В этом случае это будет div
с идентификатором app
. Мы также можем ссылаться на компоненты в шаблоне другого компонента или рекурсивно в его собственном шаблоне.
Вывод
Vue — это фреймворк на основе компонентов, который мы можем использовать для создания интерфейсных приложений чистым и выразительным способом.
Он имеет встроенные директивы для привязки модели, условного рендеринга и рендеринга списка элементов.
Надеюсь, это руководство помогло вам быстро понять основные аспекты Vue и побудило вас начать создавать что-то уникальное.
Перед развертыванием коммерческих или корпоративных приложений Vue в рабочей среде убедитесь, что вы защищаете их код от обратного проектирования, злоупотреблений и подделки, следуя нашему руководству.
Первоначально опубликовано в Блоге Jscrambler автором John Au-Yeung.