Vue.js 是什么

Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。

另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

上几个简单的例子

声明式渲染

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统：

 ???<div id="app"> ???????{{ message }} ???</div>

 ???var app = new Vue({ ?????el: ‘#app‘, ?????data: { ??????message: ‘Hello Vue!‘ ?????} ???})

条件

控制切换一个元素的显示也相当简单：

 ???<div id="app-3"> ?????<p v-if="seen">Now you see me</p> ???</div>

 ???var app3 = new Vue({ ?????el: ‘#app-3‘, ?????data: { ?????seen: true ?????} ???})

继续在控制台设置 app3.seen = false，你会发现 “Now you see me” 消失了。

循环

v-for指令可以绑定数据到数据来渲染一个列表：

 ???<div id="app-4"> ?????<ol> ???????<li v-for="todo in todos"> ?????????{{ todo.text }} ???????</li> ?????</ol> ???</div>

 ????var app4 = new Vue({ ???????el: ‘#app-4‘, ???????data: { ???????todos: [ ???????????{ text: ‘Learn JavaScript‘ }, ???????????{ text: ‘Learn Vue‘ }, ???????????{ text: ‘Build something awesome‘ } ???????????] ???????} ?????})