蒲公英1001-CSDN博客

原创 Vue3学习：vue组件中的图片路径问题

今天在做一个案例的时候，图片放在assets/images文件夹下，如下路径，其中的图片不能正常显示。方法一 new URL(‘路径’,import.meta.url).href。方法二把图片放到public目录下的images文件夹中。后来查了一下资料，有两种解决方法。

2024-10-31 21:40:38 228

前几天学过一个番茄钟的案例，这个案例跟番茄学习法有关，以25分钟为一个单位，进行倒计时。倒计时的案例我曾经写过，只是时间到了0以后，就停止了，没有响铃提醒。这个案例在倒计时结束后，会有音乐播放，以提醒用户。只是这个案例是引入的vue库文件，以.html网页的形式实现的。我想把它改成.vue组件的形式，不过组合式我还不太熟，所以用的还是选项式。起初以为这是分分钟就能搞定的事情，没想到音频播放出现问题，居然折腾了大半天，才算解决。虽然耗费了不少时间，不过倒也挺有收获。

2024-10-27 20:43:15 776

原创 Vue3学习：汇率计算器案例中event.target与event.currentTarget比较

今天从一本vue.js书中学习了《汇率计算器》的案例，这个案例的效果如下：案例可以查询人民币、日元、港元、美元、欧元之间的汇率关系，代码中定义了一个汇率表rate，包含了每种货币对其他5种货币的汇率。其中还有一个功能是点击下方四种货币的任意一种货币，可以和最上面的一种货币实现互换。例如点击了欧元，欧元会到最上面，和人民币位置互换。这是代码的html部分，下面4种货币使用v-for循环生成列表项。两种货币位置互换的功能，是在methods中定义了一个 changeCur(event) 方法来

2024-10-26 21:08:26 843

原创 Mac电脑:资源库Library里找不到WebServer问题的解决

今天看到一本书里写到Windows电脑自带IIS Web服务器，好奇了一下下，mac电脑自带的又是什么服务器呢？经查询，原来是Apache服务器，这个名字我很熟悉。只是如何设置呢？我从来没用过，于是试验了一番。主要参考了首先要打开终端。

2024-10-22 19:25:33 554

原创 Vue3学习：vite项目中图片不能显示，报错 require is not defined

于是到网上一通搜索，找到几篇文章，说是vite不支持require，要想使其支持，需要安装一个插件，还需要修改一些对应的配置文件。安装插件简单，执行对应的命令即可。可是配置文件那里我有些看不明白，不知道该从哪里修改，甚至不知道配置文件具体是哪个。后来又找到一篇文章，文中提到的方法不需要安装插件，不需要修改配置文件，只需要换种写法，不用require即可。我照做，果然问题解决，图片正常显示。

2024-10-19 16:15:50 1138

原创 Vue3学习：生肖查询

以前用javaScript实现过生肖查询，现在学习Vue，又用Vue的方式实现了。不过不是用组件的形式，而是html网页的形式，比较适合初学者入门练习用。

2024-10-13 16:51:32 629

原创 vue3学习：数字时钟遇到的两个问题

在前端开发学习中，用JavaScript脚本写个数字时钟是很常见的案例，也没什么难度。今天有时间，于是就用Vue的方式来实现这个功能。原本以为是件非常容易的事，没想到却卡在两个问题上，一个问题通过别人的博文已经找到答案，还有一个问题却还是不知道是什么原因造成的。

2024-10-12 21:45:45 981

原创 vue3学习:axios输入城市名称查询该城市天气

说来惭愧，接触前端也有很长一段时间了，最近才学习axios与后端的交互。今天学习了一个查询城市天气的案例，只需输入城市名称，点击“查询”按钮便可以进行查询。运行效果如下：案例只实现了基本的查询功能，没有用css进行美化，需要效果更好看一些，自己添加一些css样式就行。说明如下：一、头部引入因为用到了vue3和axios，需要在头部引入vue3库文件和axios库文件，我这里是网页版，采用的是CDN方式。<script src="https://unpkg.com/vue@3/dist/vu

2024-10-04 17:56:15 1201 1

原创使用scroll-behavior属性实现页面平滑滚动的几个问题

在较长的页面中，为了便于用户浏览，开发人员经常会使用锚点链接，锚点链接默认的效果是瞬间跳转，为了让用户体验更好，往往会添加滚动效果。我记得要实现滚动效果，以前一般是结合一段JavaScript代码来实现。后来偶然知道了scroll-behavior: smooth;这个CSS属性，觉得用来实现滚动效果非常方便。

2024-09-28 10:25:09 1026

原创安装Vue，有的让输入包名，有的没有这一项，什么原因？

而我立刻在自己电脑上vscode中也执行同样的命令，输入项目名称以后，直接出选择“TypeScript语法”选项，却并没有“请输入包名称”这一项，这是为什么呢？目前我知道两人的电脑的区别是，同事用的node.js是20.0版本，比我的新，我的是18.18。什么情况下会出现“请输入包名”这个选项，不知哪位大神知道原因？

2024-09-25 18:43:58 202

原创 Vue学习：props验证的一个小细节“Prop 名字格式”

后来到官网查看了一下，《传递 prop 的细节》小节中提到，“Prop 名字格式”，如果一个 prop 的名字很长，应使用 camelCase 形式，即驼峰命名法。可以直接在模板的表达式中使用，但实际上为了和 HTML attribute 对齐，我们通常会将其写为 kebab-case 形式

2024-09-16 10:30:20 531

原创 Vue学习：计算属性Computed

计算属性可以实时监听 data节点中数据的变化，并 return 一个计算后的新值，供组件渲染 DOM 时使用，计算属性需要以 function 函数的形式声明到组件的 computed 节点中。

2024-09-09 16:49:19 925

原创 Vue初学-简易计算器

最近在学习Vue的指令，做了一个简易计算器，比较适合刚入门的人参考学习。如果选择的是**乘方，操作数2不显示，这是利用v-show控制实现的，如图所示。4.methods选项，定义了calculate ()方法，实现各种运算。3.v-show，控制操作数2是否显示，乘方时不显示操作数2。2.v-model，双向绑定+、-、*、/、**等操作符。5.watch选项，监听selected的值的变化。

2024-09-05 17:32:12 989

原创 Vue学习：v-model绑定文本框、单选按钮、下拉菜单、复选框等

v-model指令可以在组件上使用以实现双向绑定，之前学习过v-model绑定文本框和下拉菜单，今天把表单的几个控件单选按钮radio、复选框checkbox、多行文本框textarea都试着绑定了一下。完整代码如下：

2024-09-05 11:22:00 1272

原创 Vue学习----Teleport组件

1.position: fixed 能够相对于浏览器窗口放置有一个条件，那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。问题2，我又新增了一个元素，设置它的z-index属性值比较高，发现即使使用了Teleport组件，模态框依然会被覆盖。/*设置transform属性，不使用Teleport的话，模态框不再居中*/今天学习Teleport组件，Teleport组件常见的应用场景是模态框。重叠并有更高的 z-index，则它会覆盖住我们的模态框。

2024-08-31 09:45:58 997

原创使用CSS、JavaScript、jQuery三种方式实现手风琴效果

手风琴效果有不少，王者荣耀官网（源网址 https://pvp.qq.com/raiders/ ）有一处周免英雄，使用的就是手风琴效果，如图所示。我试着用css、js、jQuery三种方式实现了这种效果，最终效果差不多，美中不足的是，css方式当鼠标离开后，会恢复到初始状态，也就是显示第一张大图片的状态。而使用js和jQuery方式，则会停留在鼠标进入的那一张，不恢复到第一张的状态。如何使用纯CSS，保留住:hover的状态，我还没有找到解决方法，若有哪位大神知晓，欢迎告知，多谢！。一、CSS方式

2024-06-12 20:47:03 1695

原创网页中上下左右箭头的实现及应用案例

网页制作中，有时候会用到上下左右四个箭头，箭头带有一定的指向左右，例如网站首页经常会有返回顶部的效果，这个效果中含有上箭头，如图所示。再来看淘宝网，有向下的箭头，表示此处有二级菜单。箭头的实现可以有以下几种方式：1.图片方式，上例中的返回顶部就可以用绘图软件制作一张图片（本文不讲这种方式）。2.给div设置两条相邻的边，另两条边不设置（不显示），然后让其旋转一定的角度。3.使用字体图标，iconfont或者iconmoon，这两种方式的实现效果差不多，本文中用的是第二种。

2024-05-20 16:18:49 1682

原创子元素水平垂直都居中的实现

在网页布局中，如何实现子元素在水平方向和垂直方向居中，如图所示：我知道的有这样的两种方式：1.使用弹性布局实现2.使用定位和平移实现另外还有以下两种常用情况3.窗口在整个屏幕水平垂直居中，还可以使用绝对定位实现。4.多行文字垂直居中。

2024-05-13 19:30:00 883

原创鼠标移到图片上，光线闪过效果的实现

本文用两种方式实现了鼠标移动到图片上时，有光线闪过的效果。

2024-05-08 19:48:17 661 2

原创浏览器密码框明文密文兼容edge的问题

密码框明文密文兼容Edge

2024-04-10 20:35:52 538

原创 HbuliderX升级到最新版本后，运行报404错误

今天使用HBuilderX软件的时候，见右下方提示有新版本，于是就点了“检查更新”，升级完成后，运行页面在浏览器预览的时候，总是报404错误，文件找不到。

2024-04-01 14:26:11 364

原创分钟倒计时效果实现

原以为这样做代码简洁一目了然，结果运行时发现出现了一个新问题，举例说明，min会从2变成02，002，0002，00002，这可不是我希望的，然后想到了一个解决办法，使用字符串的slice(-2)或substr(-2)方法，截取后2位字符，可以解决这个问题。之前在一篇文章中写过倒计时的代码，剩余多少天时分秒，后来见过别人写的一种分钟倒计时代码，它的思路和我实现的思路不同，不是求出两个时间之间相差多少秒，然后转成天、时、分、秒，而是分和秒同时为0时，定时器停止，具体代码如下。

2024-03-26 11:36:10 486

原创 javascript实现的生肖查询

使用switch语句实现的生肖查询，只要输入年份，就可以查询是什么生肖。代码不难，适合初学者练习。/* 左上角左下角*//* 右上角右下角*/

2024-03-04 16:39:23 1108

原创 javascript实现的星座查询

今天在这个网站http://xzxys.wiicha.com/看到查询星座幸运色的效果，想研究一下代码，结果右键禁用。后来参考了一下别人的代码，琢磨着先实现了一下星座查询的功能，输入月份和日期四位数后，可以查询属于哪个星座，星座效果如下。用CSS代码美化了一下输入框，js代码主要是使用了indexOf判断是否有不合法输入，对这个方法用得不太熟，特意拿来练手，12个月份使用switch语句判断。完整代码如下：<!doctype html><html> <head>

2024-03-03 21:50:06 1022

原创 JavaScript实现的计时器效果

在这段代码中，刚开始实现的时候，没有把timer设置为全局变量，而是在函数中使用了var关键字，这样timer是局部变量，结果定时器无法停止。后来去掉关键字var，timer成为全局变量好了，于是最后把timer放在函数外，直接定义为全局变量，这样程序可读性好一些。//开启定时器，前面不能加关键字var ,那会变成局部变量，定时器不能清除，不会从0开始。1.点击“开始”后，按秒计时且“开始”文字变为“停止”；2.点击“停止”，计时停止，文字变为“开始”；//全局变量，从0开始计时，初始值为0。

2024-03-03 10:30:35 1176

原创使用滤镜属性将网页从彩色变黑白

在某些情况下，例如为了表达哀悼或纪念，许多网站会将页面颜色从彩色调整为黑白灰色。我到网上查找答案，发现有些是通过javascript或jQuery实现的，我试了一下居然无效。后来找到一个方法，是仅用一行CSS代码就能搞定的，只要对body使用滤镜filter: grayscale(100%);

2024-03-02 19:19:19 466

原创 “点击查看显示全文”遇到的超链接默认访问的问题

超链接有默认的访问行为，我觉得自己找到了问题所在，去看了一下html代码，果然，在敲代码的时候，href=“”，里面什么也没有，我改成了href=“#”，就正常了。第二种方法，如果不修改html代码，还可以使用preventDefault()阻止默认行为，传递参数event，在javascript中加上一句 e.preventDefault() ，代码如下。我觉得这是一个很简单的效果，也就几行代码的事，结果点击了以后立刻隐藏不见，控制台代码也不报错，耽误了我很长时间，最后才发现问题出在超链接身上。

2024-02-24 22:36:36 594

原创 vue3中使用return语句返回this.$emit()，在同一行不执行,换行后才执行，好奇怪！

在制作TodoList、TodoInput时很顺利，只是在完成TodoButton这个组件时出了点问题。在点击”全部“、”已完成“、”未完成“三个按钮时，预期的效果不出现，被点击的按钮颜色不变化，没反应。我去翻了return语句的语法格式，发现return和后面的返回值可以是不换行的。上面的代码如果从return的后面换行，改成下面的格式，程序就可以正常的执行。我试了好几次，都是如此。

2023-10-06 17:18:14 530

原创 JavaScript实现广告倒计时和跳过广告

最近打开手机上的app，映入眼帘的都是一个几秒的广告，带有倒计时，当然如果不喜欢的话可以点击跳过，跳过广告其实质应该就是关闭广告。以前用JavaScript做过一个定时关闭的广告，于是把代码完善了一下，加上倒计时效果和实现跳过部分的代码。

2023-09-08 19:30:10 925

原创 JavaScript中的Date()对象getTime()输出-28800000

后来计算了一下，一天是86400000毫秒，这28800000是一天的1/3，应该是8，也就是-8小时。然后我就明白怎么回事了，我以前把重点放在1970年1月1日00:00:00上，没注意还有个UTC。我们所在的时区是东八区，不是格林尼治时间，所以有8个小时的差距是对的。自认为对JavaScript的日期时间对象Date()比较熟悉了，用它做过数字时钟、倒计时等不少案例，Date.getTime()表示自 1970 年 1 月 1 日 00:00:00 UTC（the Unix epoch）以来的毫秒数。

2023-05-15 10:21:04 395 1

原创 icomoon字体图标的使用

今天遇到用icomoon字体图标写的案例，于是详细学习了一下，现整理如下。

2023-02-06 21:46:26 1614

原创 MacBookPro 遇到pip: command not found问题的解决

也就是说，把pip写成pip3就好了，就这么简单。命令1:curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py。我惊讶的发现，明明已经装了pip，版本还是22.3.1。后来看到一篇文章说，如果安装的是python3版本，那么理论上是有pip的，可以通过下面命令查看。就这么点儿事，害我折腾了一个下午，总算找到原因，可以安装第三方插件了。文章看了十几篇，逐一尝试，行不通，报各种错或警告。我很郁闷，于是上网搜索尝试各种命令，

2023-01-08 20:56:41 3983 10

原创 MacBookPro安装mysql遇到的几个问题

经过一番折腾，顺利的下载了需要的版本mysql-8.0.31-macos12-x86_64.dmg，双击安装时，系统提示“该软件来源不明，不建议安装”，下载下来却不能安装？用Mac的好处是不用开关机，无弹窗无广告，坏处是在安装某些第三方的软件时，总是和视频教程上的winows版不一致，需要自己上网找资料尝试怎么安装。在安装的过程中，需要输入mysql的输入密码，开始我不想设置复杂的密码，怕给后期自己练习使用添麻烦，所以输了123456，然后finish始终是灰度的不能用。绊绊磕磕的安装成功了。

2023-01-06 15:34:59 1340

原创 PyCharm中设置translation插件为有道翻译

安装完PyCharm后，为了便于后期的学习，我又按照视频教程中所讲安装了translation插件，结果选中需要翻译的单词时，右击，从菜单中选择“翻译”，却翻译不出来，一直在转圈，系统说是因为网速原因。我看了一下，默认的是“谷歌翻译”，我又换成了“微软翻译”，还是不行，一直在转圈。我看选项中还有“有道翻译”，因为我平常一直用有道词典，所以就选了“有道翻译”这一项进行设置。创建完成以后，把应用ID和应用密钥复制粘贴到PyCharm中，完成设置。点了配置，没有账号，新创建了一个有道的账号，然后“创建应用”

2023-01-01 18:47:51 6296 5

空空如也

空空如也