前言 2018年刚入行前端时，公司使用的还是Angular。Angular什么都好，就是写代码时的体验老糟心了，改一个地方，按下保存之后，要等好几秒刷新后才能看到效果，Webstorm无比好用的自动保存，对我来说反而像是一个负担。然而2024年了，Angular已经更新了17版本，还是没有解决这个问题，热替换依然那么的糟糕 在网上冲浪时，发现了刚开始火起来的Vue，大家都在说简单好用上手快，于是抱着试一试的心态照着Vue官网的教程开始学习，并创建了这个项目。一开始只是用来学习Vue练手，后面断断续续的更新，有空就优化下，完成度已经可以达到官方App的80%了 在线访问 Vercel:http:...

最近在做一个全国海域潮汐表查询，可以为赶海钓鱼爱好者提供涨潮退潮时间表及潮高信息。下面教大家怎么做一个这样的小程序。主要功能，根据IP定位地理位置，自动查询出省份或城市的港口，进入后预测7天内港口潮汐表查询。步骤：1.采集全部国海域港口数据。2.采集对应的港口数据每天潮汐表数据。3.用百度echarts.js图表显示潮汐信息。 扫码看效果：  小程序代码： <!--pages/index/index.wxml--> <t-navbarclass="custom-navbar"title="爱潮汐表网"/> <viewstyle="{{navBarHe...

forEach和map都是JavaScript中数组的常用方法，但它们之间的主要区别在于它们的返回值和用途。 1、forEach：它是一个无返回值的方法，它的作用是遍历数组，对数组的每个元素执行相同的操作。 letnumbers=[1,2,3,4,5]; numbers.forEach(function(number){ console.log(number); }); //输出：12345 2、map：它是一个有返回值的方法，它的作用是创建一个新的数组，其元素为原始数组元素执行函数操作的结果。 letnumbers=[1,2,3,4,5]; letdoubledNumbers=number...

vue3快速入门系列vue3路由 在vue3基础上加入路由。 vue3需要使用vue-routerV4，相对于v3，大部分的VueRouterAPI都没有变化。 Tip：不了解路由的同学可以看一下笔者之前的文章：vue2路由 参考：vue2路由官网、vue3路由官网 vue-routerV4 在VueRouterAPI从v3（Vue2）到v4（Vue3）的重写过程中，大部分的VueRouterAPI都没有变化，但是在迁移你的程序时，你可能会遇到一些破坏性的变化——从Vue2迁移 vue3需要使用vue-router4.x.x版本。安装： PShello_vue3>npmivue-rout...

在Vue3.2+版本中，可以使用<scriptsetup>替代传统的script标签来编写组件，它提供了更简洁的语法来编写CompositionAPI代码。 在<scriptsetup>中，使用defineProps和defineEmits时需要注意： 如果显式地导入defineProps时，在编译时会提示以下wanning <scriptsteup> import{defineProps}from'vue'; ... </script> 开发环境编译时会提示 [@vue/compiler-sfc]`defineProps`isacompi...

大家好，我是Java陈序员。 今天，给大家介绍一个基于Vue全家桶实现的“网易云”播放器。 关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。 项目介绍 YesPlayMusic——一款高颜值的第三方网易云播放器，支持Windows/macOS/Linux。 功能特色： 项目截图 项目部署 1、拉取代码 gitclonehttps://github.com/qier222/YesPlayMusic.git 2、安装依赖 yarninstall 3、修改配置文件 复制/.env.example文件为/.env，修改里面VU...

前言 在之前的通过debug搞清楚.vue文件怎么变成.js文件文章中我们讲过了vue文件是如何编译成js文件，通过那篇文章我们知道了，template编译为render函数底层就是调用了@vue/compiler-sfc包暴露出来的compileTemplate函数。由于文章篇幅有限，我们没有去深入探索compileTemplate函数是如何将template模块编译为render函数，在这篇文章中我们来了解一下。 @vue下面的几个包 先来介绍一下本文中涉及到vue下的几个包，分别是：@vue/compiler-sfc、@vue/compiler-dom、@vue/compiler-cor...

vue3快速入门系列基础 前面我们已经用vue2和react做过开发了。 从vue2升级到vue3成本较大，特别是较大的项目。所以许多公司对旧项目继续使用vue2，新项目则使用vue3。 有些UI框架，比如antdesignvue1.x使用的vue2。但现在antdesignvue4.x都是基于vue3，示例默认是TypeScript。比如table组件管理。 另外vue3官网介绍也使用了TypeScript，例如：响应式API：核心 本篇主要介绍：vite创建vue3项目、组合式api、响应式数据、计算属性、监听、ref、ts、生命周期、自定义hooks。 vue3简介 Vue.js3.0，...

其他章节请看： vue3快速入门系列 他API 前面我们已经学习了vue3的一些基础知识，本篇将继续讲解一些常用的其他api，以及较完整的分析vue2和vue3的改变。 浅层响应式数据 shallowRef shallow中文：“浅层的” shallowRef：浅的ref()。 先用ref写个例子： <!-ChildA.vue--> <template> <p>组件A</p> <p>a:{{a}}</p> <p>o:{{o}}</p> <p><button@click="cha...

前端技术栈+Vue笔记 ES6新特性 1.let 1）let声明有严格的局部作用域 ​此时"console.log("job="+job)"将报错 { varname="zy学习"; letjob="java工程师"; console.log("name="+name) console.log("job="+job) } console.log("name2="+name) console.log("job="+job) 2）let只能声明一次 ​此时业因为let的重复声明 ​会报错SyntaxError（语法错误）:redeclarationofletnum2 //let只能声明1次 v...

大家好，我是Java陈序员。 今天，给大家介绍一个基于Vue3实现的高仿抖音开源项目。 关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。 项目介绍 douyin——一个基于Vue、Vite实现，模仿抖音的移动端短视频项目。 这个项目的作者原本是用来学习Vue练手的，经过不断的优化更新，目前已经达到官方App的80%了。真乃我辈楷模！ 项目地址： https://github.com/zyronon/douyin 在线访问： https://dy.ttentau.top/home 如果是PC浏览器浏览访问，请用手机模式。先按F12...

vue3快速入门系列组件通信 组件通信在开发中非常重要，通信就是你给我一点东西，我给你一点东西。 本篇将分析vue3中组件间的通信方式。 Tip：下文提到的绝大多数通信方式在vue2中都有，但是在写法上有一些差异。 准备环境 在vue3基础上进行。 新建三个组件：爷爷、父亲、孩子A、孩子B，在主页Home.vue中加载组件Gradfather.vue： <!-Gradfather.vue--> <template> <p>爷爷</p> <hr> <Father/> </template> <script...

一、代码分割 一个大型前端应用，如果所有代码都放在单一文件，体积会特别大，下载时间长，白屏时间久，用户体验差。 代码分割是一种有效的优化方式。提前把代码切分为多个小块，只下载当前必需的部分，用到哪块下载哪块。就像吃自助餐一样，吃多少拿多少。 早期的代码分割一般通过 webpack 实现。随着ES6的不断流行，原生的 import() 成为更好的选择。   使用import()和《Vue3基础用法：组件入门》介绍的动态组件，可以实现一个简单的代码分割[2]。   实际运行效果如图：   上面代码“糙快猛”地实现了代码分割...

大家好，我是Java陈序员。 问君能有几多愁，唯有开源项目解千愁！之前，分别给大家介绍了离线和在线的工具箱应用程序。 开发者的瑞士军刀！一款适用于开发者的工具集合！ 8.7K+Star！快速搭建个人在线工具箱 今天，再给大家安利一款无广告、不需要登录、可二开的桌面端工具箱！ 关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。 项目介绍 Rubick——一款纯绿色、效率、开源的桌面端工具箱软件。 软件支持插件化的方式来安装工作所需要的任何插件。插件是基于npm进行安装和卸载，非常轻便。 功能特色： 安装使用 Rubick提供了Window...

随着互联网技术的迅速发展，用户对网页的加载速度和交互体验有了更高的期待。作为开发者，我们常常需要在服务器端渲染（SSR）与客户端渲染（CSR）之间做出选择。这两种渲染方式各有特点，适用于不同的场景和需求。今天，就让我们一起来探索SSR和CSR的世界，帮助你为你的应用选择最合适的渲染策略。 什么是渲染？   简单来说，渲染就是在屏幕上显示视觉元素的过程。在网页开发中，这涉及将HTML、CSS和JS代码转化为用户可以交互的视觉吸引力页面。 渲染过程为何如此重要？ 渲染过程是形成用户体验的关键环节，因此选择正确的渲染策略对于打造引人入胜的UI/UX至关重要。一个网页的用户体验质量和搜索引...

前言：针对项目越来越大，js弱类型、动态类型捉襟见肘，导致项目维护成本越来越高，typeScript接入学习成本及vue兼容性等问题，考虑引入flow.js优点：静态类型检查，避免类型编码错误不影响线上代码打包，对线上代码影响小接入后可仅在需要的文件中使用项目接入流程如下：使用yarn、babel的方式，其他方式请参照：https://flow.org/en/docs/install/，安装如下依赖：yarnadd--dev@babel/preset-flowflow-binflow-typed2.安装完成后在项目根文件初始化flowyarnrunflow3.在babel.config.js文...

关于微信小程序转发&保存图片 已经好多年没写博客了，最近使用在用uniapp开发一个移动版管理后台，记录下自己踩过的一些坑 微信小程序图片转发保存简单说明 微信小程序图片转发保存，依赖小程序的转发api——wx.showShareImageMenu(Objectobject)通过调用这个api能触发如下弹窗  代码如下： wx.showShareImageMenu({ path:filePath,//...

前言 vue3.4增加了defineModel宏函数，在子组件内修改了defineModel的返回值，父组件上v-model绑定的变量就会被更新。大家都知道v-model是:modelValue和@update:modelValue的语法糖，但是你知道为什么我们在子组件内没有写任何关于props的定义和emit事件触发的代码吗？还有在template渲染中defineModel的返回值等于父组件v-model绑定的变量值，那么这个返回值是否就是名为modelValue的props呢？直接修改defineModel的返回值就会修改父组件上面绑定的变量，那么这个行为是否相当于子组件直接修改了父组件...

前言 最近有粉丝找到我，说被面试官给问懵了。 粉丝：面试官上来就问“一个vue文件是如何渲染成浏览器上面的真实DOM？”，当时还挺窃喜这题真简单。就简单说了一下先是编译成render函数、然后根据render函数生成虚拟DOM，最后就是根据虚拟DOM生成真实DOM。按照正常套路面试官接着会问vue响应式原理和diff算法，结果面试官不讲武德问了我“那render函数又是怎么生成的呢？”。 我：之前写过一篇看不懂来打我，vue3如何将template编译成render函数文章专门讲过这个吖。 粉丝：我就是按照你文章回答的面试官，底层其实是调用的一个叫baseCompile的函数。在baseCo...

一、前期转杯 确保电脑上已安装node.js。可通过命令npm--version进行查询，如果展示了版本号，则说明已安装，若提示npm不是有内部或外部命令，也不是可运行的程序，则说明未安装，可进入官网下载并进行安装。 确保已安装VueCLI。可通过命令vue--V查看版本号，如果返回了版本号，则说明已安装，若提示vue不是有内部或外部命令，也不是可运行的程序，则说明未安装VueCLI,可使用命令：npminstall-g@vue/cli进行安装。 二、创建vue项目 在命令行窗口输入命令vuecreate[web名称]后，点击回车(Enter)键。进入如下界面 可以使用方向键上/下进行选...