vue 简介

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