vue就是一个js库，并且无依赖别的js库，直接引入一个js文件就可以使用，跟jquery差不多。vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。
版本选择？
现在vue分为vue1和vue2这两个大版本，然而现在有一些基于vue的框架还不兼容vue2，不过自己折腾可以随意选择一个的，反正文档还算挺详细。
为什么我们要使用vue？
其实跟jquery差不多，都是简化我们的开发。例如我们可以用vue实现像后端模板渲染的功能，可以更加便捷的绑定dom事件，可以把一些页面的组件打包重复使用。下面我们看看如何简单粗暴的使用vue。
安装
使用npm安装：
npm install vue
如何优雅的使用vue当成模板引擎
后端的同学想必挺清楚模板引擎是什么玩意了，而对于刚入门前端的同学来说，往往渲染页面会使用字符串拼接（非常不推荐）或者dom的clone来动态生成html，但是这两种方法写法都很麻烦，而vue却能十分优雅的实现模板渲染这种功能。
我们拿官方的例子来看看，如下图：
＃hello world
<div id="app">
{{ message }}
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
显示效果：
＃双向绑定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
显示效果：
我们可以看到，el里面跟jquery的元素选择标识符是一样的，这个就是选择要渲染的区域。data是一个字典，这个字典就是要填充的数据。而上面的html两个花括号里面一个变量名这种方式就是输出变量值。
也许你会说，循环输出咋办，别担心，vue都提供了。看：
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
显示效果：
方法与事件处理器
其实就是用特定语法代替了直接在html标签写onclick='xxx'这些，也不用jquery写$("#xxx").on("click", function(){});，反正用法很简单，老规矩，上官方例子：
<div id="example">
<button v-on:click="greet">Greet</button>
</div>
var vm = new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// 方法内 `this` 指向 vm
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
// 也可以在 JavaScript 代码中调用方法
vm.greet() // -> 'Hello Vue.js!'
效果图：
组件
首先，我们看看官方例子：
<div id="example">
<my-component></my-component>
</div>
// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
})
// 注册
Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
el: '#example'
})
渲染为：
<div id="example">
<div>A custom component!</div>
</div>
显示效果：
一眼看过去，相当于宏定义嘛，我们声明一种标签是代表一串特定的html字符串。（我们先这样子将就的用着，其实这组件背后还涉及值的传递，函数绑定这些，但是我们入门，先不管）
单文件的方式使用路由
让我们思考一下，为什么要有路由这东西呢？我们一向的做法是一个页面一个URL，页面切换的时候跳到新的地址。后来，由于请求新页面太耗费流量，工程师们想到使用ajax拉取数据，局部刷新页面，这种方法大大节省了流量（当然这种做法对seo不友好，这里就不展开说了，想了解更多可以持续关注我）。vue的路由其实也是为了页面切换不用重新整个页面重新加载，我们来看看例子：
<div id="app">
<component :is="currentView"></component>
</div>
Vue.component('home', { /* ... */ })
Vue.component('page1', { /* ... */ })
var app = new Vue({
el: '#app',
data: {
currentView: 'home'
}
})
// 在路由处理器中切换页面
app.currentView = 'page1'
可以看到使用vue之后，我们写的代码是十分好维护的。
入门到此为止了
上面这些简单粗暴的使用vue其实可以让我们充分体会到vue的美，特别是小应用小团队，用这些基本上足够应付了。什么是醉完美的？简单的又能提高我们的开发效率就是完美的。
接下来，我们应该如何进一步学习vue呢？
-
学会用webpack打包组件，并且可以使用打包后的组件
-
了解一些基于vue的框架，例如Element UI，iView这些UI框架
-
组件通信，异步组件的用法
-
服务器渲染
-
学会开发vue插件
更多angular1/2/4、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。
