Vue.js official document study notes (c)

Creating Vue examples

Each application Vue is by creating a new instance of Vue Vue function begins with:

var vm=new Vue({
    //选项
})

Vue's design was inspired by the mvvm
When you create a Vue instance, you can pass an options object
Vue Vue instance of a root application by one created by the new Vue, and optional nested, reusable component tree composition.
A todo application may be a component tree

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

Data and Methods

Vue when instance is created, the data object will be added to all of the attributes in the corresponding system Vue, when the value changes of these properties, the view will change

//数据对象
var data={a:1}
//将数据对象加入vue实例
var vm=new Vue({
    data:data
})

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

When these data changes, the view will be re-rendered. It is noted that when an instance is created only in the presence of data is responsive to the attribute. That is, if you create a new property

vm.b='hi'

When b changes will not trigger any updates view, would need to know if after a property, but the beginning of a property does not exist, we just need to set some initial value on it

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

The only exception is the use of Object.freeze () This prevents modify an existing property, but also means that the corresponding system can not track changes

var obj={
    foo:'bar'
}

Object.freeze(obj)

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

<div>
    <p>{{ foo }}</p>
    <!--这里的 'foo' 不会更新!-->
    <button v-on:click="foo='baz'">Change it</button>
</div>

In addition to data attributes, Vue also exposed some examples of useful methods and instance attributes. They have a $ prefix to distinguish the area of ​​the user-defined attribute. E.g:

var data={a:1}
var vm=new Vue({
    el:'#example',
    data:data
})

vm.$data==data//true
vm.$el==document.getElementById('example')=>true

//$watch是一个实例方法
vm.$watch('a',function(newValue,oldValue){
    //这里回调'vm.a'改变后的调用
})

Examples of lifecycle 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.

created hooks may be used to execute code in an instance is created after

new Vue({
    data:{
        a:1
    },
    created:function(){
        console.log('a is:'+this.a);
    }
})

There are also some other hook is invoked at different stages of the life cycle of the instances, such as mounted, updated and destroyed. The life cycle of this hook point to call its context Vue instance.

Do not use the arrows on the Options function or callback properties, such as created:. () => Console.log (this.a) or vm $ watch ( 'a', newValue => this.myMethod ()). Because the arrow function does not this, this will always look as lexical scope variables to their superiors, until you find, often resulting in Uncaught TypeError: Can not read property of undefined or Uncaught TypeError: this.myMethod error not a function of the class is.

Life cycle diagram