Что такое 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.