源代码:
其中在vue项目中用npm安装jquery,vue-resource插件的的命令行:
npm install jquery
npm install vue-resource
import VueResource from 'vue-resource'
import Vue from 'vue'
import $ from 'jquery'
import A from './a.js'
Vue.use(VueResource);
export default {
name: 'hello',
props: ['src'],
data: function () {
return {
srcD: ''
}
},
mounted: function () {
this.srcD = this.src
},
watch: {
srcD: function (newV, oldV) {
console.info('src:' + this.srcD)
var options = {
method: 'GET',
url: 'http://www.baidu.com'
}
//jquery
$.ajax({
url: 'http://127.0.0.1:8080',
type: 'get',
dataType: 'html',
success: function (data){
console.log('jquery ajax 的請求')
console.log(data)
},
error: function(data) {
console.info(data)
}
})
//这个是对的
var resource = this.$resource("http://127.0.0.1:8080")
resource.get().then(function (response) {
console.log('this.$resource 的請求')
console.log(response.body)
}).catch(function (response) {
console.log(response)
})
//这个也是对的
this.$http.get("http://127.0.0.1:8080").then(function (res) {
// 处理成功的结果
console.log('this.$http 的請求')
console.info(res.body)
$(".contentCenter").html(res.body)
}, function (res) {
console.info(res)
}
);
}
}
}
src:http://www.baidu.com
jquery ajax 的請求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>server</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/app.js"></script></body>
</html>
this.$resource 的請求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>server</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/app.js"></script></body>
</html>
this.$http 的請求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>server</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/app.js"></script></body>
</html>
这个界面是Hello.vue中的Script内容