- 博客(69)
- 收藏
- 关注
RSS订阅原创 Vue学习：props验证的一个小细节“Prop 名字格式”
后来到官网查看了一下，《传递 prop 的细节》小节中提到，“Prop 名字格式”，如果一个 prop 的名字很长，应使用 camelCase 形式，即驼峰命名法。可以直接在模板的表达式中使用，但实际上为了和 HTML attribute 对齐，我们通常会将其写为 kebab-case 形式
2024-09-16 10:30:20
499
原创 Vue学习：计算属性Computed
计算属性可以实时监听 data节点中数据的变化，并 return 一个计算后的新值，供组件渲染 DOM 时使用，计算属性需要以 function 函数的形式声明到组件的 computed 节点中。
2024-09-09 16:49:19
881
原创 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
914
原创 Vue学习：v-model绑定文本框、单选按钮、下拉菜单、复选框等
v-model指令可以在组件上使用以实现双向绑定，之前学习过v-model绑定文本框和下拉菜单，今天把表单的几个控件单选按钮radio、复选框checkbox、多行文本框textarea都试着绑定了一下。完整代码如下：
2024-09-05 11:22:00
815
原创 Vue学习----Teleport组件
1.position: fixed 能够相对于浏览器窗口放置有一个条件，那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。问题2，我又新增了一个元素，设置它的z-index属性值比较高，发现即使使用了Teleport组件，模态框依然会被覆盖。/*设置transform属性，不使用Teleport的话，模态框不再居中*/今天学习Teleport组件，Teleport组件常见的应用场景是模态框。重叠并有更高的 z-index，则它会覆盖住我们的模态框。
2024-08-31 09:45:58
964
原创 使用CSS、JavaScript、jQuery三种方式实现手风琴效果
手风琴效果有不少，王者荣耀官网（源网址 https://pvp.qq.com/raiders/ ）有一处周免英雄，使用的就是手风琴效果，如图所示。我试着用css、js、jQuery三种方式实现了这种效果，最终效果差不多，美中不足的是，css方式当鼠标离开后，会恢复到初始状态，也就是显示第一张大图片的状态。而使用js和jQuery方式，则会停留在鼠标进入的那一张，不恢复到第一张的状态。如何使用纯CSS，保留住:hover的状态，我还没有找到解决方法，若有哪位大神知晓，欢迎告知，多谢！。一、CSS方式
2024-06-12 20:47:03
1633
原创 网页中上下左右箭头的实现及应用案例
网页制作中，有时候会用到上下左右四个箭头，箭头带有一定的指向左右，例如网站首页经常会有返回顶部的效果，这个效果中含有上箭头，如图所示。再来看淘宝网，有向下的箭头，表示此处有二级菜单。箭头的实现可以有以下几种方式：1.图片方式，上例中的返回顶部就可以用绘图软件制作一张图片（本文不讲这种方式）。2.给div设置两条相邻的边，另两条边不设置（不显示），然后让其旋转一定的角度。3.使用字体图标，iconfont或者iconmoon，这两种方式的实现效果差不多，本文中用的是第二种。
2024-05-20 16:18:49
1287
原创 子元素水平垂直都居中的实现
在网页布局中，如何实现子元素在水平方向和垂直方向居中，如图所示：我知道的有这样的两种方式：1.使用弹性布局实现2.使用定位和平移实现另外还有以下两种常用情况3.窗口在整个屏幕水平垂直居中，还可以使用绝对定位实现。4.多行文字垂直居中。
2024-05-13 19:30:00
858
原创 HbuliderX升级到最新版本后，运行报404错误
今天使用HBuilderX软件的时候，见右下方提示有新版本，于是就点了“检查更新”，升级完成后，运行页面在浏览器预览的时候，总是报404错误，文件找不到。
2024-04-01 14:26:11
320
原创 分钟倒计时效果实现
原以为这样做代码简洁一目了然，结果运行时发现出现了一个新问题，举例说明，min会从2变成02，002，0002，00002，这可不是我希望的，然后想到了一个解决办法，使用字符串的slice(-2)或substr(-2)方法，截取后2位字符，可以解决这个问题。之前在一篇文章中写过倒计时的代码，剩余多少天时分秒，后来见过别人写的一种分钟倒计时代码，它的思路和我实现的思路不同，不是求出两个时间之间相差多少秒，然后转成天、时、分、秒，而是分和秒同时为0时，定时器停止，具体代码如下。
2024-03-26 11:36:10
467
原创 javascript实现的生肖查询
使用switch语句实现的生肖查询，只要输入年份，就可以查询是什么生肖。代码不难，适合初学者练习。/* 左上角 左下角*//* 右上角 右下角*/
2024-03-04 16:39:23
1077
原创 javascript实现的星座查询
今天在这个网站http://xzxys.wiicha.com/看到查询星座幸运色的效果，想研究一下代码，结果右键禁用。后来参考了一下别人的代码，琢磨着先实现了一下星座查询的功能，输入月份和日期四位数后，可以查询属于哪个星座，星座效果如下。用CSS代码美化了一下输入框，js代码主要是使用了indexOf判断是否有不合法输入，对这个方法用得不太熟，特意拿来练手，12个月份使用switch语句判断。完整代码如下：<!doctype html><html> <head>
2024-03-03 21:50:06
995
原创 JavaScript实现的计时器效果
在这段代码中，刚开始实现的时候，没有把timer设置为全局变量，而是在函数中使用了var关键字，这样timer是局部变量，结果定时器无法停止。后来去掉关键字var，timer成为全局变量好了，于是最后把timer放在函数外，直接定义为全局变量，这样程序可读性好一些。//开启定时器，前面不能加关键字var ,那会变成局部变量，定时器不能清除，不会从0开始。1.点击“开始”后，按秒计时且“开始”文字变为“停止”；2.点击“停止”，计时停止，文字变为“开始”；//全局变量，从0开始计时，初始值为0。
2024-03-03 10:30:35
977
原创 使用滤镜属性将网页从彩色变黑白
在某些情况下，例如为了表达哀悼或纪念， 许多网站会将页面颜色从彩色调整为黑白灰色。我到网上查找答案，发现有些是通过javascript或jQuery实现的，我试了一下居然无效。后来找到一个方法，是仅用一行CSS代码就能搞定的，只要对body使用滤镜filter: grayscale(100%);
2024-03-02 19:19:19
443
原创 “点击查看显示全文”遇到的超链接默认访问的问题
超链接有默认的访问行为，我觉得自己找到了问题所在，去看了一下html代码，果然，在敲代码的时候，href=“”，里面什么也没有，我改成了href=“#”，就正常了。第二种方法，如果不修改html代码，还可以使用preventDefault()阻止默认行为，传递参数event，在javascript中加上一句 e.preventDefault() ，代码如下。我觉得这是一个很简单的效果，也就几行代码的事，结果点击了以后立刻隐藏不见，控制台代码也不报错，耽误了我很长时间，最后才发现问题出在超链接身上。
2024-02-24 22:36:36
552
原创 vue3中使用return语句返回this.$emit()，在同一行不执行,换行后才执行，好奇怪！
在制作TodoList、TodoInput时很顺利，只是在完成TodoButton这个组件时出了点问题。在点击”全部“、”已完成“、”未完成“三个按钮时，预期的效果不出现，被点击的按钮颜色不变化，没反应。我去翻了return语句的语法格式，发现return和后面的返回值可以是不换行的。上面的代码如果从return的后面换行，改成下面的格式，程序就可以正常的执行。我试了好几次，都是如此。
2023-10-06 17:18:14
492
原创 JavaScript实现广告倒计时和跳过广告
最近打开手机上的app，映入眼帘的都是一个几秒的广告，带有倒计时，当然如果不喜欢的话可以点击跳过，跳过广告其实质应该就是关闭广告。以前用JavaScript做过一个定时关闭的广告，于是把代码完善了一下，加上倒计时效果和实现跳过部分的代码。
2023-09-08 19:30:10
877
原创 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
373
1
原创 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
3955
10
原创 MacBookPro安装mysql遇到的几个问题
经过一番折腾，顺利的下载了需要的版本mysql-8.0.31-macos12-x86_64.dmg，双击安装时，系统提示“该软件来源不明，不建议安装”，下载下来却不能安装？用Mac的好处是不用开关机，无弹窗无广告，坏处是在安装某些第三方的软件时，总是和视频教程上的winows版不一致，需要自己上网找资料尝试怎么安装。在安装的过程中，需要输入mysql的输入密码，开始我不想设置复杂的密码，怕给后期自己练习使用添麻烦，所以输了123456，然后finish始终是灰度的不能用。绊绊磕磕的安装成功了。
2023-01-06 15:34:59
1317
原创 PyCharm中设置translation插件为有道翻译
安装完PyCharm后，为了便于后期的学习，我又按照视频教程中所讲安装了translation插件，结果选中需要翻译的单词时，右击，从菜单中选择“翻译”，却翻译不出来，一直在转圈，系统说是因为网速原因。我看了一下，默认的是“谷歌翻译”，我又换成了“微软翻译”，还是不行，一直在转圈。我看选项中还有“有道翻译”，因为我平常一直用有道词典，所以就选了“有道翻译”这一项进行设置。创建完成以后，把应用ID和应用密钥复制粘贴到PyCharm中，完成设置。点了配置，没有账号，新创建了一个有道的账号，然后“创建应用”
2023-01-01 18:47:51
6138
5
原创 mac电脑中设置python3为python运行程序
最近几天心血来潮想学习一下python，安装时倒是很顺利，直接在终端中输入python3，能够正常执行。如果想要使用python命令，而非python3命令运行python程序，需要执行以下命令。于是从网上找办法，原来是MacOS默认的SHELL连接软件是zsh，需要执行chsh命令，把zsh更改为bash。可是按照视频教程里所讲执行这个命令时，终端报错，不能运行。2.查看mac自带的SHELL连接文件，如图所示，有7个。5.运行python，显示如下图所示的界面，问题解决。
2023-01-01 13:38:33
3765
7
原创 Vue2.x版本的购物车改成Vue3.x版本
前段时间学习制作了一个vue2.6.11版本的购物车，今天试着改成了vite（vue3.2.38版本）的。然后把原先vue2.x中出现的文件、组件等都拷贝或替换到新的项目中。网页不能正常运行，逐个报错，按照报错信息，依次安装了缺少的文件。感觉两个版本在子组件向父组件传递数据时有变化，main.js文件跟2.x版相比有变化，其他的没怎么变。
2022-10-08 13:38:55
285
原创 Vue3中样式渗透:deep()为什么无效
问题就出在这个根节点上，如果App.vue中没有这个根节点，那么:deep()不起作用，把根节点加上，:deep()样式就生效了。
2022-10-03 22:13:32
20997
9
原创 创建基于 Vite 的新项目
前些日子学习安装了Vue- CLI，现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。试着安装了一下，感觉更简单了。
2022-10-02 13:48:33
2718
原创 使用v-model绑定属性改变RGB颜色，使用计算属性生成颜色值，演示颜色的变化
最近学习Vue的 计算属性，用到颜色值，经过改造后，发现特别适合用来演示颜色的变化。效果如图所示，只需要拖动滑块，就可以实时看到颜色的变化及其颜色值。
2022-09-25 21:47:42
1010
原创 改变Bootstrap4、Bootstrap5中复选框的颜色
Bootstrap4中复选框颜色的修改要稍微复杂一点，需要使用～兄弟选择器，还要使用::before,所用的类名也不同。原本我参考的代码写的是:active，经测试无效，我抱着试试看的态度改成了:checked,实现了目标效果哦。直接复制下面代码，改改颜色值即可。...
2022-08-15 20:04:07
2425
原创 Vue.config.productionTip = false为什么不起作用？
Vue.config.productionTip = false不起作用
2022-08-12 22:12:34
3628
35
原创 跳动的文字：CSS3动画、倒影、变量
今天看到一个案例，实现文字的动态跳跃，是用CSS3写的，其中用到了animation属性，还学习了一个新属性box-reflect，不过写的时候，在谷歌浏览器中需要用-webkit-box-reflect，可以实现文字的倒影效果，不由得感慨css的功能越来越强大了。效果如下：使用变量的用法我平常用的不多，用变量代替可以使css代码更简洁，值得学习。我做了一下测试，发现倒影的颜色是由span标记里的颜色决定的，倒影-webkit-box-reflect里设置的颜色不起什么作用。......
2022-06-27 19:43:53
780
原创 弹性布局的一个意外发现
今天学习javascript特效，却意外的发现了弹性布局的一个特性，鼠标移入目标区域，会生成一个新的蓝色的层，覆盖这个区域，鼠标离开，这个蓝色的层也会离开并消失。只是在学习的过程中，偶然发现，这个效果的实现还有赖于display:flex,为了让文字在区域内水平和垂直都居中，使用了弹性布局。后来我偶然去掉了display: flex; ，发现蓝色的层经过这个区域的时候，会把文字遮盖住，我把文字的z-index层级设置的最高也没用。...
2022-06-17 18:09:06
169
原创 js实现的带有滚动效果的返回顶部（仿CSDN）
实现了网页右下方常见的“返回顶部”效果。返回顶部用到了一个自定义的函数animate()，这个函数有三个参数，分别是移动过的对象，移动的目标，以及回调函数。这个函数是实现窗口垂直滚动的。程序实现了以下功能：1.右下角css使用fixed定位，这样页面上下滚动时，工具栏不动。2.返回顶部图标初始状态不可见，向下滚动超过500px时，显示，小于500px时，隐藏。3.鼠标移动到返回顶部图标时，图标变为......
2022-06-16 16:23:27
756
原创 原生js实现的放大镜效果
之前看了pink老师的视频，做了图片的放大效果，但是只有放大效果，不完整，后来又学了轮播图案例，把这两个结合起来，实现了完整的放大镜效果。因为点击左右箭头需要滚动，需要用到animate.js文件pink老师的视频中，使用了两张图片，一大一小来实现放大。如果这样子来做的话，加上下面的小图，得需要27张图像，我这里给改了，只使用了一张428像素的图片，只不过使用css改变大小，左侧尺寸400px，右侧放大后的尺寸是800px，这样只需要9*2=18张。......
2022-06-12 11:37:29
374
原创 原生js实现的动态生成表格数据、添加数据、删除数据
该代码实现了以下功能：1.表格中开始呈现的数据是从数组读取数据生成的；2.点击“添加数据”按钮，弹出“添加数据”窗口；3.输入姓名、朝代、事迹，点击“添加”，可在表格后追加一行新的数据；4.点击“删除”，可以删除该行数据。...
2022-06-11 19:21:45
2332
原创 排他思想在轮播图中的应用
之前是在选项卡菜单中用到了排他思想，当前选项卡样式与其他选项卡不同，怎么办呢？先用for循环遍历一遍，把所有的选项卡样式清掉，然后再设置当前的选项卡样式。这两天学习轮播图的制作，发现在轮播图中，多处用到了排他思想。1.点击小圆点时,当前小圆点对应的样式红色（.current），对应的图片显示，其他图片隐藏. for (let i = 0; i < num; i++) { ol.children[i].addEventListener('click', function() { for
2022-05-14 15:52:44
282
原创 js轮播图效果，透明度渐变实现，超链接总是访问最后一个
昨天学习了轮播图的制作，是定义了动画左右滚动实现的，这需要在最后追加一个列表项，以实现无缝滚动。学完后到小米官网看了一下，发现其轮播图不是滚动效果的，我觉得这个实现起来更简单，可以通过设置display或opacity属性实现。我先用了display属性，采用绝对定位，把几张图片重叠在一起，所有列表项初始状态为none，第一项的初始状态为block，当点击某个小圆点时，使用排他思想，所有项状态为display:none，当前项为display:block。程序正常运行了。我又想把css属性换成不透明度o
2022-05-14 14:13:32
819
原创 滑块验证成功后，对勾对号显示为根号
最近学习了一个滑块拖动验证解锁解锁的例子，代码比较好懂，只是遇到了一个问题，验证通过以后，✅在网页中预览的时候，显示成根号的样子。可同样的代码，在我的电脑上显示为根号，在别人的电脑上显示的是对勾，没有任何问题，虽然电脑不同，用的也都是谷歌浏览器。具体什么原因造成的，我还不太确定。后来，这个问题倒是解决了，那就是给滑块的innerHTML赋值的时候，不直接敲成对勾，而是采用特殊字符编码，我从下面这篇文章里HTML特殊字符编码对照表查到了对勾对应的编码是"✓"，这样就可以准确的显示成✅了。源代码使用sli
2022-05-11 09:19:05
869
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人