#博学谷IT学习技术支持#
目录
1. vue生命周期
1.0_Vue-生命周期
1.1_钩子函数
2. axios
2.0_axios基本使用
2.1_axios基本使用-获取数据
2.2_axios基本使用-传参
2.3_axios基本使用-发布书籍
2.4_axios基本使用-全局配置
3. nextTick和refs知识
3.0 $refs-获取DOM
3.1 $refs-获取组件对象
3.2 $nextTick使用
1. vue生命周期
1.0_Vue-生命周期
1.1_钩子函数
目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行
作用: 特定的时间点，执行特定的操作
场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据
分类: 4大阶段8个方法
初始化
挂载
更新
销毁
2. axios
2.0_axios基本使用
2.1_axios基本使用-获取数据
目标: 调用文档最后_获取所有图书信息接口
功能: 点击调用后台接口, 拿到所有数据 – 打印到控制台
接口: 参考预习资料.md – 接口文档
引入: 下载axios, 引入后才能使用
效果:
2.2_axios基本使用-传参
目标: 调用接口-获取某本书籍信息
功能: 点击调用后台接口, 查询用户想要的书籍信息 – 打印到控制台
2.3_axios基本使用-发布书籍
目标: 完成发布书籍功能
功能: 点击新增按钮, 把用户输入的书籍信息, 传递给后台 – 把结果打印在控制台
2.4_axios基本使用-全局配置
目标: 避免前缀基地址, 暴露在逻辑页面里, 统一设置
3. nextTick和refs知识
3.0 $refs-获取DOM
目标: 利用 ref 和 $refs 可以用于获取 dom 元素
3.1 $refs-获取组件对象
目标: 获取组件对象, 调用组件里方法
3.2 $nextTick使用
Vue更新DOM-异步的
目标: 点击count++, 马上通过"原生DOM"拿标签内容, 无法拿到新值
components/Move.vue - 继续新增第三套代码
<template>
<div>
<p>1. 获取原生DOM元素</p>
<h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>
<p>2. 获取组件对象 - 可调用组件内一切</p>
<Demo ref="de"></Demo>
<p>3. vue更新DOM是异步的</p>
<p ref="myP">{{ count }}</p>
<button @click="btn">点击count+1, 马上提取p标签内容</button>
</div>
</template>
<script>
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
import Demo from './Child/Demo'
export default {
mounted(){
console.log(document.getElementById("h")); // h1
console.log(this.$refs.myH); // h1
let demoObj = this.$refs.de;
demoObj.fn()
},
components: {
Demo
},
data(){
return {
count: 0
}
},
methods: {
btn(){
this.count++; // vue监测数据更新, 开启一个DOM更新队列(异步任务)
console.log(this.$refs.myP.innerHTML); // 0
// 原因: Vue更新DOM异步
// 解决: this.$nextTick()
// 过程: DOM更新完会挨个触发$nextTick里的函数体
this.$nextTick(() => {
console.log(this.$refs.myP.innerHTML); // 1
})
}
}
}
</script>
