typescript地图setup vue3
C# + Vue3采用SM4
引用 类库: using Org.BouncyCastle.Asn1; using Org.BouncyCastle.Asn1.GM; using Org.BouncyCastle.Asn1.X9; using Org.BouncyCastle.Crypto; using Org.BouncyCas ......
Vue3 diff算法详解
Diff 更新算法 由于目前Vue3对于性能的优化做了很多的处理,所以其在更新时并不会对所有的节点都进行diff更新。目前会进行diff更新的有以下两种情况: v-for容器节点 自写的render()函数 还有一种特殊情况会进行无diff的按序更新,这种更新是全替换模式,非常耗时: 无key值的v ......
懂 Vue3 中的各种 ref:toRef,toRefs,isRef,unref...
在 Vue3 中,有许多与响应式相关的函数,例如 toRef、toRefs、isRef、unref 等等。合理地使用这些函数可以在实际开发中大大提高效率。本文将详细介绍这些函数的用法,让在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题。 ref() 大家对于 ref 这个 AP ......
vue3 引入axios 并封装下
没有考虑取消重复请求、重复发送请求、请求缓存等情况 重复请求参考此链接 实现请求拦截 实现响应拦截 常见错误信息处理 请求头设置 api 集中式管理 index.js import axios from "axios"; import qs from "qs"; const serverConfig ......
在vue3中使用openlayers3实现track轨迹动画
网上太多资料代码,抄来抄去,而且版本也是OL2的,部分API已经弃用 基础知识不多说,直接讲重点 三个关键变量 // 记录开始动画的时间 const startTime = ref(0); // 轨迹分割的颗粒度,数值越小分的越细 const particle = 20; // 轨迹动画的速度,数值 ......
nerdctl run -d 报"failed to call cni.Setup: plugin type=\"bridge\" failed (add) 问题处理
背景:执行 nerdctl run -d --name nginx -p8080:80 nginx 时,报如下错误 FATA[0000] failed to create shim task: OCI runtime create failed: runc create failed: unable ......
vue2、vue3适配大屏。分辨率变化,样式不变
一、vue3适配大屏的,创建一个叫 useDraw.js export default function () { const scale = { width: '1', height: '1', } const baseWidth = 1920 const baseHeight = 1080 co ......
微信公众号网页中打开高德地图
toDaohang(point){ let that = this //打开高德 Dialog.confirm({ title: '', message: '打开高德地图', }) .then(() => { let str = [] if(point!=''){ str = point.split ......
地图坐标转换 WGS84、BD09与GCJ02的相互转换
高德地图 WGS84转GCJ02 export function wgs84ToGcj02(lng, lat) { if (out_of_china(lng, lat)) { return [lng, lat] } else { var dlat = transformlat(lng - 105.0 ......
VS Code 配置Vue3模板
配置用户代码片段 搜索vue 配置模板 { "vue3": { "prefix": "vue3", "body": [ "<template>", " <div>", " </div>", "</template>", "", "<script setup lang=\"ts\">", "impor ......
vue3视频播放器组件vue-video-player
1、安装 npm i vue3-video-play --save 2、全局注册 import vue3videoPlay from 'vue3-video-play' // 引入组件 import 'vue3-video-play/dist/style.css' // 引入css app.use( ......
TypeScript(2)
1.类型 //rename data type type NAME = string const jackName : NAME = 'Jack Jay' //rename mixed data type type PHONE = string | number const jackPhone : ......
uni-app 基础架构搭建 ts+vue3 命令行
1. 安装全局degit npm install -g degit2.创建工程 my-vue3-ts-project # 创建以 javascript 开发的工程 npx degit dcloudio/uni-preset-vue#vite my-vue3-ts-project # 创建以 ts 开 ......
vue3
Vue3快速上手 1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址:https://github.com/vuejs/vue-next/re ......
【源码系列#03】Vue3计算属性原理(Computed)
专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核💪推荐🙌 欢迎各位ITer关注点赞收藏🌸🌸🌸 语法 传入一个 getter 函数,返回一个默认不可手动修改的 ref 对象 const count = ref(1) const plusOne = ......
uniapp使用vue3+ts的聊天对话框
先看一下效果图 通过scroll-view实现消息的刷新和滑动,能查看消息和发送图片,支持图片数量自定义。 其中主要是scroll-view通过id定位滑动,当有新消息滑动到最底部,上拉能够刷新历史消息;当选择图片的时候,输入框根据选择的图片数量高度进行调整; ......
TypeScript(1)
1.数据类型 1.1 基本数据类型 const a: number = 1 const b: string = '123' const c: boolean = true //undefined and null belongs to other types const d: null = null ......
VUE3引入pinia配置使用
文档:https://pinia.vuejs.org/zh/introduction.html 1.引入pinna npm install pinia -S 2.在src文件里面创建store文件article.js 在main.js中引用pinna import { defineStore } f ......
项目: vue2+Vue3(重构)去哪儿网webapp
技术栈:Vue+webpack+vue-router+vuex+axios+element UI+ swiper 三个大组件:首页、城市选择详情页、详情页 开发方式是用模块化:一个大组件里会有多个子组件,由这些子组件来'填充'大组件,这样方便后续维护: city city.vue component ......
vue3移动端引入px2rem-loader
版本 "postcss-px2rem": "^0.3.0", 1、npm install postcss-px2rem 2、 ......
Vue3+Vite+ElementPlus管理系统常见问题
本文本记录了使用 Vue3+Vite+ElementPlus 从0开始搭建一个前端工程会面临的常见问题,没有技术深度,但全都是解决实际问题的干货,可以当作是问题手册以备后用。本人日常工作偏后端开发,因此,文中的一些前端术语描述可能不严谨,敬请谅解。重点是:这里记录的解决方案都是行之有效果的,拿来即可 ......
Vue3+Vite+ElementPlus管理系统常见问题
本文本记录了使用 Vue3+Vite+ElementPlus 从0开始搭建一个前端工程会面临的常见问题,没有技术深度,但全都是解决实际问题的干货,可以当作是问题手册以备后用。本人日常工作偏后端开发,因此,文中的一些前端术语描述可能不严谨,敬请谅解。重点是:这里记录的解决方案都是行之有效果的,拿来即可 ......
vue3 之 封装hooks
注意: 使用 Hooks 来做的话,需要封装一个以 use 开头的函数,自定义 Hooks 有一个潜规则,就是要 use 开头 一、相关链接 ① 已经封装好可直接使用的:https://vueuse.org/core/useMounted/ ② 为什么要在Vue3中多使用Hooks?好处是啥? : ......
vue3引入mitt(eventBus)
版本 "mitt": "^3.0.1" 1、npm install mitt 2、项目下创建文件夹eventBus 建 myEventBus.js import mitt from 'mitt'export default mitt() 3、组件里监听 组件A import myEventBus f ......
vue3引入pinia
1、npm install pinia 2、在项目目录建store文件夹创index.js import { createPinia,defineStore } from "pinia";const pinia = createPinia()pinia.state.valueconst token ......
深度掌握TypeScript中的重载【函数重载、方法重载】
深度掌握TypeScript中的重载【函数重载、方法重载】 1. 函数重载,方法重载的重要性 著名前端流行框架底层都用到函数重载,例如:Vue3 底层源码就多处使用到带泛型的函数重载。很多前端面试更是拿函数重载作为考核求职者 TS 技能是否扎实的标准之一,如果你不掌握函数重载,等于你的 TS 技能有 ......
vue3使用虚拟化表格自定义表格并动态生成表头
element Plus的虚拟化表格用的是lang=tsx,先安装 cnpm i @vitejs/plugin-vue-jsx 然后去vite.config.ts里加配置 import vueJsx from '@vitejs/plugin-vue-jsx' plugins: [ vue(), vu ......
基于百度地图的聚合排布运算
基于百度地图点位的聚合运算,在一定阈值(像素范围)内自动聚合,聚合后按照圆形重新均匀排布 一.聚合运算类 import _ from 'lodash'; /** * 获取一个扩展的视图范围,把上下左右都扩大一样的像素值。 * @param {*} map BMap.Map的实例化对象 * @para ......
vue3 demo
<script setup> import { computed, ref } from "vue"; // const blog = ref({ // title: "Vue3 基础教程", // content: "Vue3 在 Vue2 的基础上做了很多优化", // link: "https ......
[转]vue3+tsx开发语法详解
原文地址:vue3+tsx开发语法详解 - 知乎 很多组件库都使用了TSX的方式开发,主要因为其灵活性比较高,TSX和SFC开发的优缺点就不介绍了,这里主要说一下将SFC项目改造为TSX的过程。 安装JSX库 pnpm install @vitejs/plugin-vue-jsx -D 安装完之后在 ......