Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。他是基于AnjularJs 编写的，所以和前者的语法特别相似，却又使用简洁了很多。

　　那今天，我就给大家详细的说道说道这个 Vue.js ，以下是我们这次详解的目录，朋友们可以根据自己的情况选择性阅读，所有操作均附有代码实现。

1. Vue.js 如何绑定到页面中，使用他的功能。

2. Vue 实例化对象的生命周期。

3. Vue 的 所有 数据绑定指令

　　那接下来，我们就开始今天的介绍啦！

1. Vue.js 如何绑定到页面中，使用他的功能。

　　先看下面的一段代码：

我是app1，点我 Vue({ el:, data:{ message:, func:function(){ alert(this.message); } } }); console.log(app1.$data.message);

　　效果如下：

　　上述代码就是点击按钮有弹窗，下面解析一下这段代码。

var app1= new Vue({ el:"#app1", data:{ message:"我在app1中显示出来了吗？", func:function(){ alert(this.message); } } });
console.log(app1.$data.message);

　　通过Vue.js的构造函数实例化出一个根实例 app1 ，说白了，这就是我们面向对象的对象的实例化，直接 new 一个对象。

　　el:"#app1", 这是在 挂载我们实例化对象的元素节点，就是这个app1 对象作用域是那一个标签里面的。这里可以是 id、class、tagname。但是主要还是用id，因为他的唯一性。

　　data:{} 是定义 这个对象的变量和方法，注意所有在和 app1 有关联的变量、方法都必须在data中声明。

　　注意： (1)作用域。js5 只有函数作用域，所以 data 中的函数如果想调用变量，就必须通过  this. 调用，或者直接通过对象名调用。

　　　　　 (2)外部调用。app1.$data.message； 在js中直接调用 vue 对象的属性、方法时，需要链式语法，一层层点出来，这里用  $data  ，主要还是和js的变量作区别

　　　　    (3)与HTML代码的绑定。 这里我是通过 js 的onclick直接绑定的，当然 vue 有自己的事件绑定，这里暂且不讲，如果用 js 的行内绑定，注意需要带对象名。这就是纯 OOP思想了。相信大家对面向对象也不陌生，如果真的不知道是啥玩意的，赶紧百度学去。

　　以上就是最最最最最最.....基础的使用 vue  的方法了。

2. Vue 实例化对象的生命周期。

　　接下来，我们说一下，一个实例化出来的对象，他的生命周期是啥样的，要经历那些阶段。请看下面一段代码：

我的声明周期，大家看吧！ Vue({ el: , data: { test : }, beforeCreate: function(){ console.log(this); showData(); }, created: function(){ showData(); }, beforeMount:function(){ showData(); }, mounted: function(){ showData(); }, beforeUpdate:function(){ showData(); }, updated:function(){ showData(); }, beforeDestroy:function(){ vm.test ; showData(); }, destroyed:function(){ showData(); } }); function realDom(){ console.log().innerHTML); } function showData(process,obj){ console.log(process); console.log( obj.test) console.log() console.log(obj.$el) realDom(); console.log() console.log() }

　　那接下来看看效果图：

　　通过控制台的打印效果可以看出来，实例化 vue 对象大致分为 创建vue实例、挂载到dom、数据变化更新、vue实例销毁 4个阶段，，注意每个阶段都有对应的钩子，我们可以通过对这些钩子进行操作，达成一些功能。虽然初学者用不太上，但是提前了解一下还是好的，到时候碰到实际功能要能想得到生命周期的钩子。

3. Vue 的 所有 数据绑定指令

　　那现在我们就总结一下 vue 的最大亮点，各种灵活的数据绑定方法。这里主要列举实例详解  {{}} 、 v-once 、 v-html 、 v-bind 和 v-model 。

　　（1）首先是   {{}} 、 v-once 、 v-html 的用法，请看下面的代码：

数据绑定篇 数据绑定篇 点我，改变变量message的值{{message}}{{message}} Vue({ el: data:{ message:, h1:(){ ) { ; }else{ ; } }

　　然后看一下效果：

　　还是分析一下这个小demo。

 　　<div>{{message}}</div>  Mustache 标签，也就是双大括号,他和 AnjularJs 的双大括号完全相同，就是直接将数据动态绑定到标签中，当变量发生变化的时候，标签内容也是改变，上大括号里面也是可以写表达式的。上述代码是做了一个 在button中点击改变变量message的值，然后通过数据绑定使div的text即时变化。