參考資料
前言
最近項(xiàng)目需求，其中要做一個(gè)類似日歷的東西，正好不是很忙，就邊看vue文檔邊做。想學(xué)習(xí)vue的同學(xué)，可以參考下。日歷插件
正文
Vue是一個(gè)輕量級(jí)的mvvm框架。
官方倉(cāng)庫(kù)主要有，vue、vuex、vue-router和vue-resource(不久的將來(lái)會(huì)停止維護(hù))，分別負(fù)責(zé)組件化開(kāi)發(fā)、狀態(tài)管理、路由控制和AJAX，我下面就簡(jiǎn)單介紹這幾個(gè)的關(guān)系。
1.vue
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods:{
init(){
//code....
}
}
})
以上就是一個(gè)簡(jiǎn)單的vue模版和vue實(shí)例，，el是掛載元素，data是數(shù)據(jù)，vue實(shí)例只監(jiān)聽(tīng)data里的數(shù)據(jù)變化，模版內(nèi)的{{}}是界定符，會(huì)渲染data里的數(shù)據(jù)。接觸過(guò)模版引擎的同學(xué)，可能見(jiàn)過(guò)類似的寫(xiě)法，比如{!! !!}、<% %>等。
1.1 編寫(xiě)組件
全局組件：
// 注冊(cè)
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 創(chuàng)建根實(shí)例
new Vue({
el: '#example'
})
局部組件：
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 將只在父模板可用
'my-component': Child
}
})
我暫時(shí)用的是局部組件，組件的template寫(xiě)復(fù)雜的html時(shí)換行用加轉(zhuǎn)義符 \ 。
//定義組件 － 頂部組件
var clheader = {
template: '\
<div class="cl-header">\
<span class="cl-year" id="clyear" v-cloak>{{year}}年</span>\
<ul>\
<li>日</li><li>一</li> <li>二</li> <li>三</li><li>四</li><li>五</li><li>六</li>\
</ul>\
</div>\
',
data(){
return {
a: 1
}
},
computed: {
year: function() {
return this.$store.state.year;
},
show: function() {
return !this.$store.state.showfooter;
}
}
};
我上面定義了一個(gè)頭部組件，主要組件的data必須要寫(xiě)成函數(shù)形式，具體使用的時(shí)候像下面這樣，是一個(gè)自定義標(biāo)簽，暫時(shí)不用在意router-view標(biāo)簽（在講router的時(shí)候會(huì)講）：
<div class="cl" id="cl">
<clheader></clheader>
<keep-alive>
<router-view></router-view>
</keep-alive>
<clfooter></clfooter>
</div>
2.vuex
當(dāng)我們編寫(xiě)很多組件的時(shí)候，組件和組件之間的通信就會(huì)變得很麻煩，這時(shí)候就需要vuex了，使用vuex來(lái)創(chuàng)建一個(gè)倉(cāng)庫(kù)。具體用法查看文檔。
var store = new Vuex.Store({
state: {
year: 2016,
today: {
year: 2016,
month: 1,
date: 1,
day: 1
},
listarr: [],
upcount: 0, //向上翻頁(yè)次數(shù),
showfooter: false,
selectedDate: [] //所選擇的日期
},
mutations: {
goup: function(state) {
state.upcount++;
}
}
})
state里就是存儲(chǔ)原先實(shí)例和組件的data里的變量，共享的一些數(shù)據(jù)都存放在這里，組件內(nèi)可以通過(guò)調(diào)用this.$store.state.year訪問(wèn)數(shù)據(jù)，組件無(wú)法直接修改store里的數(shù)據(jù)，要先將store注入到實(shí)例或組件中，這樣實(shí)例或組件中，可以通過(guò)｀this.$store.commit('goup',args)觸發(fā)mutations里的方法來(lái)修改公用的數(shù)據(jù)，數(shù)據(jù)一旦被更改，其余組件也會(huì)相應(yīng)作出變化。
3.vue-router
單頁(yè)面應(yīng)用中最重要的一部分，可能就是路由了。
主要是兩個(gè)標(biāo)簽，router-view和router-link。router-view是一個(gè)視圖容器，router-link類似于a標(biāo)簽，用作跳轉(zhuǎn)視圖，具體用法可以查看文檔。
//設(shè)置路由
var routes = [
{
path: '/',
component: calendar
}, {
path: '/manage/:year/:month/:date',
component: clmanage
}
];
//路由實(shí)例
var router = new VueRouter({
routes: routes
});
上面是我寫(xiě)的兩個(gè)路由，對(duì)應(yīng)的組件會(huì)渲染到router-view里。默認(rèn)情況下，vue-router是hash模式，訪問(wèn)時(shí)url前面會(huì)有#符號(hào)。如果你切換成html5 的histroy模式，就是一般網(wǎng)頁(yè)的url，但這需要服務(wù)器做一些配置，因?yàn)榉?wù)器會(huì)先去走后臺(tái)的路由，匹配不到就會(huì)報(bào)錯(cuò)。
4.AJAX
掌握上面的三樣，你已經(jīng)可以寫(xiě)出一個(gè)簡(jiǎn)單的SPA靜態(tài)頁(yè)面，現(xiàn)在需要靠ajax來(lái)獲取后臺(tái)傳過(guò)來(lái)的數(shù)據(jù)來(lái)生成一個(gè)動(dòng)態(tài)頁(yè)面了。
vue官方考慮到維護(hù)成本，原先推薦的vue-resource將停止維護(hù)，已經(jīng)使用的還可以繼續(xù)使用?，F(xiàn)在推薦的是 axios（Git項(xiàng)目首頁(yè)），注意axios是基于ES6的Promise對(duì)象設(shè)計(jì)的，所以如果你的瀏覽器不支持Promise可能需要polyfill。當(dāng)然你也可以使用jQuery的ajax，萬(wàn)能的jQuery ：）。
ES6的Promise可以很好的處理異步回調(diào)，通過(guò).then的鏈?zhǔn)綄?xiě)法，避免以往丑陋的倒金字塔式的遞歸回調(diào)寫(xiě)法。尤其是以下這種方法，在一些特殊的場(chǎng)景下會(huì)很驚艷。
promise.all([promise1, promise2])//將多個(gè)promise合并成一個(gè)新promise來(lái)處理
.then(function(results){
...//處理結(jié)果
})
.catch(function(error){
console.log(error);
});
axios支持的請(qǐng)求如下：
- axios.request(config)
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
我本人用的最多的還是get和post請(qǐng)求，如果你后端是restful風(fēng)格的接口的話，那就會(huì)用到put、delete等。
結(jié)語(yǔ)
以上就是vue“全家桶”的簡(jiǎn)單使用，希望對(duì)需要的同學(xué)有幫助。
