Vue学习的第二天

创建一个Vue实例

---

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的,所有的Vue组件都是Vue实例,通常用vm变量表示Vue实例

var vm = new Vue({

    //选项详看API文档

})

数据与方法

---

当一个Vue实例被创建时,它向Vue的响应式系统中加入了其data对象中能找到的所有的属性.当这些属性的值发生改变时,视图将会产生响应,匹配更新为新值(注意:只有当实例被创建时data中存在的属性才是响应式的,当使用Object.freeze()时,会阻止修改现有的属性,也意味着响应式的系统无法再追踪变化)

var data = { a:1 }

var vm = new Vue({

    data:data

})

vm.a === data.a // =>true

vm.a = 2;

data.a = 2

data.a = 3

vm.a = 3

除了数据属性,Vue实例还暴露了一些实例属性和方法,它们都有前缀$,以便和用户自定义的属性区分开来

var data = { a:1 }

var vm = new Vue({

    el:"#example",

    data:data

})

vm.$data === data

vm.#el === document.getElementById("example")

vm.$watch("a", function(newValue, oldValue){

    //这个回调将在vm.a改变后调用

})

实例生命周期钩子

---

每个Vue实例在被创建的时候都要经过一系列的初始化过程:需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM。同时在这个过程中也会运行一些叫做生命周期钩子的函数

created钩子、mounted钩子、updated钩子和destroyed钩子

例如：

new Vue({

    data:{

        a:1

    },

    created:function(){

        //this 指向vm实例

    }

})

生命周期图示

---

下图展示了Vue实例的生命周期