vue的交互

交互

    Vue做交互需要引入一个库：vue-resouce.js

    get: 

    post

    jsonp

 

 <script src="vue.js"></script>
 <script src="vue-resource.js"></script>

 <script>
 var vm = new vue({
     data:{

     }
     methods:{
         get:function(){
              // get获取一个普通文本数据
              // get发送数据
             this.$http.get('a.txt'，{
                     a:1,
                     b:2
             }).then(function(res){  //导入了vue-resource.js才会有$http这个方法
                 alert(res.data);
             },function(res){
                 alert(res.data);
             })
         }
     }
 });
 </script>

 # post
     methods:{
         post:function(){
              //
              // post发送数据
             this.$http.post('a.txt'，{
                     a:1,
                     b:2
             }, {
                 emulateJSON:true  // post请求加的头部
             }).then(function(res){  //导入了vue-resource.js才会有$http这个方法
                 alert(res.data);
             },function(res){
                 alert(res.data);
             })
         }
     }

 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.t1) //打开百度搜索
         }
         this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
             params: {
                 wd: this.t1  // 输入的关键词
             },
             jsonp: 'cb'  //callback函数的名称
         }).then(function (res) {
           this.myData=res.data.s;
           console.log(this.myData)
         }, function (err) {
             console.log(err.status);
         });
     },