育贤网站建设,dw做网站一般设为什么样,遵义网站建公司,小制作大全用vue3实现一个鼠标追踪器和异步加载组件一、#x1f5b1;️鼠标追踪器1、功能实现2、给静态页面绑定功能二、⚙️异步加载组件1、功能实现2、给静态页面绑定功能3、用泛型改造异步组件功能三、#x1f4da;结束语周一最近学完
vue3 新特性#xff0c;就想着用
vue3 来捣鼓… 用vue3实现一个鼠标追踪器和异步加载组件一、️鼠标追踪器1、功能实现2、给静态页面绑定功能二、⚙️异步加载组件1、功能实现2、给静态页面绑定功能3、用泛型改造异步组件功能三、结束语周一最近学完
vue3 新特性就想着用
vue3 来捣鼓点新的小工具。突然想到以前自己遇到的一个问题想要获取当前鼠标点击的位置但是以前是直接用原生
js 写的体验感就没有那么好了于是乎今天就用
vue3 来开始我的小工具之旅啦在今天的文章中将带领大家初始化一个 vue3 项目并且用 vue3 实现一个鼠标追踪器和异步加载组件。 一、️鼠标追踪器
1、功能实现
我们先在 vue3 项目下建立一个 ts 文件这个 ts 文件用来实现鼠标追踪器的功能。具体代码如下
//引入需要使用的Composition API
import { ref, onMounted, onUnmounted } from vue
//实现鼠标追踪器功能
function useMousePosition(){//初始化x轴和y轴的值const x ref(0)const y ref(0)//获取鼠标点击后x轴和y轴的值const updateMouse (e: MouseEvent) {x.value e.pageXy.value e.pageY}//鼠标点击时执行updateMouse函数onMounted(() {document.addEventListener(click, updateMouse)})//鼠标点击结束后对当前点击事件执行销毁操作onUnmounted(() {document.removeEventListener(click, updateMouse)})//返回x和y的值return {x, y}
}//导出函数
export default useMousePosition2、给静态页面绑定功能
我们在 vue3 项目下建立一个 .vue 文件来加载静态组件内容。具体代码如下
templatediv idapph1鼠标追踪器/h1h1X:{{x}},Y:{{y}}/h1/div
/templatescript langts
//引入函数
import useMousePosition from ./useMousePositionexport default{name: App,setup(){//引用函数中返回的值const { x, y } useMousePosition()//返回值return{x,y}}
};
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style
最终我们来看下显示效果 看完效果我们来分析下代码。大家可以看到 vue3 中的代码抽离使得功能实现变得非常方便。我们通过在组件外部再定义一个 ts 文件来实现具体的功能而不再将具体的功能放在组件内部来实现。
这样从某种层面上来讲代码的可扩展性和可维护性都灵活了许多。
二、⚙️异步加载组件
看完鼠标追踪器我们再来实现一个异步加载组件。
在我们日常的开发中经常需要用到异步加载组件而异步加载最常见的需求就是加载loading的状态。
加载 loading 的状态其实就是当我们刚开始加载页面时如果异步请求的内容还没有显示那就先显示一个 loading 效果让用户先等等等到异步请求的内容加载出来了就可以显示具体的效果。
接下来我们就来实现这个功能。
1、功能实现
我们先在 vue3 项目下建立一个 ts 文件这个 ts 文件用来实现加载异步组件的功能。具体代码如下
import { ref } from vue
import axios from axiosfunction useURLLoader(url: string){const result ref(null)const loading ref(true)const loaded ref(false)const error ref(null)axios.get(url).then((rawData) {loading.value falseloaded.value trueresult.value rawData.data}).catch(e {error.value eloading.value false})return{result,loading,loaded,error}
}export default useURLLoader实现完功能以后接下来我们将给静态页面绑定该异步功能。
2、给静态页面绑定功能
这里先给大家介绍一个在线免费API网址为https://dog.ceo/dog-api/。这个API是一个狗狗API可以实时获取图片数据。具体使用方式如下 接下来我们在 vue3 项目下建立一个 .vue 文件来加载静态组件内容。具体代码如下
templatediv idapph1异步加载组件/h1button v-ifloadingLoading……/buttonimg v-ifloaded :srcresult.message/div
/templatescript langts
import useURLLoader from ./useUrlLoaderexport default{name: App,setup(){const { result, loading, loaded, error } useURLLoader(https://dog.ceo/api/breeds/image/random)return{result,loading,loaded,error}}
};
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style
最终我们来看下显示效果 大家可以看到当我们刷新时异步请求的数据还没有加载出来所以会先显示 Loading 等到数据加载出来以后再显示具体的数据这就是我们经常使用的异步加载组件。
3、用泛型改造异步组件功能
大家都知道 vue2 对于 typescript 的支持是非常有限的因此 vue3 的改造升级后对 ts 有了极大的加持。
在上面的这个例子中我们已经感受到了 Composition API 的扩展性和维护性但是呢不满足于现状我们还想要再给它来个类型的加持该怎么做呢
依据上面的案例我们继续升级改造。
首先我们希望 result 可以通过泛型来推断出类型所以我们将 ts文件的代码进行以下改造。代码如下
import { ref } from vue
import axios from axios//泛型改造
function useURLLoaderT(url: string){// result的一开始是没有赋予数据类型的待result赋予数据后再对其赋予数据类型const result refT | null(null)const loading ref(true)const loaded ref(false)const error ref(null)axios.get(url).then((rawData) {loading.value falseloaded.value trueresult.value rawData.data}).catch(e {error.value eloading.value false})return{result,loading,loaded,error}
}export default useURLLoader这次我们换一个猫猫的API来对 .vue 文件进行改造。具体代码如下
templatediv idapph1异步加载组件/h1button v-ifloadingLoading……/buttonimg v-ifloaded :srcresult[0].url/div
/templatescript langts
import { watch } from vue
import useURLLoader from ./useUrlLoaderinterface CatResult{id: string;url: string;width: string;height: string;
}export default{name: App,setup(){const { result, loading, loaded, error } useURLLoaderCatResult[](https://api.thecatapi.com/v1/images/search?limit1)watch(result, () {if(result.value){console.log(value, result.value[0].url)}}) return{result,loading,loaded,error}}
};
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style
最终浏览器的显示效果如下 通过代码我们可以发现用泛型来改造组件会使得该组件的可扩展性更强。 ts 这么好的语言谁能不爱呢对吧
三、结束语
到这里对于 vue3 开发鼠标追踪器和异步加载组件的讲解就结束啦在这篇文章中我们学会了用 vue3 的新特性来实现鼠标追踪器和异步加载组件同时我们还使用了ts中的泛型和接口来改造异步加载组件使其扩展性更强。
vue3 持续学习更新永不停歇……我们下期见 关注公众号 星期一研究室 第一时间关注学习干货更多精彩专栏待你解锁~ 如果这篇文章对你有用记得一键三连再走哦~
