vue之?dāng)?shù)據(jù)交互實(shí)例代碼
vue中的交互(ajax,jsonp)
vue中也存在像ajax和jsonp的數(shù)據(jù)交互,實(shí)現(xiàn)向服務(wù)器獲取數(shù)據(jù),但是他本身框架當(dāng)中沒有這樣的方法,需要一個(gè)新的小東西叫vue-resouce.js 地址:https://github.com/pagekit/vue-resource/blob/master/README.md
<meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vue-resource.js"></script> <style type="text/css"> </style> </head> <body> <div id="app"> <button @click="get()">按鈕</button> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ }, methods:{ get:function(){ this.$http.get('a.txt').then(function(res){ alert(res.data); },function(res){ alert(res.data); }); } } }); </script> </body>
$http 就類似于ajax 他可以this.$http.get this.$http.post還有一種就是jsonp完成跨域取數(shù)據(jù)
<div id="app"> <button @click="get()">按鈕</button> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ }, methods:{ get:function(){ this.$http.jsonp('https://sug.so.#/suggest'{word:'b'}).then(function(res){ alert(res.data.s); },function(res){ alert(res.status); }); } } }); </script> </body>
跨域取數(shù)據(jù)百度下拉例子:
<meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vue-resource.js"></script> <style type="text/css"> *{ margin:0; padding: 0;} .bg{width: 200px; line-height:30px;} </style> </head> <body> <div id="app"> <input type="text" v-model="t" @keyup="get($event)" @keydown.down="changeDown()" @keyup.up.prevent="changeUp()"/> <ul> <li v-for="val in arr" class="bg"> {{val}} </li> </ul> <p v-show="arr.length==0">暫無數(shù)據(jù)</p> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ arr:[], t:'', iNow:-1 }, methods:{ get:function(ev){ if(ev.keyCode==38||ev.keyCode==40){ return; } if(ev.keyCode==13){ window.open('https://www.baidu.com/s?wd='+this.t); this.t='' } this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{wd:this.t},{jsonp:'cb'}).then(function(res){ this.arr=res.data.s },function(res){ alert('失敗'); }); }, changeDown:function(){ this.iNow++; if(this.iNow==this.arr.length)iNow=-1; this.t=this.arr[this.iNow]; }, changeUp:function(){ this.iNow--; if(this.iNow==-2)this.iNow=this.arr.length-1 this.t=this.arr[this.iNow]; } } }); </script> </body>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解vue-Resource(與后端數(shù)據(jù)交互)
- 詳解vue與后端數(shù)據(jù)交互(ajax):vue-resource
- Vue2學(xué)習(xí)筆記之請(qǐng)求數(shù)據(jù)交互vue-resource
- 詳解vue前后臺(tái)數(shù)據(jù)交互vue-resource文檔
- vue之?dāng)?shù)據(jù)交互實(shí)例代碼
- 使用vue-resource進(jìn)行數(shù)據(jù)交互的實(shí)例
- Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析
- vuejs父子組件之間數(shù)據(jù)交互詳解
- vue利用axios來完成數(shù)據(jù)的交互
- Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法
- vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作詳解
相關(guān)文章
vue3.0 vue.config.js 配置基礎(chǔ)的路徑問題
這篇文章主要介紹了vue3.0 vue.config.js 配置基礎(chǔ)的路徑問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue表單驗(yàn)證rules及validator驗(yàn)證器的使用方法實(shí)例
在vue開發(fā)中,難免遇到各種表單校驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vue表單驗(yàn)證rules及validator驗(yàn)證器使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07Vuex實(shí)現(xiàn)計(jì)數(shù)器以及列表展示效果
這篇文章主要為大家詳細(xì)介紹了Vuex實(shí)現(xiàn)計(jì)數(shù)器以及列表展示效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-03-03Vue中動(dòng)態(tài)Class實(shí)戰(zhàn)示例
這篇文章主要為大家介紹了Vue中動(dòng)態(tài)Class的實(shí)戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11vue elementUI table 自定義表頭和行合并的實(shí)例代碼
這篇文章主要介紹了vue elementUI table 自定義表頭和行合并的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05