发现Vue
最近公司在做一个H5的项目，涉及到用户数据绑定，由于用的是Html+webApi的形式，所以每次绑定用户数据的时候感觉写的特别累，js文件里写了一大堆东西，每次改的时候格式看的让人很头痛。刚好最近接触了微信小程序，看到里面数据绑定的时候特别方便，于是就想一定也有这样的js框架来实现类似小程序里数据绑定的方式吧！于是乎就找到了vue.js。简单用了下还是很给力的。
Vue.js 介绍
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
上几个简单的例子
声明式渲染
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' }
]
}
})
Paste_Image.png
重点
以上就是Vue.js的简单介绍
更详细的内容大家可以访问官网http://cn.vuejs.org/
