3-vue实例

数据绑定是将数据和试图相关联，当数据发生变化时，可以自动更新视图

语法
1.Vue构造器
每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的

    var vm = new Vue();

Vue 并不完全遵循 MVVM 模式， Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例。在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器：

var MyComponent = Vue.extend({// 扩展选项})// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建var myComponentInstance = new MyComponent()

尽管可以命令式地创建扩展实例，不过在多数情况下建议将组件构造器注册为一个自定义元素，然后声明式地用在模板中。 **2.属性与方法**

var data = { a:1 }var vm = new Vue({    data:data})vm.a === data.a //-->true//设置属性也会影响到原始数据vm.a = 2data.a  //-->2//反之亦然data.a = 3vm.a //-->3

**注意：只有这些被代理的属性是响应式的。**如果在实例创建之后添加新的属性到实例上，它不会触发视图更新除了 data 属性，Vue 实例暴露了一些有用的实例属性与方法这些属性与方法都有前缀 $ ，以便于代理的 data 属性区分，例如：

var data = { a:1 }var vm = new Vue({    el: '#example',    data:data})vm.$data === data //-->truevm.$el === document.getElementById('example')//-->true//$watch 是一个实例方法vm.$watch('a',function(newVal,oldVal){//这个回调将在 'vm.a' 改变后调用}

注意，不要在实例属性或者回调函数中（如：vm.$watch('a',newVal => this.myMethod())使用箭头函数因为箭头函数绑定父级上下文，所以 this 不会像预想的一样是 Vue实例 ，而是 this.myMethod 未被定义）

3. 钩子 hook
hook 是一种事件劫持机制，它会比你的事件更早进行执行处理
可以简单的把它理解为 Vue 的内置事件，但是这个内置事件是由你去配置的

let vm = new Vue({    el: 'app',    data: {        name: '我是app的名称'，        prop：'我是app的属性'    }，    created：function（）{        document.getElementsByClassName('content')[0].textContent =         '$(this.name)，$(this.prop)。';    }})

其中的 created 事件就是一个 hook,执行效果：
我是app的名称，我是app的属性。

所谓“生命周期”，就是在类实例化的过程中，构造函数执行的不同阶段。
钩子”就是在某个阶段给你一个做某些处理的机会。

4.实例生命周期
每个 Vue 实例在创建之前都要经过一系列的初始化过程。

Vue实例有一个完整的生命周期，也就是从开始创建、配置数据观测 （data observer）、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。

通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
，实例也会调用一些生命周期钩子，

在这个过程中，它提供了一系列的事件，可以让我们注册 js 方法，这就给我们提供了执行自定义逻辑的机会，可以让我们达到控制整个过程的目的地，
哇赛，如果你搞过 Asp.Net WebForm 的话，你会发现整个就是 WebForm 的翻版嘛哈哈。

值得注意的是，在这些事件响应方法中的 this 直接指向的是 vue 的实例。

例如：created 这个钩子在实例被创建之后被调用

var vm = new Vue({    data: {        a:1    }    created:function(){        //this 指向 vm 实例        console.log( 'a is' + this.a )    } //--> a is 1})

也有一些其他的钩子，在实例周期的不用阶段调用，如： monted、updated、destroyed钩子的 this 指向调用它的 Vue 实例。Vue 没有控制器的概念，组件的自定义逻辑可以分布在这些钩子中。首先看看下面官网的一张生命周期的图，我做一下标注，看看整体的流程，后面我们上代码做一下效果。！[i]Vue提供的可以注册的钩子都在上图片的红色框标注。 他们是：+ beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用+ created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，el属性目前不可见+beforeMount在挂载开始之前被调用：相关的render函数首次被调用+mountedel被新创建的vm.el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。+ beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。+ updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。 然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 该钩子在服务器端渲染期间不被调用。+ beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。+ destroyed Vue 实例销毁后调用。 调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。接下来我们做一个例子，看一下Vue中所有的生命周期怎么用的。

  <div id="app">    <p>{{ number }}</p>    <input type="text" name="btnSetNumber" v-model="number">  </div>  <script>    var app = new Vue({               el: '#app',                     data: {                           number: 1      },      beforeCreate: function () {        console.log('beforeCreate 钩子执行...');        console.log(this.number)      },      cteated: function () {        console.log('cteated 钩子执行...');        console.log(this.number)      },      beforeMount: function () {        console.log('beforeMount 钩子执行...');        console.log(this.number)      },      mounted: function () {        console.log('mounted 钩子执行...');        console.log(this.number)      },      beforeUpdate: function () {        console.log('beforeUpdate 钩子执行...');        console.log(this.number)      },      updated: function () {        console.log('updated 钩子执行...');        console.log(this.number)      },      beforeDestroy: function () {        console.log('beforeDestroy 钩子执行...');        console.log(this.number)      },      destroyed: function () {        console.log('destroyed 钩子执行...');        console.log(this.number)      },    });  </script>