Vue-- Axios 交互(二)

Vue-- Axios 交互

文章目录

[Vue-- Axios 交互](#Vue-- Axios 交互)
- [1.Vue.js 生命周期](#1.Vue.js 生命周期)
- - 生命周期钩子函数：
- [2.Axios 拦截器](#2.Axios 拦截器)
- - 全局拦截器：
  - 示例：
- [3.Vue.js 过滤器](#3.Vue.js 过滤器)
- - 作用：
  - 定义与使用：

1.Vue.js 生命周期

生命周期钩子函数：

beforeCreate：data 和 el 未初始化
created：data 已初始化，el 未挂载
beforeMount：data 和 el 已初始化，未挂载到 DOM
mounted：挂载完成，常用发起请求、接收参数
beforeUpdate：数据更新前
updated：数据更新后
beforeDestroy：实例销毁前，仍可用

destroyed：实例销毁，解绑所有事件和子实例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue生命周期</title>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <input type="text" v-model="msg">
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                msg:'hello'
            },
            beforeCreate:function(){
                console.group('------beforeCreate创建前------');
                console.log("el:"+this.$el);//undefined
                console.log("data:"+this.$data);//undefined
                console.log("msg:"+this.msg);//undefined
            },
            create:function(){
                console.group('------create创建完------');
                console.log("el:"+this.$el);//object HTMLDivElement]
                console.log("data:"+this.$data);//[object Object]
                console.log("msg:"+this.msg);//hello
            },
            beforeMount:function(){
                console.group('------ beforeMount挂载前------');
                console.log("el:"+this.$el);
                console.log("data:"+this.$data);
                console.log("msg:"+this.msg);
            },
            mounted:function(){
                console.group('------ bmounted挂载后------');
                console.log("el:"+this.$el);
                console.log("data:"+this.$data);
                console.log("msg:"+this.msg);
            },
              beforeUpdate:function(){
                console.group('------ beforeUpdate更新前------');
                console.log("el:"+this.$el);
                console.log("data:"+this.$data);
                console.log("msg:"+this.msg);
            },
                updated:function(){
                console.group('------ bmounted挂载后------');
                console.log("el:"+this.$el);
                console.log("data:"+this.$data);
                console.log("msg:"+this.msg);
            },
        
              beforeDestory:function(){
                console.group('------ beforeDestory销毁前------');
                console.log("el:"+this.$el);
                console.log("data:"+this.$data);
                console.log("msg:"+this.msg);
            },
              destoryed:function(){
                console.group('------ destoryed销毁后------');
                console.log("el:"+this.$el);
                console.log("data:"+this.$data);
                console.log("msg:"+this.msg);
            }
        });
    </script>
</body>
</html>

2.Axios 拦截器

全局拦截器：

在请求发送前或响应返回前拦截处理

示例：

javascript 复制代码

// 请求拦截
axios.interceptors.request.use(config => {
  console.log("发送前...");
  return config;
}, err => {
  return Promise.reject(err);
});

// 响应拦截
axios.interceptors.response.use(config => {
  console.log("响应后...");
  return config;
}, err => {
  return Promise.reject(err);
});

3.Vue.js 过滤器

作用：

对插值表达式 {``{ }} 中的数据进行格式化
本质是一个有返回值的方法

定义与使用：

javascript 复制代码

filters: {
  discount(res, dis) {
    return res * dis / 10;
  },
  myCurrency(res, fmt) {
    return fmt + res;
  }
}

使用示例：

html 复制代码

<h1>{{ bonus | discount(8) | myCurrency('$') }}</h1>