一文带你吃透Vue生命周期（结合案例通俗易懂），web开发工程师面试题

})

}

},

};

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组件 -