Основы

Vue - знает только о том что находится внутри контейнера. И не может получить доступ ни к чему что нахогодится за его пределами.

Одна из особенностей vue.js - реактивность, т.е. если мы изменим данные внутри модели - это приведёт к обновлению шаблона.

Списки

Для построения списков используется v-for.

<li v-for="item in item_array">
	{{ item.name }}
</li>

Классы

Для применения класса к элементу используется v-bind:class="".

<li v-for="item in item_array" v-bind:class="{ 'user_class':item.status }">
	{{ item.name }}
</li>

Можно использовать более короткую запись :class="" вместо v-bind:class="".

События

Для обработки событий используется v-on: Для клика это будет v-on:click="onClick". Далее функция объявляется в Vue.

new Vue({
	el: "#app",
	methods: {
		onClick: function() {
			console.log('done')
		}
	}
})

Для того чтобы остановить выполнение события (например отправку формы) - нужно к директиве добавить модификатор prevent. Это будет аналогично preventDefault. Также можно использовать модификатор stop. Это будет аналогично stopPropagation.

<button v-on:click.prevent="onClick">Кнопка</button> 
<button v-on:click.stop="onClick">Кнопка</button> 

Также можно отслеживать - нажал ли пользователь определённую кнопку. Для этого используется директива v-on:keyup.enter. enter - это псевдоним кнопки. Вместо псевдонима можно использовать код кнопки - v-on:keyup.13. После указания кнопки - указывается метод который будет это обрабатывать - v-on:keyup.13="onClick".
Вместо v-on - можно воспользоваться шорткатом @.

<div id="app">
	<input type="text" v-model="message" @keyup.13="onClick">
</div>
<script>
	new Vue({
		el: "#app",
		data: {
			message: ''
		},
		methods: {
			onClick: function() {
				console.log(this.message)
			}
		}
	})
</script>

Toggle кнопки

Vue позволяет создавать простые toggle всего в 1 строку

<button @click="show = !show">
	<i class="ion-navicon"></i>
</button>
<script>
	new Vue({
		el: "#app",
		data: {
			show: false
		}
	})
</script>

Переходы - анимация

За отображение скрытие отвечает директива v-show. Чтобы полность уюрать элемент из DOOM дерева используется v-if. Директива v-else работает с v-show и с v-if. 

<aside v-show="show"></aside>
<aside v-if="show"></aside>

Анимация задаётся директовой transition="slide". Это значит что к элементу бкдет добавляться класс .slide-transition, который можно определить в css файле.

Для того чтобы анимация заработала - в Vue есть два класса которые позволяют указать что именно должно происходить с элементом. .slide-enter - добавляется к элементу перед отображением на странице. .slide-leave - добавляется к элементу перед скрытием.

<aside v-show="show" transition="slide"></aside>
<style> 
	.slide-transition {
		transition: all .3s cubic-bezier(.65, .05, .36, 1);
	}
	.slide-enter, .slide-leave {
		left: -100%;
	}
</style> 

Фильтры

Фильтры - это javascript функции которые обрабатывают данные и возвращают их в нужном виде.

{{ 'фильтры' | uppercase }}

Одним из полезных фильтров - является orderBy- предназначенный для сортировки. Этот фильтр используется совместно с директивой v-for.

<li v-for="item in array | orderBy 'name'">{{ item.name }}</li>

Фильтр filterBy - можно использовать для простейшего поиска.По умолчанию поиск идёт по всем полям.

<input type="text" v-model="query" />
<li v-for="item in array | filterBy query">{{ item.name }}</li>

Для фильтрации строго по выбранному полю нужно добавить поле по которому будет вестись поиск.

<li v-for="item in array | filterBy query in 'name'">{{ item.name }}</li>

Для создания собственного фильтра используется Vue.filter:

Vue.filter('emoji', function(value) {
	return value.replace('единорог', '🦄')
				.replace('щенок', '🐶')
})

Вычисляемые свойства

Вычисляемые свойства - это данные которые автоматически рассчитывают своё значение по мере обращения к ним из другого места программы. Важной особенностью вычисляемых свойств - является то что они кешируются и перерасчитывают своё значение только при изменении зависимостей. Для объявления вычисляемого свойства используется ключевое слово computed.

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
});

Компоненты

Компоненты - это переиспользуемые экземпляры Vue со своим именем. Является аналогом директив в Angular.

// Определяем новый компонент, названный button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">Счётчик кликов — {{ count }}</button>'
})

Сам шаблон можно определить и в html коде например так:

// Определяем новый компонент, названный button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '#user_button'
})

<template id="dialog-template">
	<button v-on:click="count++">Счётчик кликов — {{ count }}</button>
</template>

Использование:

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

Динамические компоненты

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

Создание событий

Иногда во Vue возникает необходимость передать данные от одного компонента к другому. Один из способов - использование метода $emit(). Его работа напоминает принцип домино, Когда мы создаём событие - оно автоматически начинает передаваться вверх по цепочке. При этом на каждом этапе его можно отловить и обработать.

Как правильно клонировать объект на JS?