一文带你吃透Vue生命周期（结合案例通俗易懂）(1)

例子如下:

components/UseAxios.vue

1. 获取所有图书信息

<button @click=“getAllFn”>点击-查看控制台

2.2_axios基本使用-传参

目标: 调用接口-获取某本书籍信息

功能: 点击调用后台接口, 查询用户想要的书籍信息 – 打印到控制台

接口: 参考预习资料.md – 接口文档

效果:

例子如下:

components/UseAxios.vue

2. 查询某本书籍信息

<button @click=“findFn”>查询

2.3_axios基本使用-发布书籍

目标: 完成发布书籍功能

功能: 点击新增按钮, 把用户输入的书籍信息, 传递给后台 – 把结果打印在控制台

接口: 参考预习资料.md – 接口文档

效果:

例子如下:

components/UseAxios.vue

3. 新增图书信息

<button @click=“sendFn”>发布

2.4_axios基本使用-全局配置

目标: 避免前缀基地址, 暴露在逻辑页面里, 统一设置

axios.defaults.baseURL = “http://123.57.109.30:3006”

// 所有请求的url前置可以去掉, 请求时, axios会自动拼接baseURL的地址在前面

getAllFn() {

axios({

url: “/api/getbooks”,

method: “GET”, // 默认就是GET方式请求, 可以省略不写

}).then((res) => {

console.log(res);

});

// axios()-原地得到Promise对象

},

3. n e x t T i c k 和 nextTick和 nextTick和refs知识

---

3.0 $refs-获取DOM

目标: 利用 ref 和 $refs 可以用于获取 dom 元素

components/More.vue

1. 获取原生DOM元素

我是一个孤独可怜又能吃的h1

总结: 通过id / ref, 都可以获取原生DOM标签

3.1 $refs-获取组件对象

目标: 获取组件对象, 调用组件里方法

components/Child/Demo.vue

我是Demo组件

More.vue - 获取组件对象 - 调用组件方法

1. 获取原生DOM元素

我是一个孤独可怜又能吃的h1

2. 获取组件对象 - 可调用组件内一切

总结: ref定义值, 通过$refs.值 来获取组件对象, 就能继续调用组件内的变量

3.2 $nextTick使用

Vue更新DOM-异步的

目标: 点击count++, 马上通过"原生DOM"拿标签内容, 无法拿到新值

components/Move.vue - 继续新增第三套代码

1. 获取原生DOM元素

我是一个孤独可怜又能吃的h1

2. 获取组件对象 - 可调用组件内一切

3. vue更新DOM是异步的

{{ count }}

<button @click=“btn”>点击count+1, 马上提取p标签内容

总结: 因为DOM更新是异步的

3.3 $nextTick使用场景

目标: 点击搜索按钮, 弹出聚焦的输入框, 按钮消失

![ n e x t T i c k 使 用 ] ( i m a g e s / nextTick使用](images/ nextTick使用](images/nextTick使用.gif)

components/Tick.vue

<button v-else @click=“btn”>点击我进行搜索

3.4 组件name属性使用

目标: 可以用组件的name属性值, 来注册组件名字

问题: 组件名不是可以随便写的?

答案: 我们封装的组件-可以自己定义name属性组件名-让使用者有个统一的前缀风格

components/Com.vue

我是一个Com组件

App.vue - 注册和使用

1. 生命周期

<button @click=“show = false”>销毁组件

---

2. axios使用

---

3. $refs的使用

---

4. $nextTick使用场景

---

5. 组件对象里name属性

4. 案例 - 购物车

---

4.0 案例-购物车-项目初始化

目标: 初始化新项目, 清空不要的东西, 下载bootstrap库, 下载less模块

vue create shopcar

yarn add bootstrap

yarn add less less-loader@5.0.0 -D

图示:

1. 按照需求, 把项目页面拆分成几个组件, 在components下创建

• MyHeader组件

• MyFooter组件

• MyGoods组件 - 商品

• MyCount组件

2. 然后引入到App.vue上注册

3. 在main.js中引入bootStrap库

import “bootstrap/dist/css/bootstrap.css” // 引入第三方包里的某个css文件

MyHeader.vue

购物车案例

MyGoods.vue

<input type=“checkbox” class=“custom-control-input” id=“input”

商品名字

¥ 100

数量组件

目标: 完成商品组件右下角商品组件的开发

components/MyCount.vue

-

+

components/MyFooter.vue

全选

合计:

¥ 0

结算 ( 0 )

4.1 案例-购物车-头部自定义

目的: 头部的标题, 颜色, 背景色可以随便修改, props类型的校验

思路

1. 在MyHeader.vue中准备props里变量, 然后使用

2. 在使用MyHeader.vue组件时, 传入相应的值 (color和backgroundColor)

MyHeader.vue

{{ title }}

App.vue传入相应自定义的值

总结:

props: [] - 只能声明变量和接收, 不能类型校验

props: {} - 声明变量和校验类型规则 - 外部传入值不对则报错

4.2 案例-购物车-请求数据

目标: 使用axios把数据请求回来

数据地址: https://www.escook.cn/api/cart (get方式)

1. 下载axios

yarn add axios

2. main.js - 原型上挂载

// 目标: 请求数据 - 打印

// 1. 下载axios库, main.js - 全局绑定属性 (确保任意.vue文件可以都访问到这个axios方法)

import axios from ‘axios’

// 2. 基础地址

axios.defaults.baseURL = “https://www.escook.cn”

// 3. axios方法添加到Vue的原型上

Vue.prototype.$axios = axios

new Vue({

render: h => h(App),

}).$mount(‘#app’)

3. App.vue请求使用

总结: 利用axios, 调用接口, 把数据请求回来

4.3 案例-购物车-数据渲染

目标: 把上面请求的数据, 铺设到页面上

App.vue

<MyGoods v-for=“obj in list”

:key=“obj.id”

:gObj=“obj”

MyGoods.vue

<input type=“checkbox” class=“custom-control-input” :id=“gObj.id”

v-model=“gObj.goods_state”

{{ gObj.goods_name }}

¥ {{ gObj.goods_price }}

MyCount.vue

-

+

总结: 把各个组件关联起来, 把数据都铺设到页面上

4.4 案例-购物车-商品选中

问题: 点击发现总是第一个被选中

原来id和for都是"input"

但是id是唯一的啊, 所以用数据的id来作为标签的id, 分别独立, 为了兼容label点击图片也能选中的效果

<input type=“checkbox” class=“custom-control-input” :id=“gObj.id”

v-model=“gObj.goods_state”

总结: lable的for值对应input的id, 点击label就能让对应input处于激活

4.5 案例-购物车-数量控制

目标: 点击+和-或者直接修改输入框的值影响商品购买的数量

<button type=“button” class=“btn btn-light” :disabled=“obj.goods_count === 1” @click=“obj.goods_count > 1 && obj.goods_count–”>-

<button type=“button” class=“btn btn-light” @click=“obj.goods_count++”>+

4.6 案例-购物车-全选功能

目标: 在底部组件上, 完成全选功能

思路:

1. 点击获取它的选中状态

2. 同步给上面每个小选框 - 而小选框的选中状态又在数组里

3. 把数组传给MyFooter, 然后更新即可 - 因为对象都是引用关系的

MyFooter.vue

全选

合计:

¥ {{ allPrice }}

结算 ( {{ allCount }} )

4.6 案例-购物车-全选功能

目标: 在底部组件上, 完成全选功能

思路:

1. 点击获取它的选中状态

2. 同步给上面每个小选框 - 而小选框的选中状态又在数组里

3. 把数组传给MyFooter, 然后更新即可 - 因为对象都是引用关系的

MyFooter.vue

全选

合计:

¥ {{ allPrice }}

结算 ( {{ allCount }} )