參考資料
前言
最近項目需求胁澳，其中要做一個類似日歷的東西竖瘾，正好不是很忙桃煎，就邊看vue文檔邊做醋拧。想學(xué)習(xí)vue的同學(xué)卿嘲，可以參考下颂斜。日歷插件
正文
Vue是一個輕量級的mvvm框架。
官方倉庫主要有腔寡，vue焚鲜、vuex、vue-router和vue-resource(不久的將來會停止維護(hù))放前，分別負(fù)責(zé)組件化開發(fā)忿磅、狀態(tài)管理、路由控制和AJAX凭语，我下面就簡單介紹這幾個的關(guān)系葱她。
1.vue
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods:{
init(){
//code....
}
}
})
以上就是一個簡單的vue模版和vue實例，似扔，el是掛載元素吨些，data是數(shù)據(jù)搓谆，vue實例只監(jiān)聽data里的數(shù)據(jù)變化，模版內(nèi)的{{}}是界定符豪墅，會渲染data里的數(shù)據(jù)泉手。接觸過模版引擎的同學(xué)，可能見過類似的寫法偶器，比如{!! !!}斩萌、<% %>等。
1.1 編寫組件
全局組件：
// 注冊
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 創(chuàng)建根實例
new Vue({
el: '#example'
})
局部組件：
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 將只在父模板可用
'my-component': Child
}
})
我暫時用的是局部組件屏轰，組件的template寫復(fù)雜的html時換行用加轉(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;
}
}
};
我上面定義了一個頭部組件，主要組件的data必須要寫成函數(shù)形式霎苗，具體使用的時候像下面這樣姆吭，是一個自定義標(biāo)簽，暫時不用在意router-view標(biāo)簽（在講router的時候會講）：
<div class="cl" id="cl">
<clheader></clheader>
<keep-alive>
<router-view></router-view>
</keep-alive>
<clfooter></clfooter>
</div>
2.vuex
當(dāng)我們編寫很多組件的時候唁盏，組件和組件之間的通信就會變得很麻煩内狸，這時候就需要vuex了，使用vuex來創(chuàng)建一個倉庫升敲。具體用法查看文檔答倡。
var store = new Vuex.Store({
state: {
year: 2016,
today: {
year: 2016,
month: 1,
date: 1,
day: 1
},
listarr: [],
upcount: 0, //向上翻頁次數(shù),
showfooter: false,
selectedDate: [] //所選擇的日期
},
mutations: {
goup: function(state) {
state.upcount++;
}
}
})
state里就是存儲原先實例和組件的data里的變量，共享的一些數(shù)據(jù)都存放在這里驴党，組件內(nèi)可以通過調(diào)用this.$store.state.year訪問數(shù)據(jù)瘪撇，組件無法直接修改store里的數(shù)據(jù)，要先將store注入到實例或組件中港庄，這樣實例或組件中倔既，可以通過｀this.$store.commit('goup',args)觸發(fā)mutations里的方法來修改公用的數(shù)據(jù)，數(shù)據(jù)一旦被更改鹏氧，其余組件也會相應(yīng)作出變化渤涌。
3.vue-router
單頁面應(yīng)用中最重要的一部分，可能就是路由了把还。
主要是兩個標(biāo)簽实蓬，router-view和router-link。router-view是一個視圖容器吊履，router-link類似于a標(biāo)簽安皱，用作跳轉(zhuǎn)視圖，具體用法可以查看文檔艇炎。
//設(shè)置路由
var routes = [
{
path: '/',
component: calendar
}, {
path: '/manage/:year/:month/:date',
component: clmanage
}
];
//路由實例
var router = new VueRouter({
routes: routes
});
上面是我寫的兩個路由酌伊，對應(yīng)的組件會渲染到router-view里。默認(rèn)情況下缀踪，vue-router是hash模式居砖，訪問時url前面會有#符號虹脯。如果你切換成html5 的histroy模式，就是一般網(wǎng)頁的url奏候，但這需要服務(wù)器做一些配置循集，因為服務(wù)器會先去走后臺的路由，匹配不到就會報錯鼻由。
4.AJAX
掌握上面的三樣暇榴，你已經(jīng)可以寫出一個簡單的SPA靜態(tài)頁面厚棵，現(xiàn)在需要靠ajax來獲取后臺傳過來的數(shù)據(jù)來生成一個動態(tài)頁面了蕉世。
vue官方考慮到維護(hù)成本，原先推薦的vue-resource將停止維護(hù)婆硬，已經(jīng)使用的還可以繼續(xù)使用『萸幔現(xiàn)在推薦的是 axios（Git項目首頁），注意axios是基于ES6的Promise對象設(shè)計的彬犯，所以如果你的瀏覽器不支持Promise可能需要polyfill向楼。當(dāng)然你也可以使用jQuery的ajax，萬能的jQuery ：）谐区。
ES6的Promise可以很好的處理異步回調(diào)湖蜕，通過.then的鏈?zhǔn)綄懛ǎ苊庖酝舐牡菇鹱炙降倪f歸回調(diào)寫法宋列。尤其是以下這種方法昭抒，在一些特殊的場景下會很驚艷。
promise.all([promise1, promise2])//將多個promise合并成一個新promise來處理
.then(function(results){
...//處理結(jié)果
})
.catch(function(error){
console.log(error);
});
axios支持的請求如下：
- 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請求炼杖，如果你后端是restful風(fēng)格的接口的話灭返，那就會用到put、delete等坤邪。
結(jié)語
以上就是vue“全家桶”的簡單使用熙含，希望對需要的同學(xué)有幫助。
