Vue的笔记

关于Vue的学习记录

Router的组件使用

• 由Vue@cli3生成的项目，所有组件的根是public的index.html
• 所有组件挂载在App.vue这个组件上（当然可以在main.js中设置），且需要<router-view/>进行标记。
  
  
• 同级组件之间跳转，需要使router.js(/router/index.js)中各个组件为同级，然后使用<router-link></rounter-link>进行跳转，不会显示原来的组件的内容。如，A与B组件关系为同级跳转不同。
  
• 父组件中显示子组件，需要在router.js中父组件中字段children设置子组件，并在父组件中使用<router-view>进行挂载。
  

三种方式导入样式

图片放在public目录中和asset中的区别

• public中的是不会改变的图片资源
• asset是一些可能会改变的图片资源

不同兄弟组件之间传递值

1. 事件总线方式，相当于全局变量

Axios如何使用

1. 首先需要Vue add axios将插件配置到vue项目中
2. 设置axios的别名

Vue.prototype.$http = axios // 对于$符后的是其别名可以自己设置，一般设置为http或axios

3. axios的各种请求方法：（除去HEAD、OPTIONS）
   • GET：获取数据；
   • POST：提交数据（表单提交和文件上传）；
   • PUT：更新数据（所有数据传送到后端）；
   • PATCH：更新数据（只将更新的数据推送到后端）；
   • DELETE：删除数据；

	// 推荐都写成别名法
	// GET、Delete
    // 两种不同写法
    // 写法A
    axios.get("/data.json",{
        params: {
            id: 12,
        }
    }).then(function(res){
      console.log(res);
    });
    // 写法B，别名写法
    axios({
        method: 'get',
        url: '/data.json',
        params: {
            id: 14
        },
    }).then(function(res){
        console.log(res);
    });

    // POST,PUT,PATCH是相同的用法，只是意义不同。
    let data = {
        id: 12,
        name: 'xiaoming',
        age: 22,
    }
    // 写法A，除以下函数参数外还有config
    // 以json格式传输的，Content-Type: application/json;charset=UTF-8
    axios.post("/post", data).then(function(res) {
        console.log(res);
    });

    // 写法B，别名写法，函数参数为对象
    // 以json格式传输的，Content-Type: application/json;charset=UTF-8
    axios({
        method: "post",
        url: '/post',
        data: data,
    }).then(function(res) {
        console.log(res);
    });

    // 处理form-data数据，先将数据以k-v方式存入到FormData对象中
    // 以表单形式传输的，Content-Type: multipart/form-data;
    let formData = new FormData();
    for(var key in data) {
        formData.append(key, data[key]);
    }
    axios.post('/post',formData).then(function(res) {
        console.log(res);
    });

    // DELETE 可以同GET，可以同POST那样，即http的url中带参数或body中带参数都可
    axios.delete("/del", {
        params: {
            id: 12
        }
    }).then(function(res) {
        console.log(res);
    });
    axios.delete("/del", {
        data: {
            id: 12
        }
    }).then(function(res) {
        console.log(res);
    });

4. Axios的并发请求，一个函数中同时请求在统一处理结果用到了axios.all()和axios.spread()
   all传递一个数组，数组中是并发的多个axiso对象，如GET、PUT、POST等，然后spread统一处理返回结果

axios.all([
        axios.get("data.json", { params: { xx: xx } }),
        axios.delete("city.json", { data: { xx: xx } })
      ]).then(
        axios.spread((dataRes, cityRes) => {
          console.log(dataRes, cityRes);
        })
      );

Token的原理