vue2.x ajax,vue2.x入门

参考资料

前言

最近项目需求，其中要做一个类似日历的东西，正好不是很忙，就边看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“全家桶”的简单使用，希望对需要的同学有帮助。