Начинаем работать с Vue.js

Vue.js - это JavaScript библиотека, которая помогает разрабатывать приложения используя архитектурный паттерн MVVM (Model-View-ViewModel). На первый взгляд он может показаться очень похожей на AngularJS, но как только начинаешь работать с Vue.js, понимаешь, что он не только намного проще, а ещё и более гибкий.

В этой статье я покажу вам основную концепцию Vue.js, а также дам полный обзор наиболее важным особенностей этой замечательной библиотеки.

В Vue.js 1.0 есть несколько изменений в синтаксисе, которые не совместимы с версией 0.12.x. Если у вас  уже есть опыт использования более ранних версий библиотеки, то возможно вы заметите изменения в этой статье. За более полным списком изменений можно обратиться к статье: Что нового в Vue.js 1.0.

Подключаем Vue.js на страницу

Можно получить последнюю версию Vue.js с Github.com. В этой статье мы сделаем проще и подключим его из CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js">
</script>

Создание View-Model

В Vue.js View-Model'и создаются с помощью класса Vue. Вы можете думать о View-Model'ях как об объектах, которые упрощают отображение данных вашей модели в представлении (вы можете соотнести любой объект в качестве модели и любой HTML элемент в качестве представления).

Чтобы увидеть как работает View-Model,  давайте создадим представление. Для этого разместим на странице пустой </div>:

<div id="my_view">
</div>

Теперь нужно создать объект модели. Так как это JavaScript объект, поместите его внутри тега <script>, а ещё лучше вынесите его в отдельный файл.

var myModel = {
  name: "Ashley",
  age: 24
};

Теперь когда у нас есть представление и модель, нужно создать View-Model (Vue инстанс), который свяжет их вместе:

var myViewModel = new Vue({
  el: '#my_view',
  data: myModel
});

Как вы могли увидеть выше, свойство el указывает на представление (вы можете использовать здесь любой CSS селектор), а свойство data указывает на объект модели. Наша View-Model готова к использованию.

Для отображения данных модели внутри представления, нужно использовать специальные токены заключённые в фигурные скобки. Например, чтобы отобразить свойство age, нужно добавить токен {{age}} внутри представления. В следующем фрагменте кода, используются оба свойства модели:

<div id="my_view">
  {{ name }} is {{ age }} years old.
  <!-- Evaluated to "Ashley is 24 years old" -->
</div>

Любые изменения в модели, моментально отобразятся  в представлении.

Создание двусторонней связи

Токены в виде фигурных скобок, которые мы использовали в предыдущем примере это один из способов связывания данных. Они позволяют отображать данные модели, но не изменять их. Если вы хотите разрешить представлению изменять данные, то нужно реализовать двустороннюю связь, использую директиву v-model.

Давайте изменим наше представление так, чтобы оно содержало input атрибут v-model которого ссылается на свойство модели name.

<div id="my_view">
  <label for="name">Enter name:</label>
  <input type="text" v-model="name" id="name" name="name" />
  <p>{{ name }} is {{ age }} years old.</p>
</div>

Сейчас если вы измените значение в поле ввода, оно моментально измениться и в модели.

See the Pen Example of two-way binding by SitePoint (@SitePoint) on CodePen.

Фильтры

Фильтр - это функция, которую вы можете использовать в своих токенах. Перед фильтром всегда ставится символ pipe ( вертикальная черта | ). Например если вы хотите, чтобы ваше имя отображалось в верхнем регистре, то ваш токен будет выглядеть следующим образом:

{{ name | uppercase }}

Ниже пример фильтра в действии:

See the Pen Example of filters by SitePoint (@SitePoint) on CodePen.

Фильтры lowercase и capitalize могут быть использованы аналогичным способом.

Больше о фильтрах мы будем говорить в следующем разделе.

Рендеринг массивов

Если в свойствах вашей модели есть массивы, то вы можете вывести их содержимое используя директиву v-for, добавив её например к элементу <li> списка. Для демонстрации, давайте добавим  в нашу модель массив:

var myModel = {
  name: "Ashley",
  age: 24,
  friends: [
    { name: "Bob", age: 21 },
    { name: "Jane", age: 20 },
    { name: "Anna", age: 29 }
  ]
};

Следующий код показывает как вывести свойство name у каждого объекта в массиве friends:

<div id="my_view">
  <ul>
    <li v-for="friend in friends"> {{ friend.name }} </li>
  </ul>
</div>

Для того чтобы изменить порядок вывода элементов в списке, используйте фильтр orderBy внутри директивы v-for. Например, если вы хотите отсортировать элементы по свойству age, то это будет выглядеть так:

<div id="my_view">
  <ul>
    <li v-for="friend in friends | orderBy 'age'"> {{ friend.name }}</li>
  </ul>
</div>

Так же вы можете указать условия вывода элементов. Для этого используйте фильтр filterBy. В следующем примере показано как вывести только те элементы, которые содержат символ "а" в свойстве age.

<div id="my_view">
  <ul>
    <li v-for="friend in friends | filterBy 'a' in 'name'"> {{ friend.name }} </li>
  </ul>
</div>

А вот пример того как можно с помощью filterBy сделать простой поиск:

See the Pen Example of using filterBy to filter items by SitePoint (@SitePoint) on CodePen.

Обработка событий

В Vue.js, если вам нужно обрабатывать события связанные с вашим представлением, вам нужно добавить обработчики событий внутри свойства methods вашей View-Model. Внутри всех обработчиков событий Vue.js, вы можете использовать ключевое слово this, для доступа к данным вашей модели.

Следующая View-Model содержит обработчик клика:

var myViewModel = new Vue({
  el: '#my_view',
  data: myModel,

  // A click handler inside methods
  methods: {
    myClickHandler: function(e) {
      alert("Hello " + this.name);
    }
  }
});

Для того чтобы связать обработчик события, который определён во View-Model, с одним или несколькими элементами пользовательского интерфейса в представлении, нужно использовать директиву v-on. В следующем примере, у нас есть представление с элементом <button>, которая использует директиву v-on, чтобы вызвать обработчик myClickHandler:

<div id="my_view">
  Name: <input type="text" v-model="name">
  <button v-on:click="myClickHandler">Say Hello</button>
</div>

Если соединить всё вышесказанное вместе, то мы получим следующее:

See the Pen Example of event handling by SitePoint (@SitePoint) on CodePen.

Создание компонентов

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

Для того, чтобы определить и зарегистрировать пользовательский HTML-элемент, нужно воспользоваться методом component класса Vue. Вы указать содержимое вашего элемента, используя свойство template.

Пример кода, который определяет и регистрирует простой HTML элемент с именем <blog>.

Vue.component('blog', {
  template: '<a href="tuhub.ru">zacorp blog</span>'
});

Теперь элемент <blog> может быть использован в вашем представлении, также как и любой другой HTML элемент.

<div id="my_view">
  <blog></blog>
</div>

У стандартных HTML-элементов обычно есть атрибуты, которые позволяют контролировать то, как элемент будет выглядеть и как он будет вести себя. У пользовательских элементов, которые создаются с помощью Vue.js, тоже могут быть такие атрибуты. Чтобы указать атрибуты для нового элемента, нужно заполнить свойство props при его объявлении.

Вот так, например, мы сможем передавать тег в наш элемент <blog>:

Vue.component('blog', {
  props: ['tag'],
  template: '<a href="tuhub.ru/tag/{{ tag | lowercase }}">{{ tag }} @zacorp blog</span>',
});

Как вы можете увидеть из кода выше, токены с двумя фигурными скобками, могут использоваться внутри свойства template.

Теперь мы можем использовать атрибут tag внутри элемента <blog>. Например, вот так можно вывести ссылки на два разных тега:

<div id="my_view">
  <blog tag="js"></blog>
  <blog tag="vuejs"></blog>
</div>

Ниже пример из оригинала статьи, там они создавали свой тег:

See the Pen Example of a component with props by SitePoint (@SitePoint) on CodePen.

Заключение

В данной статье о Vue.js, мы рассмотрели как использовать одностороннюю и двустороннюю связи данных, директивы, фильтры и события. Также мы узнали, как создавать свои собственные HTML элементы, используя компоненты Vue.js.

Темы раскрыты достаточно, чтобы начать создавать интерактивные веб-интерфейсы, используя такую простую структуру. Если вам нужно ещё больше возможностей, такие как Ajax или роутинг, то есть огромное кол-во плагинов для Vue.js.

Если вы хотите узнать больше о возможностях Vue.js, то я предлагаю вам посмотреть Vue.js API, а также пройти гайд на официальном сайте.