本文按照需求分次级标题
文章目录
一、 实现收集用户鼠标点击位置的hook函数
1.1 目录结构
1.2 useUserPosition.ts
代码还是比较简单的,这样就可以实现代码的复用
import { onBeforeUnmount, onMounted, ref } from "vue";
export default function () {
const x = ref('')
const y = ref('')
// 鼠标点击操作函数回调
const clickHandler = (event) => {
x.value = event.pageX
y.value = event.pageY
}
// 页面加载完毕,再进行点击操作
onMounted(() => {
window.addEventListener('click', clickHandler)
})
// 页面卸载前给他删了
onBeforeUnmount(() => {
window.removeEventListener('click', clickHandler)
})
return {
x, y
}
}
1.3 App.vue
<template>
<div>
<h1>x:{{ x }}</h1>
<h1>y:{{ y }}</h1>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
// 导入自定义的hook函数
import useUserPosition from "./hooks/useUserPosition";
export default defineComponent({
name: "App",
setup(props, context) {
// 调用自定义函数
const { x, y } = useUserPosition();
return {
x,
y,
};
},
});
</script>
<style scoped>
</style>
二、实现axios的封装
2.1 项目目录
2.2 数据
需要可以复制,也可以自己搞
[{ "id": "01", "name": "天天搜题", "introduction": "大学生在线搜题网站:'http://tiantiansouti.com/'" }, { "id": "02", "name": "小天", "introduction": "网站的编写者" }]
2.3 useAxios.tx
难度也不高,先导入然后直接写axios发送请求,接收数据,最后return。如果有什么问题可以评论。
// 导入
import { ref } from 'vue'
import axios from 'axios'
export default function (url: string) {
const loading = ref(true)
const data = ref(null)
const errorMsg = ref('')
// 发送get请求对url地址
axios.get(url).then(response => {
// 成功后更新加载状态
loading.value = false
// 获取返回值
data.value = response.data
}).catch(error => {
loading.value = false
// 获取报错信息,如果没有则返回未知错误
errorMsg.value = error.message || '未知错误'
})
return { loading, data, errorMsg }
}
2.4 App.vue
<template>
<div>
<!-- v-if如果判断为真则展示,假则销毁 -->
<h1 v-if="loading">正在加载</h1>
<h1 v-else-if="errorMsg">请求出错:{{ errorMsg }}</h1>
<h1 v-else>
<h1>请求返返回数据:</h1>
<!-- v-for 可以更具数据循环产生内部结构 -->
<ul v-for="item in data" :key="item.id">
<li>id:{{ item.id }}</li>
<li>name:{{ item.name }}</li>
<li>introduction:{{ item.introduction }}</li>
</ul>
</h1>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
// 导入自定义函数
import userAxios from "./hooks/useAxios";
export default defineComponent({
name: "App",
setup(props, context) {
// 调用
const { loading, data, errorMsg } = userAxios(
"http://localhost:3000/user.json"
);
return {
loading,
data,
errorMsg,
};
},
});
</script>
<style scoped>
</style>
2.5 遇到的一个小问题
气死了气死了气死了,写案例的时候数据格式不对。本来是列表里面两个字典如下
[
{},
{}
]
结果我写成了字典里面两个字典,如下所示。
{
{},
{}
}
代码明明没问题,就是出不来结果,大家引以为鉴。