MyTetra Share
Делитесь знаниями!
Создание экземпляра Vue
28.01.2018
11:49
Автор: br0ke
Текстовые метки: javascript, vue.js, vuejs, vue, mvvm, ui, framework
Раздел: Информационные технологии - JavaScript - Vue

Каждое приложение 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>


Так же в этом разделе:
 
MyTetra Share v.0.52
Яндекс индекс цитирования