- 博客(132)
- 收藏
- 关注
RSS订阅原创 微信小程序中页面显示时触发子组件的重新渲染
生命周期函数中，调用子组件的方法或者改变子组件的数据，从而触发子组件的重新渲染。触发子组件中的这个事件，子组件监听到事件后进行相应的处理，从而实现重新渲染。监听数据变化，当页面显示时，通过改变子组件的数据来触发。如果子组件的数据依赖于父组件的数据，可以在父组件的。改变父组件的数据，从而间接触发子组件的重新渲染。在子组件中定义一个事件，当页面显示时，父组件通过。生命周期函数中，通过。，从而实现重新渲染。
2024-05-23 23:23:44
390
原创 水平垂直居中的六种方法
使用 display: table 和 display: table-cell 可以模拟表格布局来居中元素。对于单行文本，可以通过设置 line-height 等于容器的高度来实现垂直居中。Flexbox 是一个现代的布局模型，可以轻松实现元素的水平和垂直居中。CSS Grid 是另一种强大的布局系统，也可以用来居中元素。通过绝对定位和 transform 属性，可以实现元素的居中。通过计算元素的偏移量，可以实现居中。
2024-05-23 22:30:29
81
原创 vue3+ts实现一个下拉选择框组件，支持搜索和多级联动
来定义组件可以触发的事件。或事件监听来与这个子组件进行交互。来管理数据和计算属性，以及。来监听数据变化并更新父组件。在这个组件中，我们使用了。
2024-05-21 22:12:10
332
原创 vue3+ts父子通信
在Vue 3中，使用TypeScript进行父子组件通信的方式与使用JavaScript是类似的，只是需要注意类型的声明。prop，并在子组件中的点击事件时更新父组件的状态。是在子组件中用于声明props和emits的函数。
2024-05-11 09:00:00
191
原创 微信小程序父子组件通信
属性传值是最常见、也是最基础的父子组件通信方式之一。在微信小程序中，父组件可以通过在子组件上绑定属性的方式向子组件传递数据，子组件则可以通过监听属性的变化来获取父组件传递过来的数据。除了通过属性传值外，父组件还可以通过事件的方式与子组件进行通信。父组件可以向子组件发送事件，并传递需要的数据，子组件则可以通过监听事件来接收数据并进行相应的处理。
2024-05-10 22:03:56
555
原创 从0到1开发一个vue3+ts项目（一）
在组件定义对象中，可以通过 “emits” 属性将 “defineEmits” 返回的值传递给组件，从而指定该组件可以触发的自定义事件。
2024-05-10 21:53:20
757
原创 HTML5新标签与特性
例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest=“demo.appcache”，路径要保证正确。在现实开发中，通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能。随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
2024-05-09 07:00:00
818
原创 js基础知识总结
什么是变量变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据为什么要使用变量使用变量可以方便的获取或者修改内存中的数据把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用函数的作用就是封装一段代码，将来可以重复使用函数声明function 函数名() {// 函数体函数表达式// 函数体特点：函数声明的时候，函数体并不会执行，只要当函数被调用的时候才会执行。
2024-05-08 08:45:00
647
原创 html知识总结
浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。JS 引擎 则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。
2024-05-08 07:30:00
516
原创 css有哪五种定位
元素在跨越特定阈值前是相对定位的，之后变为固定定位。元素相对于视窗进行定位，因此滚动页面时，它的位置不会改变。通过固定定位，可以创建固定在页面某个位置的元素，比如导航栏或悬浮广告。它们只对使用了相对定位、绝对定位、固定定位或粘性定位的元素有效。使用固定定位时要注意，元素固定在浏览器视窗中，可能会导致长内容的页面出现不必要的滚动条。这样，子元素相对于父元素进行绝对定位，即子绝父相。绝对定位和固定定位会使元素脱离正常文档流，这可能会影响其他元素的布局。使用大量定位元素可能会影响页面的性能，特别是在移动设备上。
2024-05-07 07:45:00
1281
原创 min-height与max-height的运用
min-height属性用于设置元素的最小高度。当元素的内容不足以填满min-height时，元素会扩展以适应这个最小高度。max-height属性用于设置元素的最大高度。当内容超出这个高度时，元素会出现滚动条以便浏览超出部分。
2024-05-06 08:45:00
336
原创 min-width与max-width的运用
如果元素的内容小于指定的最大宽度，则元素的宽度将根据内容自动调整。但如果元素的内容大于指定的最大宽度，则元素的宽度将被限制在指定的最大宽度内。通过在媒体查询中结合max-width和min-width，可以根据不同的屏幕尺寸应用不同的样式，从而实现针对特定设备的定制化布局和外观。但如果元素的内容小于指定的最小宽度，则元素的宽度将被设置为指定的最小宽度。在响应式网页设计中，"max-width"和"min-width"经常用于创建自适应布局，以确保网页在不同屏幕尺寸下都能够呈现出良好的布局和用户体验。
2024-05-06 08:30:00
812
原创 面试官：flex：1代表什么
例如，我们可以将一个导航栏中的项目设置为flex: 1，这样它们就会自动平分导航栏的宽度，无论导航栏的宽度是多少，都能够保持平均分配。通常情况下，我们会使用flex的简写形式，即通过一个值来同时设置flex-grow、flex-shrink和flex-basis。“flex” 属性是一个简写属性，包含了 “flex-grow”、“flex-shrink” 和 “flex-basis” 这三个属性的值。flex-shrink：指定项目在空间不足时的收缩比例，默认值为1，表示项目会按比例收缩。
2024-05-05 22:32:34
433
原创 如何在onshow中让子组件重新加载
因此页面返回上一级页面时，必定会触发onShow函数，可以在该函数给子组件传递参数来实现子组件的重新加载。当前页面返回上一级页面时，上一级页面显示，会触发页面生命周期函数onShow。当前页面返回上一级页面时，子组件的生命周期函数mounted并不会重新加载。在开发uniapp过程中，当从当前页面返回上一级页面时，页面的子组件数据没有重新加载，导致没有展示最新数据。通过在父组件的onShow钩子函数中向子组件传递一个参数，从而触发子组件的更新.在父组件的。属性的值，从而触发子组件的更新。
2024-05-05 22:21:40
487
原创 vue3+ts实现表格单元格编辑功能
方法来更新表格的可编辑状态。当表格中的单元格数据发生改变时，会触发。// 在这里可以对单元格数据进行处理，比如保存到后端或者做其他操作。属性用来配置编辑时的样式和允许编辑的列。方法，可以在这个方法中对单元格数据进行处理。// 处理 Switch 组件状态改变事件。组件来控制表格的可编辑状态，并且使用。// 控制表格是否可编辑的开关状态。属性来控制表格是否可编辑，而。// 处理表格单元格数据改变事件。组件的状态发生改变时，会触发。
2024-04-14 22:05:16
454
原创 实现文章内容过多时的展开收起效果
通过计算文章内容的高度来确定是否需要显示展开按钮，然后根据用户的点击来展开或收起文章内容。'文章内容，这里是一段很长的文章内容。文章内容，这里是一段很长的文章内容。文章内容，这里是一段很长的文章内容。判断文章内容是否溢出，如果溢出则显示展开按钮。然后根据用户点击来切换。的值，以展开或收起文章内容。，可以调整文章内容的最大高度。
2024-04-14 21:56:05
389
原创 前端项目边界处理
在前端开发中，边界处理是非常重要的一个部分。边界处理涉及到错误处理、输入验证、 边界情况处理等。一个良好的边界处理可以提高用户体验，保证系统的稳定性和安全性。
2024-03-15 22:44:31
665
原创 前端代码整洁与规范之js篇
常见的代码检查工具有ESLint、JSLint等，这些工具可以帮助开发者发现代码中的潜在问题，并提供修改建议。同时，避免使用过长或过于复杂的命名，可以适当使用缩写，但要确保缩写是容易理解和记忆的。函数是代码的基本组成单位之一，一个良好的函数定义可以提高代码的可读性，减少重复性代码。变量命名是代码可读性的重要因素之一，良好的变量命名可以让他人更容易理解代码逻辑。代码复用是提高代码质量和开发效率的关键之一，避免代码重复可以减少代码的维护成本。良好的代码格式化可以提高代码的可读性，使代码更加整洁。
2024-03-15 08:15:00
1127
原创 前端代码整洁与规范之CSS篇
CSS 类名的命名应该简洁清晰，能够准确描述元素的作用。避免使用无意义的名称，例如“a”、“b”等，而应该使用有意义的英文单词或单词缩写。同时，也要避免使用驼峰命名法和下划线命名法混杂使用，要保持一致性。CSS 代码的缩进对代码的可读性和语义性有很大的影响。建议使用四个空格或两个空格的缩进，而不是制表符。代码缩进应该有层次感，使代码结构清晰易读。在编写 CSS 代码时，应该避免冗余的代码。尽量将通用的样式合并在一起，避免重复定义样式。同时，也要避免不必要的样式设置，保持代码精简。
2024-03-14 23:02:36
322
原创 前端代码整洁与规范之HTML篇
在为HTML元素添加class和id时，应该尽量使用语义化的命名，以便更好地描述元素的用途和作用。避免使用无意义的名称，提倡使用具有描述性的class和id名称，这样可以提高代码的可维护性和可读性。注释应该简洁明了，避免冗长和无关的内容。在编写HTML代码时，标签应该按照正确的嵌套规则来使用，即每个标签都应该有正确的开始标签和结束标签。在编写HTML代码时，应该尽量使用小写字母来书写标签和属性，因为HTML是不区分大小写的。在编写HTML代码时，我们应该尽可能使用语义化的标签来描述页面的结构和内容。
2024-03-12 20:56:27
341
原创 如何解决浏览器兼容问题2.0
在HTML标签、属性等方面也存在兼容性问题，尤其是在HTML5中新增了很多新的标签和属性，不同浏览器对其支持程度也不同。
2024-03-12 20:51:48
1320
原创 浏览器内核小知识
不同的浏览器使用不同的内核，例如Chrome使用的是Blink内核，Firefox使用的是Gecko内核，Safari使用的是WebKit内核。JavaScript执行：如果页面中有JavaScript代码，浏览器内核会调用JavaScript引擎来解析和执行代码，实现交互和动态效果。兼容性差异：由于不同的浏览器内核对网页的解析方式不同，可能会导致网页在不同浏览器上显示效果不一致，也会出现兼容性问题。页面渲染效果不同：不同的浏览器内核在渲染页面时可能会有差异，导致页面显示效果不同，例如布局、字体渲染等。
2024-03-11 20:46:08
599
原创 vue3+ts实现倒计时组件
该组件将显示一个倒计时，直到给定目标日期（在此示例中是2022年12月25日）。组件将显示剩余的天数，小时数，分钟数和秒数。倒计时会每秒更新一次，直到倒计时结束。
2024-03-10 12:09:20
459
原创 开发小需求：页面滚动一定距离后，顶部导航栏消失
在Vue3和TypeScript中实现网站顶部导航栏固定，并在页面滚动大于200px时，顶部导航栏消失，出现新的固定在顶部的导航栏。
2024-03-10 12:08:27
428
原创 vue3+ts实现一个简单的音乐组件，包括播放、暂停、切换歌曲
这个简单的音乐播放器组件包括一个音频元素（audio）和几个按钮，可以实现播放、暂停和切换歌曲的功能。播放器展示当前播放的歌曲标题和歌手，同时提供一个下拉菜单来选择要播放的歌曲。播放、暂停和切换歌曲的功能通过调用相关的方法来实现。每个歌曲是一个对象，包括id、标题、艺术家名称和URL。
2024-03-04 23:19:49
690
原创 vue3+ts实现表格的增删改查（二）
每一行数据都包含一个"Edit"按钮和一个"Delete"按钮，点击这些按钮会调用相应的方法来编辑或删除数据。表格下方有一个"Toggle Form"按钮，点击该按钮可以切换显示/隐藏添加数据的表单。// 假设接口返回的数据格式为 { data: Item }// 假设接口返回的数据格式为 { data: Item }方法调用后端接口获取数据，并将返回的数据赋值给。方法调用后端接口添加数据，并将返回的数据添加到。// 调用后端接口添加数据。// 调用后端接口编辑数据。// 调用后端接口删除数据。
2024-03-03 12:24:43
676
原创 Vue3实现tab切换
最终效果就是点击不同的选项卡会切换到对应的内容，并且选中的选项卡文字带下划线，下划线宽度比文字宽度短，并且与文字居中。这三个响应式变量，分别存储选项卡的文字、内容以及当前选中的选项卡索引。当点击某个选项卡时，调用。在样式中，我们定义了选项卡的样式，并且通过。的值，从而更新选项卡的样式。来控制显示对应选项卡的内容。函数来切换选项卡，并更新。
2024-03-02 23:31:02
921
原创 Vue2实现tab切换
以下代码实现了一个tab切换的功能，点击不同的tab会切换到对应的内容，并且选中的tab文字带下划线，下划线宽度比文字宽度短，并且与文字居中。
2024-03-02 23:16:06
435
原创 vue3实现可编辑表格
属性的值来判断是显示“Edit”按钮还是“Save”按钮。数组中添加一个空的行，点击“Edit”按钮会将对应行的。在每一行中，使用条件渲染来显示不同的按钮，根据。数组，该数组包含了表格的数据。属性，用于控制该行是否可编辑。指令在表格中渲染每一行，并使用。点击“Add Row”按钮会在。，点击“Delete”按钮会从。，点击“Save”按钮会将。指令绑定每个输入框的值到。函数来创建一个响应式的。
2024-03-01 22:58:27
723
原创 vue3+ts实现图片预览功能
首先，需要创建一个Vue组件，用于显示图片和预览图。在父组件中使用这个图片预览组件。数组，将每个图片的路径传递给。当用户将鼠标悬停在图片上时，当用户将鼠标移出图片时，在父组件中，通过遍历。
2024-03-01 22:57:26
468
原创 vue3+ts实现Tab滚动居中
来实现水平滚动的效果。每个Tab元素设置了一些基本的样式，激活的Tab元素设置了加粗的字体。和当前激活的Tab元素的引用，然后计算出滚动的位置，使激活的Tab居中显示。最后，在样式中设置了容器的宽度为100%，并设置了。方法来初始化时居中显示当前激活的Tab。方法来将新的激活Tab居中显示。方法中，切换Tab时，会更新。方法来实现滚动效果。
2024-02-29 21:06:03
536
原创 轮询的知识点
在前端开发中，轮询是一种常见的技术手段，用于定期向服务器发送请求以获取最新数据或状态更新。通过轮询，前端可以实时获取服务器端的数据变化或者定刷新页面内容，从而提高用户体验和页面的实时性。在实际应用中，前端轮询通常会使用定时器来定期发送请求。在前端开发中，轮询通常用于实时监控系统、实时数据展示、在线聊天、定时通知等场景。通过轮询，前端可以定期向服务器请求最新数据，并将其展示给用户。前端轮询是一种简单易用的前端技术，可以用于实现实时更新数据的效果。然而，它也有一些缺点，如增加服务器负载和网络流量。
2024-02-28 08:30:00
913
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人