Vue Learning ~ 2: Vue Example

Creating instances of Vue

Each application Vue is by creating a new instance of Vue Vue function starts with the

When you create a Vue instance, you can pass an option object that specifies this instance Vue managed elements.
Vue Vue instance a root created by the application of a new new Vue, and optionally nested, may be composed of reusable component tree

Data and Methods

When a Vue instance is created, all properties it is added to the data object in response to the systems Vue.
When the values of these properties change, the view will produce a "response" that is updated to a new value matching.

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

When these data changes, the view will be re-rendered.
It is noteworthy that only when an instance is created in already exists in the data attribute is the type of response.
This means that if you add a new property, then this update will not trigger any change of view.
If you know you'll need a property at a later date, but a start it is empty or does not exist, then you only need to set some initial values.

The only exception here is the use of Object.freeze (), which prevents modification of existing properties also means that the system can no longer respond to track changes.

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

Examples of the life cycle of the hook

Vue each instance when it is created to go through a series of initialization process - for example, the need for data monitoring, compiling templates, examples will be mounted to the DOM and DOM updates when the data changes. But also run some function called the life cycle of the hook in the process, which gives the user the opportunity to add your own code at different stages.