第四天 axios调用接口、组件、生命周期

一、调用接口

1.axios是使用promise来进行封装的

2.axios.get("url" , {data}) 或者 axios("url" , {data})

3,vue的项目是使用axios来进行请求的，但是axios不一定要在vue中使用

4.调用接口的另一种写法

 axios({
  url : " ",
  methods : "get/post" ,
  parmas : {
        //请求传递的参数
        }，
   headers : { cookie  tooken    Content-Type },
  }).then( r => log(r)).catch( r => log(r))

5.请求方式：

   get   post    option(预请求)

6.数据传递方式

   form Data    form表单请求方式
   Query String   地址栏拼接
   request   post传参  默认传递request

7.实例：

 document.getElementsByClassName("btn")[0].onclick = function () {
    // 调接口
    axios.get("http://146.56.207.108:3000/Handler/UserHandler?action=add").then(r =>{
        console.log(r);
    }).catch( r => {
        console.log(r);
    })
}
new Vue({
  el: '#app',
  data() {
   return{
    userName:"马大儿",
    password:"123456"

 }
  },
  methods: {
    setData(){
        axios({
            url:"http://146.56.207.108:3000/Handler/UserHandler?action=login",
            methods:"post",
            parmas:{
                userName:this.userName,
                password:this.password
            },
            hraders:{}
        }).then( r => {
            console.log(r);
        }).catch( r => {
            console.log(r);
        })
    }
  },
});

二、组件

VUE的组件分为全局组件和私有组件

1.可以使用vue,compontent()创建全局组件 自定义指令/filter/mixin

    template:创建组件的内容，必须要有一个根标签

2.使用 components :{ } 创建私有组件

3.组件名如果是驼峰式，例如 aB => a-b

4.组件名以标签的形式放入HTML中

5.动态组件实例：

  Vue.component("mytip1", {
        template: `马跃磊生了`
    })
    Vue.component("mytip2", {
        template: `在国外生的`
    })
    Vue.component("mytip3", {
        template: `好像是泰国吧`
    })
    new Vue({
        el: '#app',
        data() {
            return {
                tipName: "mytip1"
            }
        },
    });

三、组件通信之父子

1.父组件传值给子组件 通过属性绑定 v-bind 子组件通过属性props:[""]来接 子组件可以直接用该变量

2.父组件方法传给子组件 通过绑定机制 用v-on绑定 子组件用$emit 接收

3.子组件值传给父组件 通过绑定机制 用v-on绑定 this.$emit方法传方法

4.子组件方法传给父组件 refs获取dom元素 子组件绑定ref this.$refs获取方法以及值

5.一共分为两种方式、

     1·从子集进行修改

HTML部分

JS部分

                    Vue.component("mytip", {
    template:`
                   {{name}}
                   

                   点击可以传给父子
             `,
    data(){
        return{

        }
    },
    props:["name"],
    methods:{
        cli(){
            this.$emit("send" , "马士洋")
        }
    }
})

2·从父级修改

html部分

   
                  点击

JS部分

                    Vue.component("mytip1", {
  template:`
     {{user}}
    `,
  data(){
    return{
       name3:"曹bb"
    }
  },
  props:["user"]
})

new Vue({
  el: '#app',
  data() {
   return{
    name1:"马跃磊",
    name2:"曹帅"
  }
  },
  methods:{
    send(e){
        console.log(e);
        this.name1=e
    },
    cws(){
      this.name2 = this.$refs.mytip1.name3
    }
  }
});

四、组件通信之兄弟

  组件通信之兄弟即为兄弟传值

1. 先传给父级 再传子级

2.数据共享中心 中间件传值 bus

3.步骤

       let bus = new Vue()
发送方:   bus.$emit("变量名",参数)
接收方：  bus.$on("变量名",fun(){})

4.实例

1·先从子集传给父级，再从父级传给子集

html部分

JS部分

  Vue.component("acom",{
    template:`
        acom:{{num5}}
        `,
    data(){
        return{
            // num1:"1000w"
        }
    },
    props:["num5"]
})

Vue.component("bcom", {
    template:`
        bcom:{{num}}
        点击传递
        `,
    data(){
        return{
            num:"2000w",

        }
    },
    methods: {
        cli(i){
           this.$emit("change" , this.num)
        }
    },
})

new Vue({
  el: '#app',
  data() {
   return{
     num3:""
  }
  },
  methods:{
    change(e){
        console.log(e);
        this.num3 = e
    }
  }
});

2·数据共享中心 中间件传值

通过数据共享中心，中间件传值 兄弟间直接进行数据的交换，不需要经过父级
兄弟元素将数据传输到数据共享中心，其他兄弟元素可以通过共享中心获取到相应的数据

html部分

JS部分

                       let bus = new Vue()
Vue.component("ccom", {
    template:`
       ccomp:{{num7}}
        `,
    data(){
         return{
            num7:""
         }
    },
   created() {
       bus.$on("chang" , e => {
        this.num7 = e
       })
   },
})
Vue.component("dcom", {
    template:`
        dcom:{{num6}}
        点击传给兄弟
        `,
    data(){
         return{
            num6:"3000w"
         }
    },
    methods:{
        cli(){
            bus.$emit("chang" , this.num6)
        }
    }
})
new Vue({
  el: '#app1',
  data() {
   return{
     num3:""
  }
  },
  methods:{
    change(e){
        console.log(e);
        this.num3 = e
    }
  }
});

五、生命周期

1.页面的生命周期 html(dom) css 静态资源docoment.ready window.onload

2. js生命周期 var funcition 从上至下执行同步 异步 事件 关闭页面

3.vue 生命周期(11个) 挂载顺序 钩子函数

    进入组件 渲染钩子   beforeCreate created  beforeMount  mounted 
    数据跟新   beforeUpdate  updated
    离开组件 销毁钩子   beforeDestory   destoryed

1· beforeCreate()

        刚刚创建vm 没有创建 view 和 model   dom没有加载 data也没有加载

2·created()

         vm初始化结束  data数据加载完毕  dom没有加载 methods中的函数  放在这里可以直接执行

3·beforeMount()

         加载完dom元素  但是数据没有渲染

4· mounted()

         加载dom完成  数据挂载结束 虚拟dom加载完成

5·beforeUpdate()

        修改数据时触发 数据已经修改  但是页面没有重新渲染 

6·updated()

         数据修改完 页面也重新渲染完

7· beforeDestroy()

         销毁之前

8·destroyed()

         销毁完成之后   销毁所有指令  销毁view视图与数据之间的关系