Vue交互

vue本身不支持交互,所以在交互时需要引入模块vue-resource.js

1.直接获取文件内的内容:

```

'use strict';

window.onload=function(){

new Vue({

el:'body',

data:{

a:12

},

methods:{

get:function(){

this.$http.get('a.txt').then(function(res){

console.log(res.data);

},function(err){alert(err)});

}

}

});

};

```

2.get通过get.php'

```

use strict';

window.onload=function(){

new Vue({

el:'body',

data:{

d:12

},

methods:{

get:function(){

this.$http.get('get.php',{'a':1,'b':4}).then(function(res){

console.log(res.data);

},function(err){console.log(err.status)});

}

}

});

};

```

3.post通过post.php'

```

use strict';

window.onload=function(){

new Vue({

el:'body',

data:{

a:1

},

methods:{

post:function(){

this.$http.post('post.php',{a:1,b:2},{emulateJSON:true}).then(function(res){alert(res.data)},function(err){console.log(err.data)});

}

}

});

```

};4.通过jsonp获取数据

```

'use strict';

window.onload=function(){

new Vue({

el:'body',

data:{

d:12

},

methods:{

get:function(){

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?',{wd:4},{jsonp:'cb'}).then(function(res){

alert(res.data.s);

},function(err){console.log(err.status)});

}

}

});

};

```

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容