vue3 hooks使用 今天我们稍微说一下vue3项目中的hooks的使用,其实这个hooks呢是和vue2当中的mixin是类似的,学习过vue2的小伙伴一定对mixin一定比较熟悉,就算没用过也一定了解过,也就是混入,通过mixin混入来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。而vue2的hooks函数与mixin混入的区别,主要是hooks是函数。......
vite 创建 vue3 项目 TS 类型 之前学习过vue2的宝子们是知道的,当时我们开发vue2项目呢,使用的是js编码。当vue3发布之后,很多小伙伴尝鲜,很多人都已经知道了vue3的底层是用ts来写的,所以呢,vue3对于ts的支持和适配已经是相当不错了,所以说呢,现在开发vue3的时候呢,有必要了解一下ts版本的开发。无论是js还是ts开发,其实都是一样的哈,在开发项目的时候呢,ts版本可以从一开始就能避免很多类型上的问题,所以说呢,先看一下ts项目的创建吧。......
vue 中国省市区级联数据下拉工具 这是一个中国省市区连级数据下拉工具,可以获取行政区编码,也可以获取省市区的名称,具体的效果是下面的样子。这个工具使用起来也很简单。npm 网址: https://www.npmjs.com/package/element-china-area-data使用 npm 安装。在需要使用连级选择的页面引入插件。说明:好了,具体可以看 npm 网站的案例。...
Vue3 组件传值基本使用方法 今天说一下 vue3 的组件间传值,学习过 vue2 的宝子们肯定知道,组件传值是 vue 项目开发过程中必不可少的功能场景,在 vue2 里面有很多传值的方式,vue3 的传值方式呢,在这里稍微整理总结一下,但是不是很全,后期可能慢慢补充。和 vue2 一样,vue3 也可以使用 props 进行父组件传值给子组件,这个就不多说了直接上代码。父组件子组件保存查看效果。上面就是 props 传值的基本用法。这个其实和 vue2 的写法是一模一样的。直接上代码!!父组件子组件刷新看一下效果。好的,我
Vue3 shallowRef 和 shallowReactive 嗯,怎么说呢,其实这两个函数并不是很常用,在开发过程中基本上用不到,但是呢,我不写我又感觉少点啥,所以说就简单的说一下吧,其实不看也可以哈。上面说了是不是还是没看懂?没关系哈,先记住上面三条,然后详细的说一下。我们在之前的博客讲过 ref 函数和 reactive 函数,他们的作用是将数据转换成响应式的数据,在修改数据的时候,可以将数据实时展示在页面上,基本数据也好,对象也好,都是这样。但是有一个问题呀,我们在把数据改为响应式数据的时候,不管是用 ref 函数还是使用 reactive 函数,他俩都是深度监
Vue3 watchEffect 侦听器 上一节我们学习了 watch 侦听器的基础用法,用来监听页面数据的变化,那么今天呢,我们来学习一下 watch 侦听器的好兄弟 watchEffect 侦听器。这个相对来说比较简单,用的不是很多,当然了,根据自己的项目情况自行决定使用。这个就不详细说了,简单过一下子。其实我觉得这个玩意儿哈,不用也罢,啊哈哈哈哈哈!怎么说呢,你可以理解成 watch 和 watchEffect 这两个玩意儿的功能是一样的。:显示指定依赖源,依赖源更新时执行回调函数。:自动收集依赖源,依赖源更新时候重新执行自身。总结:能用
Vue3 侦听器 watch 上一节我们简单的介绍了一下 vue3 项目中的计算属性,这一节我们继续 vue3 的基础知识讲解。这一节我们来说 vue3 的侦听器。学过 vue2 的小伙伴们肯定学习过侦听器,主要是用来监听页面数据或者是路由的变化,来执行相应的操作,在 vue3里面呢,也有侦听器的用法,功能基本一样,换汤不换药的东西。 侦听器是常用的 Vue API 之一,它用于监听一个数据并在数据变动时做一些自定义逻辑,本文将先列举侦听器在 Vue 中的使用方式,然后再分析源码讲述为什么可以这样使用、以及侦听器的实现原理。下面我们稍微
Vue3 计算属性 上一篇博文说了 vue3 项目的 toRefs 函数和 toRef 函数,今天就稍微总结一下 vue3 的计算属性,其实学过 vue2 的宝子们应该都清楚,计算属性这个东西在项目开发过程中使用的还是比较频繁的,使用频率相对来说比较高,所以说咱今天稍微总结一下 vue3 项目中的计算属性,下面开始。computed 表示计算属性,通常的作用是用来进行数据处理,方便在末班中简化书写。比如日常在模板中我们渲染数据的时候一般是使用 来进行展示数据,但是有的时候嘞,获取到的数据并不是我们想要的类型,我们可以在
Vue3 toRef 和 toRefs 函数 上一篇博文介绍了 vue3 里面的 ref 函数和 reactive 函数,实现响应式数据,今天主要来说一下 toRef 函数和 toRefs 函数的基本使用。通过上一篇博客,我们知道,ref 函数可以创建一个响应式的数据,那 toRef 函数同样也是创建一个响应式的数据,那么他们之间的区别是什么呢?首先一点,ref 函数他的本质其实是去拷贝一份数据,脱离了与源数据的交互。什么意思呢?就是 ref 函数可以将对象里面的属性值变成响应式的数据,修改响应式数据,是不会影响到源数据,但是视图层上的数据会被更新。但
vue3 ref 和 reactive 函数 上一篇博文介绍 setup 函数的时候,最后出现一个问题,就是在 setup 函数中,编写一个事件,直接去修改定义的变量,发现页面上没有更新成功,并且控制台报错,那这篇博客就是讲解遇到的这个问题应该如何处理。使用 ref 函数很简单,首先要在页面引用,然后就可以直接使用了,具体怎么使用呢,下面为了方便介绍,简单来几个案例。首先提一个需求:页面有一个名称需要显示,有一个按钮,点击按钮的时候修改页面展示的这个名字。编写完上面的代码保存刷新,可以正常渲染数据,但是点击按钮修改名字的时候,出现问题!为什么使用过
Vue3 setup 函数 首先,目前来说 vue3 发布已经有一段时间了,但是呢,由于还处于优化完善阶段,对于 vue3 开发项目的需求不是很高,主要还是以 vue2 开发为主,但是相信,vue3 进行项目开发是大势所趋。vue2 开发项目过程中,会存在代码冗余和结构杂乱问题,这是 vue3 主要解决的问题,vue3 可以将相关功能的代码抽离分割在一起,方便开发者快速阅读,提高项目代码的可读性和可维护性。在 vue3 版本中,引入了一个新的函数,叫做 setup,引入他的原因总结一下主要原因是:为了使用组合式 API,setup 函
Vue3 生命周期 首先一点呢, Vue2 和 Vue3 中的生命周期钩子的工作方式基本上是一致的,而且如果项目中使用的选项API,基本上不需要更改什么代码, 因为 Vue3 是向下兼容的,如果是使用 Vue3 的组合式 API,那么使用的方式是有些许的不同,毕竟组合式 API 在大的 Vue 项目中还是比较吃香的。在 Vue2 里面,生命周期钩子主要有 8 个,分别是:除了上面的 8 个之外,还有两个分别是 activated 和 deactivated。分别用来组件激活时回调和组件停用时回调。但是 activated 函数
Vue3 + Vite 实现项目搭建 创建 Vue3 项目有两种常见的方式,一种是想 vue2 版本一样使用脚手架工具创建,创建 vue3 项目的脚手架必须是4版本以上的,另一种方法就是使用 vite 创建,为什么使用 vite 呢?因为快!贼快!vite 官网:https://cn.vitejs.dev/安装 vite 构建工具:Vite 创建 vue3 项目创建一个项目名称为 的项目:项目创建完成的目录结构就是这个样子的。然后进入文件夹,安装依赖,启动就可以了。然后使用 Vite 创建的项目真的厉害,秒开,不用打包直接启动。安
Cesium实现卫星在轨绕行 最后的效果就是这个样子的啦!就是很简单的一个卫星,放射信号,然后围着轨道转圈圈。首先呢,分享几个网站,尽管大家应该都有,但是还是分享一下子吧。cesium API 中文网站3D模型下载其中这个下载3D模型的网站有很多3D模型,可以根据自己的需要搜索下载使用,尽管大部分是收费的,但是又免费的呀,自己测试或者是玩的话,我觉得够用了,我觉得还不错的呢!首先这个稍微说一下哈,其实就是用了 cesium 的时间轴,然后添加卫星模型,在距离地面的固定高度按照设置好的轨迹进行绕地旋转,关于下面的锥形信号覆盖区域,就是在
Cesium 加载显示热力图 首先嘞,绘制热力图需要有一个工具,就是使用 CesiumHeatmap 这个工具,然后呢,下面是他的一个github的地址。CesiumHeatmap 【时空门~ 嗖~】下载下来放到项目里面就可以了。我把他放到了这里面嘞。...