1、Vue使用axios
第一步:npm install axios
第二步:配置文件
//引入vue框架
import Vue from 'vue'
//引入资源请求插件
import axios from 'axios'
import { stringify } from 'querystring';
//axios 配置
axios.defaults.timeout = 5000; //请求超时
axios.defaults.baseURL = "/api";
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
//axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
// 上面 /api 用户来配置跨域请求的 如果项目没跨域 直接写上请求地址就行
//axios.defaults.baseURL = "请求地址";
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
if (config.method === 'post') {
//config.data = stringify(config.data);
var data = {
data:config.data
}
config.data = data;
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
/** 给Vue函数添加一个原型属性$axios 指向Axios这样做的好处是在vue实例或组件中不用再去重复引用Axios 直接用this.$axios就能执行axios 方法了 */
Vue.prototype.$axios = axios;
//封装GET
export function Get(url,success,error){
axios.get(url)
.then(function(res){
success(res.data);
})
.catch(function(err){
error(res.data);
});
}
//封装POST
export function Post(url,data,success,error){
axios.post(url,data)
.then(function(res){
success(res.data);
})
.catch(function(err){
error(err.data);
});
}
export default({
})
第三步:main.js使用
2、前端vue配置跨域
3、vue模拟form-data提交数据
使用qs组件库
npm install qs --save
4、解决component: () => import()不能传入变量
webpack的现在的实现方式不能实现完全动态,可以通过字符串模板来提供部分信息给webpack;
5、solt插槽使用记录
6、vue子组件调用父组件的三种方式
(1)his.$parent.方法(参数)来调用父组件的方法
(2)用$emit
向父组件触发一个事件
(3)父组件把方法传入子组件中,在子组件里直接调用这个方法
https://www.cnblogs.com/jin-zhe/p/9523782.html
7、父组件直接调用子组件的方法
子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法
子组件中定义此方法
8、 refs 给dom添加样式
9、:style 绑定背景图
10、vue使用echarts
参考文档:
https://www.cnblogs.com/Smiled/p/7686316.html
https://github.com/apache/incubator-echarts/blob/master/index.js
11、vue使用window.onresize事件
https://www.cnblogs.com/aidixie/p/10754683.html