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) })