参考资料
- vue官网文档
- vuex官网文档
- vue-router官方文档
前言
最近项目需求，其中要做一个类似日历的东西，正好不是很忙，就边看vue文档边做。想学习vue的同学，可以参考下。日历插件
正文
Vue是一个轻量级的mvvm框架。
官方仓库主要有，vue、vuex、vue-router和vue-resource(不久的将来会停止维护)，分别负责组件化开发、状态管理、路由控制和AJAX，我下面就简单介绍这几个的关系。
1.vue
{{ message }}
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods:{
init(){
//code....
}
}
})
以上就是一个简单的vue模版和vue实例，，el是挂载元素，data是数据，vue实例只监听data里的数据变化，模版内的{{}}是界定符，会渲染data里的数据。接触过模版引擎的同学，可能见过类似的写法，比如{!! !!}、<% %>等。
1.1 编写组件
全局组件：
// 注册
Vue.component('my-component', {
template: 'A custom component!'
})
// 创建根实例
new Vue({
el: '#example'
})
局部组件：
var Child = {
template: 'A custom component!'
}
new Vue({
// ...
components: {
// 将只在父模板可用
'my-component': Child
}
})
我暂时用的是局部组件，组件的template写复杂的html时换行用加转义符 \ 。
//定义组件 － 顶部组件
var clheader = {
template: '\
\
{{year}}年\
\
- 日
- 一
- 二
- 三
- 四
- 五
- 六
\
\
\
',
data(){
return {
a: 1
}
},
computed: {
year: function() {
return this.$store.state.year;
},
show: function() {
return !this.$store.state.showfooter;
}
}
};
我上面定义了一个头部组件，主要组件的data必须要写成函数形式，具体使用的时候像下面这样，是一个自定义标签，暂时不用在意router-view标签（在讲router的时候会讲）：
2.vuex
当我们编写很多组件的时候，组件和组件之间的通信就会变得很麻烦，这时候就需要vuex了，使用vuex来创建一个仓库。具体用法查看文档。
var store = new Vuex.Store({
state: {
year: 2016,
today: {
year: 2016,
month: 1,
date: 1,
day: 1
},
listarr: [],
upcount: 0, //向上翻页次数,
showfooter: false,
selectedDate: [] //所选择的日期
},
mutations: {
goup: function(state) {
state.upcount++;
}
}
})
state里就是存储原先实例和组件的data里的变量，共享的一些数据都存放在这里，组件内可以通过调用this.$store.state.year访问数据，组件无法直接修改store里的数据，要先将store注入到实例或组件中，这样实例或组件中，可以通过｀this.$store.commit('goup',args)触发mutations里的方法来修改公用的数据，数据一旦被更改，其余组件也会相应作出变化。
3.vue-router
单页面应用中最重要的一部分，可能就是路由了。
主要是两个标签，router-view和router-link。router-view是一个视图容器，router-link类似于a标签，用作跳转视图，具体用法可以查看文档。
//设置路由
var routes = [
{
path: '/',
component: calendar
}, {
path: '/manage/:year/:month/:date',
component: clmanage
}
];
//路由实例
var router = new VueRouter({
routes: routes
});
上面是我写的两个路由，对应的组件会渲染到router-view里。默认情况下，vue-router是hash模式，访问时url前面会有#符号。如果你切换成html5 的histroy模式，就是一般网页的url，但这需要服务器做一些配置，因为服务器会先去走后台的路由，匹配不到就会报错。
4.AJAX
掌握上面的三样，你已经可以写出一个简单的SPA静态页面，现在需要靠ajax来获取后台传过来的数据来生成一个动态页面了。
vue官方考虑到维护成本，原先推荐的vue-resource将停止维护，已经使用的还可以继续使用。现在推荐的是 axios（Git项目首页），注意axios是基于ES6的Promise对象设计的，所以如果你的浏览器不支持Promise可能需要polyfill。当然你也可以使用jQuery的ajax，万能的jQuery ：）。
ES6的Promise可以很好的处理异步回调，通过.then的链式写法，避免以往丑陋的倒金字塔式的递归回调写法。尤其是以下这种方法，在一些特殊的场景下会很惊艳。
promise.all([promise1, promise2])//将多个promise合并成一个新promise来处理
.then(function(results){
...//处理结果
})
.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风格的接口的话，那就会用到put、delete等。
结语
以上就是vue“全家桶”的简单使用，希望对需要的同学有帮助。