html使用vue axios,使用 Vue和axios

昨天写完了博客以后，有人就在我的博客下面留言说现在不是使用了Axios了吗？我赶紧再把Axios的例程给补上，并且做一个更新。

其实vue-resource并不复杂，就是不稳定。Vue官方放弃它也是对的，作者是这样子说的

最近团队讨论了一下，Ajax 本身跟 Vue 并没有什么需要特别整合的地方，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果，vue-resource 提供的价值和其维护成本相比并不划 算，所以决定在不久以后取消对 vue-resource 的官方推荐。已有的用户可以继续使用，但以后不再把 vue-resource 作为官方的 ajax 方案。

axios的确更优秀更稳定。

首先引入Vue和axios。

然后，编写Javascript:

Vue.prototype.$http=axios;

new Vue({

el: '#app',

data: {

peps: ''

},

mounted() {

this.$http.get('Category.json').then(response=>this.peps=response.data);

}

})

json数据是这样子的：

[

{

"ID":"1",

"name": "地产",

"Url":"/Category/List/1"

},

{ "ID":"2",

"name": "科技",

"Url":"/Category/List/2"},

{ "ID":"3",

"name": "医药",

"Url":"/Category/List/3"},

{ "ID":"4",

"name": "其他",

"Url":"/Category/List/4"}

]

我是希望以上的数据渲染到一个Select里面去，通过onchange直接将当前页面跳转到json数据的Url去，那么在html中只需要这样设置：

{{pep.name}}

运行测试通过。