通过控制台的打印效果可以看出来，实例化 vue 对象大致分为 创建vue实例、挂载到dom、数据变化更新、vue实例销毁 4个阶段，，注意每个阶段都有对应的钩子，我们可以通过对这些钩子进行操作，达成一些功能。虽然初学者用不太上，但是提前了解一下还是好的，到时候碰到实际功能要能想得到生命周期的钩子。
3. Vue 的 所有 数据绑定指令
那现在我们就总结一下 vue 的最大亮点，各种灵活的数据绑定方法。这里主要列举实例详解 {{}} 、 v-once 、 v-html 、 v-bind 和 v-model 。
（1）首先是 {{}} 、 v-once 、 v-html 的用法，请看下面的代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>数据绑定篇</title> </head> <body> <!-- 数据绑定篇 --> <div> <!--1. {{}} v-once v-html--> <!--Mustache 标签，也就是双大括号,刷新页面时会显示出双大括号--> <button>点我，改变变量message的值</button> <br /><br /> <!--即时绑定，div的内容随变量变化而变化的，绑定内容作纯文本处理--> <!--双大括号里边也可以写表达式，和AngularJs一样的--> <div>{{message}}</div><br /> <!--只绑定一次，整个div的所有绑定数据，都只会加载一次，再更新就不会变了--> <div v-once>{{message}}</div><br /> <!--双大括号只能当纯文本显示，v-html 可以直接绑定HTML标签的--> <div v-html="h1"></div><br /> </div> </body> <script type="text/javascript" src="https://www.jb51.net/js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="https://www.jb51.net/js/vue.js" ></script> <script type="text/javascript"> //通过Vue.js的构造函数 实例化出一个根实例 var app1= new Vue({ el:"#app1", //我们实例化的 app1 的挂载的 元素节点，一般用 id，class，或者tagname也可以，但是多了会冲突 data:{ message:"我是变量message的内容！", h1:"<h1>我是h1标签</h1>", //注意单引号 //message改变函数 func:function(){ if (this.message == "我是变量message的内容！") { this.message = "message的内容改变了！"; }else{ this.message = "我是变量message的内容！"; } } </script> </html>
然后看一下效果：
还是分析一下这个小demo。
<div>{{message}}</div> Mustache 标签，也就是双大括号,他和 AnjularJs 的双大括号完全相同，就是直接将数据动态绑定到标签中，当变量发生变化的时候，标签内容也是改变，上大括号里面也是可以写表达式的。上述代码是做了一个 在button中点击改变变量message的值，然后通过数据绑定使div的text即时变化。
<div v-once>{{message}}</div> 他也是数据绑定，但是只绑定一次。要注意 v-once是加载div上的，所以整个div的所有绑定数据，都只会加载一次，再更新就不会变了，所以点击 button时，第二个div的数据并没有发生改变。
<div v-html="h1"></div> 是绑定HTML标签，注意 他可以直接绑定 HTML模板，但是这一堆HTML标签不能是多层嵌套的。什么意思呢，就是你之间绑定一段标签可以，绑定一个模板也可以，但是如果绑定一个模板，那这个模板内部不能再嵌套模板了。否则无法渲染的。上述代码就是直接导入了一个加了行内样式的h1标签，功能十分强大，比直接操作dom节点强太多了，效率是几何倍的增长。
（2） 其次是 v-bind
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>数据绑定篇</title> <style type="text/css"> .aaa{ margin: 10px; width: 100px; height: 100px; background-color: red; } .bbb{ margin: 10px; width: 50px; height: 50px; background-color: blue; } </style> </head> <body> <!-- 数据绑定篇 --> <div> <!--2. v-bind--> <!--v-bind 他是专门用来绑定属性的 ，主要用来操作元素的 class 列表和它的内联样式--> <!--这个和用 js 直接操作dom节点功能一样，不过简单特别多--> <div v-bind:style = "{backgroundColor:myColor,width: myWidth+'px',height: myHeight+'px'}"></div> <!--还可以直接绑定更改 class--> <div v-bind:class="myClass"></div> ------------------------------------------------------------------------------------- <div> <img v-bind:src="mySrc"/> </div> </div> </body> <script type="text/javascript" src="https://www.jb51.net/js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="https://www.jb51.net/js/vue.js" ></script> <script type="text/javascript"> //通过Vue.js的构造函数 实例化出一个根实例 var app1= new Vue({ el:"#app1", data:{ myColor:"blue", myWidth:100, myHeight:100, myClass:"aaa", mySrc:"img/2.png", func1:function(){ if (this.myColor == "blue") { this.myColor = "red"; this.myWidth = 50, this.myHeight = 50 }else{ this.myColor = "blue"; this.myWidth = 100, this.myHeight = 100 } }, func2:function(){ if (this.myClass == "aaa") { this.myClass = "bbb"; }else{ this.myClass = "aaa"; } }, func3:function(){ if (this.mySrc == "img/2.png") { this.mySrc = "img/u=1622626696,1630096734&fm=23&gp=0.jpg"; }else{ this.mySrc = "img/2.png"; } } } }); </script> </html>
然后看一下效果：
那我们解析一下上面的代码。
v-bind 他是专门用来绑定属性的 ，主要用来操作元素的 class 列表和它的内联样式。这一点和AnjularJs的 ng-bind 是完全不同的，要注意！！！