根目录下新建一个vue-ajax.js文件：
const install = function(Vue){
const Ajax = new Vue({
methods:{
ajax(options={}){
options.type = (options.type || 'GET').toUpperCase();
let data = [];
for( let i in options.data ){
data.push(encodeURIComponent(i)+ '=' + encodeURIComponent(options.data[i]));
}
data = data.join('&');
var xhr;
if( window.XMLHttpRequest ) {
// code for IE7+,Firefox,chrome,Opera,Safari
xhr = new XMLHttpRequest();
}else{
// code for IE6,IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function(){
if(xhr.readyState ===4){
const status = xhr.status;
if(status >= 200 && status < 300){
options.success && options.success(JSON.parse(xhr.responseText),xhr.responseXML);
} else {
options.error && options.error(status);
}
}
};
if( options.type === 'GET' ){
xhr.open('GET',options.url + '?' + data,true);
xhr.send(null);
} else if( options.type === 'POST' ){
xhr.open('POST',options.url,true);
xhr.setRequestHeader(
'Content-Type',
'application/x-www-form-urlencoded'
);
xhr.send(data);
}
}
}
});
Vue.prototype.$ajax = Ajax;
}
export default install;
main.js 中引入该文件
// 导入Vue框架
import Vue from 'vue';
// 导入index.vue 组件
import Index from "./index.vue";
// 导入vue-ajax插件
import VueAjax from './vue-ajax';
// 使用ajax 插件
Vue.use(VueAjax);
// 创建 vue 根实例
new Vue({
el: '#app',
render: h => {
return h(Index)
}
});
创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack App</title>
<link rel="stylesheet" href="/dist/main.css">
</head>
<body>
<div id="app">
Hello World
</div>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>
创建 index.vue
<template>
<div>
点击发送请求：
<button @click="sendAjax"></button>
</div>
</template>
<script>
export default{
methods:{
sendAjax(){
var options = {};
options.url = "note.txt";
// var data = options.data = {}; 这里可以data中写入参数
options.type = 'get';
options.success = (message) => {
console.log(message);
};
this.$ajax.ajax(options);
}
}
}
</script>