Vue交互

作者: 星空有月 | 来源:发表于2016-11-29 00:10 被阅读148次

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)});

}

}

});

};

```

相关文章

  • vue 粘贴板

    vue3 路由跳转 交互

  • vue起步(2)之数据交互

    vue中的交互(ajax,jsonp) vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,但是...

  • vue路由

    vue路由--- SPA应用,单页面应用vue-resouce 交互vue-router 路由根据不同url地址...

  • vue与原生app交互 混合开发

    vue与原生app交互 混合开发 vue 通过路由vue-router。 (例如:this.$router.pus...

  • vue-cli3 知识点

    介绍 vue-cli 通过 @vue/cli 搭建交互式的项目脚手架 通过 @vue/cli + @vue/cli...

  • Vue交互

    vue本身不支持交互,所以在交互时需要引入模块vue-resource.js 1.直接获取文件内的内容: ``` ...

  • vue与express搭建易书

    express搭建后端,vue做页面交互

  • axious

    axios: vue ajax 前端页面和后台数据进行交互 json vue 库

  • 框架部分整理

    vue交互格式 2、json 后端交互注解 1、写在Controller类上的@RestController(@C...

  • Vue的交互

    vue本身不支持交互,所以在交互时需要引入模块vue-resource.js 1.直接获取文件内的内容: 2.ge...

网友评论

本文标题:Vue交互

本文链接:https://www.haomeiwen.com/subject/mrbopttx.html