vue之數(shù)據(jù)交互實例代碼
vue中的交互(ajax,jsonp)
vue中也存在像ajax和jsonp的數(shù)據(jù)交互,實現(xiàn)向服務(wù)器獲取數(shù)據(jù),但是他本身框架當中沒有這樣的方法,需要一個新的小東西叫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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解vue-Resource(與后端數(shù)據(jù)交互)
- 詳解vue與后端數(shù)據(jù)交互(ajax):vue-resource
- Vue2學(xué)習(xí)筆記之請求數(shù)據(jù)交互vue-resource
- 詳解vue前后臺數(shù)據(jù)交互vue-resource文檔
- vue之數(shù)據(jù)交互實例代碼
- 使用vue-resource進行數(shù)據(jù)交互的實例
- Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析
- vuejs父子組件之間數(shù)據(jù)交互詳解
- vue利用axios來完成數(shù)據(jù)的交互
- Vue2.0子同級組件之間數(shù)據(jù)交互方法
- vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作詳解
相關(guān)文章
vue3.0 vue.config.js 配置基礎(chǔ)的路徑問題
這篇文章主要介紹了vue3.0 vue.config.js 配置基礎(chǔ)的路徑問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue表單驗證rules及validator驗證器的使用方法實例
在vue開發(fā)中,難免遇到各種表單校驗,下面這篇文章主要給大家介紹了關(guān)于vue表單驗證rules及validator驗證器使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07vue elementUI table 自定義表頭和行合并的實例代碼
這篇文章主要介紹了vue elementUI table 自定義表頭和行合并的實例代碼,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05