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 Vue SM4 SM

Vue3 diff算法详解

Diff 更新算法 由于目前Vue3对于性能的优化做了很多的处理,所以其在更新时并不会对所有的节点都进行diff更新。目前会进行diff更新的有以下两种情况: v-for容器节点 自写的render()函数 还有一种特殊情况会进行无diff的按序更新,这种更新是全替换模式,非常耗时: 无key值的v ......
算法 Vue3 diff Vue

懂 Vue3 中的各种 ref:toRef,toRefs,isRef,unref...

在 Vue3 中,有许多与响应式相关的函数,例如 toRef、toRefs、isRef、unref 等等。合理地使用这些函数可以在实际开发中大大提高效率。本文将详细介绍这些函数的用法,让在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题。 ref() 大家对于 ref 这个 AP ......
toRefs isRef toRef unref Vue3

vue3 引入axios 并封装下

没有考虑取消重复请求、重复发送请求、请求缓存等情况 重复请求参考此链接 实现请求拦截 实现响应拦截 常见错误信息处理 请求头设置 api 集中式管理 index.js import axios from "axios"; import qs from "qs"; const serverConfig ......
axios vue3 vue

在vue3中使用openlayers3实现track轨迹动画

网上太多资料代码,抄来抄去,而且版本也是OL2的,部分API已经弃用 基础知识不多说,直接讲重点 三个关键变量 // 记录开始动画的时间 const startTime = ref(0); // 轨迹分割的颗粒度,数值越小分的越细 const particle = 20; // 轨迹动画的速度,数值 ......
openlayers3 openlayers 轨迹 动画 track

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 ......
quot failed nerdctl bridge plugin

vue2、vue3适配大屏。分辨率变化,样式不变

一、vue3适配大屏的,创建一个叫 useDraw.js export default function () { const scale = { width: '1', height: '1', } const baseWidth = 1920 const baseHeight = 1080 co ......
大屏 样式 vue 分辨率 vue2

微信公众号网页中打开高德地图

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 ......
坐标 地图 WGS GCJ 84

VS Code 配置Vue3模板

配置用户代码片段 搜索vue 配置模板 { "vue3": { "prefix": "vue3", "body": [ "<template>", " <div>", " </div>", "</template>", "", "<script setup lang=\"ts\">", "impor ......
模板 Code Vue3 Vue VS

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( ......
vue-video-player 组件 vue 播放器 player

TypeScript(2)

1.类型 //rename data type type NAME = string const jackName : NAME = 'Jack Jay' //rename mixed data type type PHONE = string | number const jackPhone : ......
TypeScript

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 开 ......
架构 命令 uni-app 基础 vue3

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 ......
vue3 vue

【源码系列#03】Vue3计算属性原理(Computed)

专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核💪推荐🙌 欢迎各位ITer关注点赞收藏🌸🌸🌸 语法 传入一个 getter 函数,返回一个默认不可手动修改的 ref 对象 const count = ref(1) const plusOne = ......
源码 Computed 属性 原理 Vue3

uniapp使用vue3+ts的聊天对话框

先看一下效果图 通过scroll-view实现消息的刷新和滑动,能查看消息和发送图片,支持图片数量自定义。 其中主要是scroll-view通过id定位滑动,当有新消息滑动到最底部,上拉能够刷新历史消息;当选择图片的时候,输入框根据选择的图片数量高度进行调整; ......
对话框 uniapp vue3 vue ts

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 ......
TypeScript

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 ......
pinia VUE3 VUE

项目: vue2+Vue3(重构)去哪儿网webapp

技术栈:Vue+webpack+vue-router+vuex+axios+element UI+ swiper 三个大组件:首页、城市选择详情页、详情页 开发方式是用模块化:一个大组件里会有多个子组件,由这些子组件来'填充'大组件,这样方便后续维护: city city.vue component ......
项目 webapp vue2 Vue3 vue

vue3移动端引入px2rem-loader

版本 "postcss-px2rem": "^0.3.0", 1、npm install postcss-px2rem 2、 ......
px2rem-loader loader vue3 2rem vue

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?好处是啥? :  ......
hooks vue3 vue

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 ......
eventBus vue3 mitt vue

vue3引入pinia

1、npm install pinia 2、在项目目录建store文件夹创index.js import { createPinia,defineStore } from "pinia";const pinia = createPinia()pinia.state.valueconst token ......
pinia vue3 vue

深度掌握TypeScript中的重载【函数重载、方法重载】

深度掌握TypeScript中的重载【函数重载、方法重载】 1. 函数重载,方法重载的重要性 著名前端流行框架底层都用到函数重载,例如:Vue3 底层源码就多处使用到带泛型的函数重载。很多前端面试更是拿函数重载作为考核求职者 TS 技能是否扎实的标准之一,如果你不掌握函数重载,等于你的 TS 技能有 ......
TypeScript 函数 深度 方法

vue3使用虚拟化表格自定义表格并动态生成表头

element Plus的虚拟化表格用的是lang=tsx,先安装 cnpm i @vitejs/plugin-vue-jsx 然后去vite.config.ts里加配置 import vueJsx from '@vitejs/plugin-vue-jsx' plugins: [ vue(), vu ......
表格 表头 动态 vue3 vue

基于百度地图的聚合排布运算

基于百度地图点位的聚合运算,在一定阈值(像素范围)内自动聚合,聚合后按照圆形重新均匀排布 一.聚合运算类 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 demo vue

[转]vue3+tsx开发语法详解

原文地址:vue3+tsx开发语法详解 - 知乎 很多组件库都使用了TSX的方式开发,主要因为其灵活性比较高,TSX和SFC开发的优缺点就不介绍了,这里主要说一下将SFC项目改造为TSX的过程。 安装JSX库 pnpm install @vitejs/plugin-vue-jsx -D 安装完之后在 ......
语法 vue3 vue tsx