vue的交互

交互
    Vue做交互需要引入一个库：vue-resouce.js
    get: 
    post
    jsonp
 
 1 <script src="vue.js"></script>
 2 <script src="vue-resource.js"></script>
 3 
 4 <script>
 5 var vm = new vue({
 6     data:{
 7 
 8     }
 9     methods:{
10         get:function(){
11              // get获取一个普通文本数据
12              // get发送数据
13             this.$http.get('a.txt'，{
14                     a:1,
15                     b:2
16             }).then(function(res){  //导入了vue-resource.js才会有$http这个方法
17                 alert(res.data);
18             },function(res){
19                 alert(res.data);
20             })
21         }
22     }
23 });
24 </script>
 1 # post
 2     methods:{
 3         post:function(){
 4              // 
 5              // post发送数据
 6             this.$http.post('a.txt'，{
 7                     a:1,
 8                     b:2
 9             }, {
10                 emulateJSON:true  // post请求加的头部
11             }).then(function(res){  //导入了vue-resource.js才会有$http这个方法
12                 alert(res.data);
13             },function(res){
14                 alert(res.data);
15             })
16         }
17     }

 

 1 methods: {
 2     get: function (ev) {
 3         if(ev.keyCode==38 || ev.keyCode==40){ //当按照上下键的时候停止搜索
 4             return
 5         }
 6         if(ev.keyCode==13){
 7             window.open('https://www.baidu.com/s?wd='+this.t1) //打开百度搜索
 8         }
 9         this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
10             params: {
11                 wd: this.t1  // 输入的关键词
12             },
13             jsonp: 'cb'  //callback函数的名称
14         }).then(function (res) {
15           this.myData=res.data.s;
16           console.log(this.myData)
17         }, function (err) {
18             console.log(err.status);
19         });
20     },

 

posted @ 2018-01-26 21:24  eric_yi  阅读(177)  评论(0)  编辑  收藏  举报