Vue.js交互
vue,js交互需要使用vue-resource.js库
vue.js交互借助于$http完成
语法:使用promise语法
常用的交互类型
- get类型
- post类型
- jsonp类型
举例应用
get类型
语法:this.$http.get(‘url’, {params:{a:1,b:2…}}).then(function(res){处理请求成功},function(res){处理请求失败});
sub.php代码
<?php
echo $_REQUEST['a']-$_REQUEST['b'];
get.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-resource.js"></script>
</head>
<body>
<div id="box">
<p>{{ arr }}</p>
<button @click='sub()'>SUB</button>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
arr:'苟利国家生死以'
},
methods: {
sub: function(){
this.$http.get('sub.php',{params: {a:3, b:2}}).then(
function (res){
this.arr = res.data;
},
function (res){
this.arr = '请求失败';
});
}
}
});
</script>
post类型
语法:this.$http.get(‘url’,{a:1,b:2…},{emulateJSON:true}).then(function(res){处理请求成功},function(res){处理请求失败});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-resource.js"></script>
</head>
<body>
<div id="box">
<p>{{ arr }}</p>
<button @click='sub()'>SUB</button>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
arr:'苟利国家生死以'
},
methods: {
sub: function(){
this.$http.post('sub.php',{a:3, b:2},{emulateJSON:true}).then(
function (res){
this.arr = res.data;
},
function (res){
this.arr = '请求失败';
});
}
}
});
</script>
jsonp类型
语法:this.$http.jsonp(‘url’,{params:{a:1,b:2…}},{emulateJSON:true}).then(function(res){处理请求成功},function(res){处理请求失败});
交互练习地址:https://blog.csdn.net/qq_39383675/article/category/8256374