Вступление

Vue является прогрессивной структурой для создания пользовательских интерфейсов. По сравнению с большинством негибких фреймворков Vue создан для постепенного принятия. По своей сути Vue ориентирован только на слой представления, и его легко подобрать и интегрировать с другими библиотеками или существующими проектами. Это еще не все, Vue способна запитывать сложные одностраничные приложения при использовании в сочетании с современными инструментами и вспомогательными библиотеками.

Начиная

Вы можете установить Vue, включив скрипт Vue в качестве внешнего файла JavaScript, как показано ниже

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

В качестве альтернативы, как указано на странице установки Vue, стоит использовать vue-cli, но это не рекомендуется для начинающих, особенно если вы еще не знакомы с инструментами сборки на основе Node.js.

Декларативный рендеринг

В основе Vue.js лежит система, которая позволяет декларативно отображать данные в DOM с использованием простого синтаксиса шаблона:

HTML

<div id="app">
  {{ message }}
</div>

JS

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Mumbai!'
  }
})

Этот код дает: Привет Мумбаи

В примере, который мы написали выше, Vue проделал большую работу под капотом. В результате данные и DOM теперь связаны, и мы получаем реактивную реализацию. Откуда нам знать? Когда мы открываем консоль JavaScript нашего браузера и устанавливаем app.message в другое значение. мы должны увидеть обновленный пример выше соответствующим образом.

В дополнение к интерполяции текста мы также можем связать атрибуты элемента следующим образом:

HTML

<div id="app-2">
  >span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

JS

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

В приведенном выше примере мы сталкиваемся с чем-то новым. Атрибут v-bind, написанный в коде выше, называется директивой. Чтобы показать, что директивы - это специальные атрибуты, предоставляемые vue, они имеют префикс V-, и эти директивы применяют особое реактивное поведение к отображаемому DOM. В приведенном выше примере кода мы говорим «обновляйте атрибут заголовка этого элемента с помощью свойства сообщения в экземпляре Vue».

Условные и циклы

Vue предоставляет нам директиву для обработки условных операторов и циклов. Следовательно, легко переключить присутствие элемента, как показано в фрагментах кода ниже:

HTML

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

JS

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

Это выводит на наш браузер следующее сообщение «Теперь ты меня видишь»

Если мы введем app3.seen = false в консоли. Сообщение исчезнет.

Обработка пользовательского ввода

Мы можем использовать директиву v-on, чтобы присоединить прослушиватели событий, которые вызывают методы в наших экземплярах Vue, чтобы разрешить взаимодействия пользователей с нашим приложением.

HTML

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

JS

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

В приведенном выше примере Vue обрабатывает все манипуляции с DOM, пока мы сосредоточены на логике.

Vue предоставляет нам директиву v-модели, которая упрощает двустороннюю привязку данных между приложением и вводом формы.

HTML

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

JS

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

Компоновка с компонентами

Компоненты предоставляют абстракцию, которая позволяет нам создавать крупномасштабные приложения, состоящие из небольших, автономных и в большинстве случаев повторно используемых компонентов. Чтобы создать компонент в другом шаблоне компонентов, нам нужно создать его экземпляр в шаблоне следующим образом:

<ol>
  <!-- Create an instance of the parent component -->
  <parent-component></parent-component>
</ol>

Однако мы всегда хотим иметь возможность передавать данные из родительской области в дочерний компонент. Для достижения этого наш родительский компонент должен принять опору:

Vue.component('task-item', {
  props: ['task'],
  template: '<li>{{ task.text }}</li>'
})

Теперь мы можем передать задачу в каждый повторяющийся компонент, используя v-bind:

<div id="app-7">
  <ol>
    <task-item
      v-for="item in groceryList"
      v-bind:task="item"
      v-bind:key="item.id"
    ></task-item>
  </ol>
</div>

Vue.component('task-item', {
  props: ['task'],
  template: '<li>{{ task.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

Отношение к пользовательским элементам

Пользовательский элемент и компоненты Vue похожи, это потому, что синтаксис компонента Vue моделируется после спецификации веб-компонента, частью которого является пользовательский элемент. Например, компоненты Vue реализуют специальный атрибут и API слота. Но у них есть ключевые отличия:

• Хотя спецификация веб-компонента была доработана, не каждый браузер реализует ее изначально, тогда как компоненты Vue не требуют полизаполнения, поскольку она работает согласованно со всеми поддерживаемыми браузерами (включая IE9 и выше).
• Компоненты Vue предоставляют некоторые важные функции, которые не предоставляются простыми пользовательскими элементами, особенно межкомпонентный поток данных. Интеграция инструментов сборки и пользовательская коммуникация событий