Каждое приложение Vue начинается с создания нового экземпляра Vue с помощью функции Vue:

var vm = new Vue({
// опции
})

Сохранять экземпляр в переменную не обязательно, если весь код будет работать внутри этого экземпляра. Традиционно переменная с экземпляром Vue называется vm (от ViewModel).

Приложение Vue сосотоит из корневого экземпляра Vue, созданного с помощью new Vue, опционально организованного в дерево вложенных, повторно используемых компонентов. Например:

Root Instance
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics

При создании экземпляра Vue необходимо передать ему объект опций:

• el
• data
• methods
• computed
• watch

el -- CSS-селектор DOM-элемента или объект HTMLElement, внутрь которого смонтирован экземпляр Vue.

data -- объект с данными, используемыми внутри экземпляра. Обязательно указать все данные со значениями по умолчанию, иначе не будет работать интерполяция, реактивность и прочие штуки. Vue работает только с данными, которые указаны в этом объекте при создании экземпляра Vue.

var vm = new Vue({
data: {
name: 'John',
age: 23
}
})

computed -- объект со свойствами, вычисляемыми на основе данных из data. Содержит в качестве ключа имя свойства, а в качестве значения -- функцию, вычисляющую свойство. Например, через computed могут создаваться строки, склеенные из данных по определенной логике, могут вычисляться значения (на основе даты рождения вычисляться возраст) и прочее. В сравнении с методами (см. далее -- methods) computed-свойства более эффективны, посколько Vue анализирует их код и знает, от каких данных они зависят, поэтому обновление computed-свойств происходит ТОЛЬКО при обновлении зависимых данных, а не каждый раз при изменении каких-либо данных, как это происходит с методами.

var vm = new Vue({
data: { a: 1 },
computed: {
// если свойство только возвращает данные, достаточно простой функции:
aDouble: function () {
return this.a * 2
},
// свойство и возвращает, и получает данные:
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // => 2
vm.aPlus = 3
vm.a // => 2
vm.aDouble // => 4

methods -- методы, которые можно будет вызывать в экземпляре Vue (например, как обработчики событий). В качестве ключа содержит имя метода, а в качестве значения -- функцию, содержащую код метода. Если метод используется в шаблоне (интерполяция), то он будет вызываться каждый раз при обновлении любого свойства из data. Иногда это может быть неэффективно, потому что метод может производить сложные вычисления. В таких случаях нужно использовать либо computed-свойства, либо не использовать этот метод в шаблоне.

var vm = new Vue({
data: { a: 1 },
methods: {
increase: function () {
this.a++
}
}
})
vm.increase()
vm.a // 2

watch -- объект, содержащий коллбэки, реагирующие на изменения свойств из data, computed или methods (имена методов нужно писать в кавычках). Ключи объекта -- имя свойства, изменения в котором отслеживаются, значения объекта -- коллбэки, вызываемые при изменении значения.

new Vue({

el: '#exercise',

data: {

value: 0

},

computed: {

result: function(){

return this.value >= 37 ? 'done' : 'not there yet'

}

},

watch: {

result: function(){

vm = this

setTimeout(function(){

vm.value = 0;

}, 5000);

}

}

});

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="exercise">

<!-- 1) Show a "result" of 'not there yet' as long as "value" is not equal to 37 - you can change "value" with the buttons. Print 'done' once you did it -->

<div>

<p>Current Value: {{ value }}</p>

<button @click="value += 5">Add 5</button>

<button @click="value += 1">Add 1</button>

<p>{{ result }}</p>

</div>

<!-- 2) Watch for changes in the "result" and reset the "value" after 5 seconds (hint: setTimeout(..., 5000) -->

<div>

<input type="text">

<p>{{ value }}</p>

</div>

</div>