什么是vue？
vue就是一個(gè)js庫，并且無依賴別的js庫，直接引入一個(gè)js文件就可以使用，跟jquery差不多。vue是法語中視圖的意思，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫，同時(shí)擁有非常容易上手的API。
版本選擇？
現(xiàn)在vue分為vue1和vue2這兩個(gè)大版本，然而現(xiàn)在有一些基于vue的框架還不兼容vue2，不過自己折騰可以隨意選擇一個(gè)的，反正文檔還算挺詳細(xì)。
為什么我們要使用vue？
其實(shí)跟jquery差不多，都是簡化我們的開發(fā)。例如我們可以用vue實(shí)現(xiàn)像后端模板渲染的功能，可以更加便捷的綁定dom事件，可以把一些頁面的組件打包重復(fù)使用。下面我們看看如何簡單粗暴的使用vue。
安裝
使用npm安裝：
npm install vue
如何優(yōu)雅的使用vue當(dāng)成模板引擎
后端的同學(xué)想必挺清楚模板引擎是什么玩意了，而對(duì)于剛?cè)腴T前端的同學(xué)來說，往往渲染頁面會(huì)使用字符串拼接（非常不推薦）或者dom的clone來動(dòng)態(tài)生成html，但是這兩種方法寫法都很麻煩，而vue卻能十分優(yōu)雅的實(shí)現(xiàn)模板渲染這種功能。
我們拿官方的例子來看看，如下圖：
＃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的元素選擇標(biāo)識(shí)符是一樣的，這個(gè)就是選擇要渲染的區(qū)域。data是一個(gè)字典，這個(gè)字典就是要填充的數(shù)據(jù)。而上面的html兩個(gè)花括號(hào)里面一個(gè)變量名這種方式就是輸出變量值。
也許你會(huì)說，循環(huán)輸出咋辦，別擔(dān)心，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' }
]
}
})
顯示效果：
方法與事件處理器
其實(shí)就是用特定語法代替了直接在html標(biāo)簽寫onclick='xxx'這些，也不用jquery寫$("#xxx").on("click", function(){});，反正用法很簡單，老規(guī)矩，上官方例子：
<divid="example">
<button v-on:click="greet">Greet</button>
</div>
var vm = new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
// 在 `methods` 對(duì)象中定義方法
methods: {
greet: function (event) {
// 方法內(nèi) `this` 指向 vm
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
// 也可以在 JavaScript 代碼中調(diào)用方法
vm.greet() // -> 'Hello Vue.js!'
效果圖：
組件
首先，我們看看官方例子：
<divid="example">
<my-component></my-component>
</div>
// 定義
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
})
// 注冊(cè)
Vue.component('my-component', MyComponent)
// 創(chuàng)建根實(shí)例
new Vue({
el: '#example'
})
渲染為：
<div id="example">
<div>A custom component!</div>
</div>
顯示效果：
一眼看過去，相當(dāng)于宏定義嘛，我們聲明一種標(biāo)簽是代表一串特定的html字符串。（我們先這樣子將就的用著，其實(shí)這組件背后還涉及值的傳遞，函數(shù)綁定這些，但是我們?nèi)腴T，先不管）
單文件的方式使用路由
讓我們思考一下，為什么要有路由這東西呢？我們一向的做法是一個(gè)頁面一個(gè)URL，頁面切換的時(shí)候跳到新的地址。后來，由于請(qǐng)求新頁面太耗費(fèi)流量，工程師們想到使用ajax拉取數(shù)據(jù)，局部刷新頁面，這種方法大大節(jié)省了流量（當(dāng)然這種做法對(duì)seo不友好，這里就不展開說了，想了解更多可以持續(xù)關(guān)注我）。vue的路由其實(shí)也是為了頁面切換不用重新整個(gè)頁面重新加載，我們來看看例子：
<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之后，我們寫的代碼是十分好維護(hù)的。
入門到此為止了
上面這些簡單粗暴的使用vue其實(shí)可以讓我們充分體會(huì)到vue的美，特別是小應(yīng)用小團(tuán)隊(duì)，用這些基本上足夠應(yīng)付了。什么是醉完美的？簡單的又能提高我們的開發(fā)效率就是完美的。
接下來，我們應(yīng)該如何進(jìn)一步學(xué)習(xí)vue呢？
學(xué)會(huì)用webpack打包組件，并且可以使用打包后的組件
了解一些基于vue的框架，例如Element UI，iView這些UI框架
組件通信，異步組件的用法
服務(wù)器渲染
學(xué)會(huì)開發(fā)vue插件
更多angular1/2/4、ionic1/2/3、react、vue、微信小程序、nodejs等技術(shù)文章、視頻教程和開源項(xiàng)目，請(qǐng)關(guān)注微信公眾號(hào)——全棧弄潮兒。
總結(jié)
- 上一篇： java File类 打印目录树状结构（
- 下一篇： Latex之希腊字母表 花体字母 实数集