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等技術文章、視頻教程和開源項目，請關注微信公眾號——全棧弄潮兒。
