昨天寫完了博客以后针史,有人就在我的博客下面留言說(shuō)現(xiàn)在不是使用了Axios了嗎痰腮?我趕緊再把Axios的例程給補(bǔ)上材鹦,并且做一個(gè)更新。
其實(shí)vue-resource并不復(fù)雜耕姊,就是不穩(wěn)定桶唐。Vue官方放棄它也是對(duì)的,作者是這樣子說(shuō)的
最近團(tuán)隊(duì)討論了一下茉兰,Ajax 本身跟 Vue 并沒(méi)有什么需要特別整合的地方尤泽,使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果规脸,vue-resource 提供的價(jià)值和其維護(hù)成本相比并不劃 算坯约,所以決定在不久以后取消對(duì) vue-resource 的官方推薦。已有的用戶可以繼續(xù)使用莫鸭,但以后不再把 vue-resource 作為官方的 ajax 方案闹丐。
axios的確更優(yōu)秀更穩(wěn)定。
首先引入Vue和axios黔龟。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/js/vue.js"></script>
然后妇智,編寫Javascript:
Vue.prototype.$http=axios;
new Vue({
el: '#app',
data: {
peps: ''
},
mounted() {
this.$http.get('Category.json').then(response=>this.peps=response.data);
}
})
json數(shù)據(jù)是這樣子的:
[
{
"ID":"1",
"name": "地產(chǎn)",
"Url":"/Category/List/1"
},
{ "ID":"2",
"name": "科技",
"Url":"/Category/List/2"},
{ "ID":"3",
"name": "醫(yī)藥",
"Url":"/Category/List/3"},
{ "ID":"4",
"name": "其他",
"Url":"/Category/List/4"}
]
我是希望以上的數(shù)據(jù)渲染到一個(gè)Select里面去,通過(guò)onchange直接將當(dāng)前頁(yè)面跳轉(zhuǎn)到j(luò)son數(shù)據(jù)的Url去氏身,那么在html中只需要這樣設(shè)置:
<select id="app" onchange="if (this.value) window.location.href=this.value">
<option v-for = "pep in peps" :value = "pep.Url" >{{pep.name}}</option>
</select>
運(yùn)行測(cè)試通過(guò)巍棱。