Vue.js是一套构建用户界面的渐进式框架。采用自底向上增量开发的设计。Vue的核心值关注视图层非常容易与其他库和已有的项目整合。另外，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
Vue.js的目标是通过尽可能简单地API实现响应式数据绑定和组合的视图组件。
声明式渲染
vue的核心是允许你使用简单地模板语法来声明式的将数据渲染进DOM的系统 demo:
<div id="app"> <div>{{msg1}}</div> </div>
var app=new Vue(function(){ el:"#app", data:{ msg1:"this is my first vueMsg", items:[1,2,3,4,5,6,7,8,9,10], methods:{ veverseMessage:function(){ this.msg1=this.msg1.split("").reverse().join(" ") } } } })
除了绑定插入的文本内容，我们还可以采用这样的额方法绑定DOM元素的属性：
在id 为app的DOM元素中添加
<div v-bind:title="msg1">hove your mouse for a few seconds to see the bound title!</div>
v-bind:title="msg1"
这个指令的简单含义就是：将这个元素节点的title属性和Vue实例的msg1属性绑定在一起
条件与循环
<ul> <li v-for="item in items">{{item}}</li> </ul>
处理用户输入
为了让用户和你的应用进行互动，我们可以使用v-on指令绑定一个监听事件用于调用我们Vue实例中定义的方法
<button v-on:click="veverseMessage()"></button>
vue页提供了v-model指令，它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧
<input type='text" v-model="msg1"> <div>{{msg1}}</div>
用组件构建应用
组件系统是Vue的另外一个重要的概念，因为它提供了一种抽象，让我们用独立可复用的小组件构建大型应用。如果我们考虑到这点，几乎任意类型的
应用的界面都可以抽象为一个组件树：
在Vue里，一个组件实质上是一个个拥有预定义选项的一个Vue实例：
Vue.component("item-todo",{
template:"<div>this is my first vue component template</div>"
})
现在我们可以在另一个组件模板中写入它：
<item-todo></item-todo>
但是这样会为每一个item-todo渲染同样的文本，我们应该将数据从父作用域传到子组件，让我们来修改一下组件的定义，使得它能够接受一个prop字段：
这样我们就可以使用v-bind指令将todo传到每一个重复的组件中
<ul> <item3 v-for="item in itms" v-bind:todo="item"></item3> </ul>
子元素通过props接口实现了与父元素很好的解耦。我们现在可以在不影响父应用的基础上，进一步为我们的todo组件改进更多复杂的模板和逻辑。
与自定义元素之间的关系
你可能已经注意到Vue.js组件类似于自定义元素-----它是web组件规范的一部分。实际上Vue.js的组件语法参考了该规范，不同：
1 web组件规范仍然远未完成，并且没有浏览器实现。相比之下，Vue.js的组件不需要任何补丁，并且在所有的浏览器中（ie9以及更高版本）之下表现一致，必要时，Vue.js组件也可以放在原生自定义元素之内。
2 Vue.js组件提供了原生自定义元素所不具备的一些重要功能。比如组件间的数据流，自定义事件系统，以及动态的、带特效的组件替换。
来自:http://cn.vuejs.org/v2/guide/class-and-style.html