标题
安装vue-resource:npm i --S vue-resource
引包:在引入vue之后引包
<script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
html部分:
<input type="button" value="get请求" @click='getInfo'>
<input type="button" value="post请求" @click='postInfo'>
<input type="button" value="jsonp请求" @click='jsonpInfo'>
处理get请求 传一个地址
getInfo(){
this.$http.get('http://vue.studyit.io/api/getlunbo').then((result)=>{
console.log(result.body)
})
}
处理post请求 第一个参数地址,第二个参数请求传过去的数据(可以不写),第三个参数是否为普通表单数据
postInfo(){
this.$http.post('http://vue.studyit.io/api/post',{}, {emulateJSON:true}).then(result=>{
console.log(result.body)
})
}
处理jsonp请求:传一个地址
jsonpInfo(){
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result=>{
console.log(result.body)
})
}
// es6写法 static静态属性 webpack只能处理部分es6语法,更高级语法借助loader转化为低级语法,返回webpack转化
// 两种方法实现:
1.cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
2.cnpm i babel-preset-env babel-preset-env babel-preset-stage-0 -D