Vue-- Axios 交互

文章目录

1.Vue.js 生命周期

生命周期钩子函数：

  • beforeCreate：data 和 el 未初始化

  • created：data 已初始化，el 未挂载

  • beforeMount：data 和 el 已初始化，未挂载到 DOM

  • mounted：挂载完成，常用发起请求、接收参数

  • beforeUpdate：数据更新前

  • updated：数据更新后

  • beforeDestroy：实例销毁前，仍可用

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

    <!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 拦截器

全局拦截器：

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

示例：

// 请求拦截
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 过滤器

作用：

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

定义与使用：

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

使用示例：

<h1>{{ bonus | discount(8) | myCurrency('$') }}</h1>
# vue.js # 交互 # javascript
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

我测试了一个0.9B模型，它竟然能自动区分多人讲话）

avatar AI Agent技术社区
cover

从一张商品图到正式上架：实测店匠 Shoplazza Athena，AI Agent 不只是聊天框

avatar AI Agent技术社区
cover

【AI Agent】《2026年9月 AI Agent全栈开发技术选型专项面试宝典》

avatar AI Agent技术社区