<强> vue中的交互(ajax, jsonp)
vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,但是他本身框架当中没有这样的方法,需要一个新的小东西叫vue-resouce。js地址:https://github.com/pagekit/vue-resource/blob/master/README.md
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/vue.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/vue-resource.js "祝辞& lt;/script>
& lt;风格类型=" text/css "比;
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt;按钮@click=" get()”在按钮& lt;/button>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
var vm=new Vue ({
埃尔:“#应用”,
数据:{
},
方法:{
得到:函数(){
美元。http.get (a.txt)(函数(res) {
警报(res.data);
},函数(res) {
警报(res.data);
}）;
}
}
}）;
& lt;/script>
& lt;/body>
之前
http美元就类似于ajax他可以美元http。得到这个。美元http.post还有一种就是jsonp完成跨域取数据
& lt; div id=坝τ谩北?
& lt;按钮@click=" get()”在按钮& lt;/button>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
var vm=new Vue ({
埃尔:“#应用”,
数据:{
},
方法:{
得到:函数(){
http.jsonp美元。(' https://sug.so.360.cn/suggest '{词:" b "}),然后(函数(res) {
警报(res.data.s);
},函数(res) {
警报(res.status);
}）;
}
}
}）;
& lt;/script>
& lt;/body>
之前
跨域取数据百度下拉例子:
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/vue.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/vue-resource.js "祝辞& lt;/script>
& lt;风格类型=" text/css "比;
*{保证金:0;填充:0;}
.bg{宽度:200 px;行高:30 px;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt;输入类型=拔谋尽眝模型=皌”@keyup=?事件)美元”@keydown.down=" changeDown ()@keyup.up.prevent="变速球()/比;
& lt; ul>
& lt;李v=癮rr val”class=癰g”比;
{{val}}
& lt;/li>
& lt;/ul>
& lt; p v-show=" arr.length==0”的在暂无数据& lt;/p>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
var vm=new Vue ({
埃尔:“#应用”,
数据:{
加勒比海盗:[],
老师:”,
我现在:1
},
方法:{
得到:函数(ev) {
如果38 (ev.keyCode==| | ev.keyCode==40) {
返回;
}
如果(ev.keyCode==13) {
window.open (' https://www.baidu.com/s& # 63; wd=' + this.t);
this.t="
}
http.jsonp美元。(“https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su”, {wd: this.t}, {jsonp:“cb”}),然后(函数(res) {
this.arr=res.data.s
},函数(res) {
alert('失败”);
}）;
},
changeDown:函数(){
this.iNow + +;
如果(this.iNow==this.arr.length)我现在=1;
this.t=this.arr [this.iNow];
},
变速球:函数(){
this.iNow——;
如果(this.iNow==2) this.iNow=this.arr.length-1
this.t=this.arr [this.iNow];
}
}
}）;
& lt;/script>
& lt;/body>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
