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官网）
