Vue实例

1、创建一个vue实例

<script>
    var vm = new Vue({
       //选项对象包含数据，模板，挂载元素，方法，生命周期钩子等选择
    })
</script>

2、扩展Vue实例，所有的 Vue.js 组件其实都是被扩展的 Vue 实例。

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

3、方法和属性

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="id">
10        {{a}}
11         <input v-model="a">
12     </div>
13 </body>
14 <script>
15     var data = { a: 1 }
16     var vm = new Vue({
17         el:'#id',
18         data: data
19     })
20     vm.a === data.a // -> true
21     // 设置属性也会影响到原始数据
22     vm.a = 2
23     data.a // -> 2
24     // ... 反之亦然
25     data.a = 3
26     vm.a // -> 3
27     //Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分
28     vm.$data === data // -> true
29     vm.$el === document.getElementById('id') // -> true
30     // $watch 是一个实例方法
31     vm.$watch('a', function (newVal, oldVal) {
32         // 这个回调将在 `vm.a`  改变后调用
33     })
34 </script>
35 </html>

显示的结果为：3

当在页面输入数字时可以在控制观看数字的改变

4、实例的生命周期和执行自定义逻辑，当创建一个实例时会经过一系列的初始化工作，配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在初始化的过程中，实例也会调用一些生命周期钩子，同时也是我们自定义逻辑的最佳时期。如实例创建之后调用的created钩子时。代码如下

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="id">
10      {{message}}
11     </div>
12 </body>
13 <script>
14    var vm = new Vue({
15        el: '#id',
16        data:{
17            message:'正在自定义逻辑'
18        },
19        created: function(){
20            console.log('开始自定义逻辑---'+this.message)//在控制台输出
21            alert('开始自定义逻辑---'+this.message)
22        }
23    })
24 </script>
25 </html>

备注：钩子的‘this’指向的是vue实例，实例初始化的调用的其它钩子还有:mounted、 updated 、destroyed

5、实例生命周期图（此图来至vue官网）

图片来至Vue官网