vue基础4-生命周期、钩子函数

 

vue有8种生命周期函数：

钩子函数	触发的行为	在此阶段可以做的事情
beforeCreadted	vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。	加loading事件
created	vue实例的数据对象data有了，$el还没有	结束loading、请求数据为mounted渲染做准备
beforeMount	vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。	...
mounted	vue实例挂载完成，data.filter成功渲染	配合路由钩子使用
beforeUpdate	data更新时触发
updated	data更新时触发	数据更新时，做一些处理（此处也可以用watch进行观测）
beforeDestroy	组件销毁时触发
destroyed	组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在	组件销毁时进行提示

这里我们用created、updated

#生命周期
new Vue({
        el:'#app',
        data:{
            username:'1',
            pwd:'1',
            cpwd:'2',
            product:[]
 
        },
        // 数据初始化之后
        created:function () {
            console.log('created')
        },
        // 实例和标签进行关联后
        mounted:function () {
            axios({
                method:'get',
                url:'http://127.0.0.1/product/all',
            }).then(
               data =>{
                    // 箭头函数解决 调用问题
                    this.product = data.data.product_info;
                }
 
                ).catch(function (error) {
                console.log(error)
            })
        }

　　二、axios

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

---

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF

axios Api

可以通过直接对axios进行传参实现请求数据方法。

发送一个get请求

 // 参数携带在url上
   axios({
      url: '/api/user/win_record?userid=1&sign=sdfsadf',
      method: 'get'
    })
      .then((response) => {
        console.log(response.data)
      })
      .catch((error) => {
        console.log(error)
      })
 
    // 通过params 携带参数
    axios({
      url: '/api/user/win_record',
      method: 'get',
      params: {
        userid: 1,
        sign: '123123'
      }
    })
      .then((response) => {
        console.log(response.data)
      })
      .catch((error) => {
        console.log(error)
      })

　　发送一个post请求

// 入参json类型
    axios({
      method: 'post',
      url: '/api/user/add_stu',
      data: {
        name: 'qq',
        grade: '12',
        phone: '10086'
      }
    })
      .then((response) => {
        console.log(response.data)
      })
      .catch((error) => {
        console.log(error)
      })
 
    //入参 key-value application/x-www-form-urlencoded
    data = {
      username: 'abc1',
      pwd: '12323',
      cpwd: '223123'
    }
  axios({
      url: '/apis/api/user/user_reg',
      method: 'post',
      data: this.qs.stringify(data)
    })
      .then((response) => {
        console.log(response.data)
      })
      .catch((error) => {
        console.log(error)
      })