自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(159)
  • 收藏
  • 关注

原创 浏览器缓存小知识

浏览器缓存是指浏览器在本地磁盘对用户已访问过的网页资源进行存储,以便在用户再次访问同一网页时可以直接从本地加载,而不需要再次从服务器请求数据,从而提高页面加载速度,降低服务器压力和带宽消耗。浏览器缓存是提高网站性能的重要手段之一。合理利用缓存可以显著减少网络传输,加快页面加载速度,改善用户体验。同时也可以减轻服务器压力,降低网站带宽成本。

2024-07-23 08:30:00 403

原创 js函数eval()

eval() 是 JavaScript 中的一个全局函数,它可以将传入的字符串当作 JavaScript 代码来执行。其中,string 是要执行的 JavaScript 代码字符串。eval() 函数会返回最后一个表达式的结果。

2024-07-23 08:00:00 551

原创 css hack原理以及常用hack

CSS hack 是一种在网页开发中常用的技术,用于解决不同浏览器之间的兼容性问题。由于不同浏览器对 CSS 的解析和渲染可能存在差异,开发者需要使用一些特殊的技巧来确保网页在各种浏览器中都能正常显示。

2024-07-22 19:28:00 384

原创 vue3+ts实现复杂表单组件

【代码】vue3+ts实现复杂表单组件。

2024-07-22 08:00:00 203

原创 文本溢出显示省略号

要在微信小程序中实现文本只在一行展示,超出内容用省略号,可以使用CSS的text-overflow属性。

2024-07-21 17:07:13 177

原创 使用Vue 3 + ts 实现可动态添加行的表格表单

【代码】使用Vue 3 + ts 实现可动态添加行的表格表单。

2024-07-21 16:41:45 245

原创 el-select实现本地搜索数据

el-select 组件可以通过设置 filterable 属性来实现本地搜索数据。方法来筛选那些标签包含查询字符串的选项(不区分大小写)。方法中,我们根据输入的查询字符串。,这样就可以只显示过滤后的选项。来绑定一个自定义的过滤方法。数组来存储所有选项,以及。数组来存储过滤后的选项。为空,我们显示所有选项。属性来启用过滤功能。

2024-07-19 21:58:26 259

原创 css hack原理以及常用hack

CSS hack 是一种在网页开发中常用的技术,用于解决不同浏览器之间的兼容性问题。由于不同浏览器对 CSS 的解析和渲染可能存在差异,开发者需要使用一些特殊的技巧来确保网页在各种浏览器中都能正常显示。

2024-07-19 21:38:22 568

原创 微信小程序实现省市区级联选择组件

微信小程序实现省市区级联选择组件

2024-07-16 22:51:31 604

原创 Vue 3 + ts 实现省市区级联选择组件

【代码】Vue 3 + ts 实现省市区级联选择组件。

2024-07-16 22:16:46 174

原创 vue3+ts实现一个表单组件

首先,创建一个表单组件,包括姓名、手机号、年龄、学校、性别等基本信息的输入框,并添加省市区和街道地点的选择功能。2. 实现数据加载和交互逻辑在上述代码中,使用了Vue 3的Composition API结合TypeScript来管理表单数据、验证规则、组件交互等。确保通过axios调用后端接口来获取省市区和街道数据,并在选择省市区时加载相应的街道数据。在提交表单时,将表单数据以JSON格式发送到后端处理。

2024-07-07 23:10:16 1079

原创 表单代码示例

<template> <el-form ref="form" :model="formData" :rules="formRules" label-width="100px"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form

2024-07-07 22:36:20 997

原创 优雅降级和渐进增强

在网页开发中,渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面,满足最基本的功能,再针对高级浏 览器进行效果,交互,追加各种功能以达到更好用户体验,换句话说,就是以最低要求,实现最基础功能为基本,向上兼容。设计和开发人员首先关注基本的HTML和CSS,确保网站在所有浏览器和设备上都能正确显示和访问。然后,他们会逐步添加JavaScript和其他高级技术,以增强网站的功能和设计。优点:网站在所有浏览器和设备上都能够提供基本的功能和可访问性。

2024-06-17 08:30:00 632

原创 watch详解

Vue.js中的`watch`选项允许你监听Vue实例的数据变化,并在数据变化时执行自定义的逻辑。`watch`的使用场景非常广泛,它可以用来处理诸如数据的验证、异步操作、路由跳转、动画等各种需求。在本文中,我将详细介绍`watch`的用途以及如何在实际项目中应用它。

2024-06-16 15:54:42 784

原创 事件循环中的宏任务以及微任务

它的核心是一个循环,不断地从任务队列中取出任务并执行,直到任务队列为空。:微任务队列用于存放微任务,在宏任务执行完毕后立即执行。微任务队列的优先级高于宏任务队列,即在执行微任务时,不会执行宏任务。:宏任务队列用于存放宏任务,在事件循环中执行。当执行栈为空时,事件循环会从宏任务队列中取出一个宏任务,放入执行栈中执行。在执行完微任务后,会进行页面的重新渲染,然后等待下一个宏任务的执行。当前宏任务执行结束,检查微任务队列,执行微任务 “Promise 1”。微任务是宏任务执行结束后立即执行的任务。

2024-06-11 08:30:00 694

原创 vue中nextTick的用处和实际运用

nextTicknextTick是 Vue.js 中一个非常有用的方法,它可以让你在 DOM 更新之后执行一段代码,确保你操作的是最新的数据和 DOM 元素。你可以在操作 DOM 元素、使用 Vue 的$refs、在 Watcher 中使用、解决异步更新导致的问题等场景下使用nextTick。通过合理地使用nextTick,你可以更好地控制 Vue.js 应用的行为,避免一些由于异步更新导致的问题,提升用户体验和开发效率。

2024-06-11 07:30:00 791

原创 vue项目中不同接口使用不同的域名

在Vue项目中,可以通过配置axios(或者其他HTTP请求库)来实现不同接口使用不同域名的接口。

2024-06-10 14:40:08 347

原创 使用vue3+ts封装仪表盘形进度条

在这个组件中,使用了Vue 3的Composition API,特别是。语法,这允许我们在组件中直接定义响应式数据和逻辑,而不需要额外的。来创建仪表盘的背景,并设置了一个白色的圆圈作为仪表盘的指针。元素来创建仪表盘的外观,并通过内联样式动态地设置。属性,它表示进度条的当前值。,用于在进度条的值改变时通知父组件。变量,这个变量控制了仪表盘的进度。部分,定义了仪表盘的样式,使用。

2024-06-10 14:26:16 182

原创 使用vue3+ts封装环形进度条组件

在这个组件中,使用了CSS变量和内联样式来动态设置进度条的进度。通过CSS动画来旋转,并且其边框颜色会根据进度值的变化而变化。部分,定义了样式,包括动画和根据进度值变化的边框颜色。可以将这个组件导入到其他Vue组件中使用,并通过。属性来设置进度条的进度。部分定义了组件的属性,并使用。元素来包裹一个圆形的。

2024-06-09 11:45:26 405

原创 使用vue3+ts封装一个Switch开关组件

在这个组件中,使用了 Vue 3 的 Composition API 和 TypeScript。组件的样式部分定义了开关的外观,包括开关本身和按钮的样式,以及开关打开和关闭时的不同状态。prop,这样就可以实现双向数据绑定。响应式引用,它代表了开关的状态。事件,以实现双向数据绑定。在这个父组件中,使用了。

2024-06-09 11:20:23 301 1

原创 使用vue3+ts封装一个Slider滑块组件

语法,它允许我们在单文件组件中使用 Composition API,而不需要额外的。方法来处理滑块的输入事件,并在值改变时更新。,它会在滑块的值改变时被触发,并传递新的值。可以将这个组件导入到其他 Vue 组件中。在这个组件中,使用了 Vue 3 的。来定义组件的 props,使用。来定义组件可以触发的事件。元素来创建滑块,并使用。在模板中,使用了一个。

2024-06-08 22:33:40 346

原创 使用vue3+ts封装一个自动补全输入框Autocomplete组件

的文件,在这个组件中,使用了 Vue 3 的 Composition API,包括。作为 props,并根据这些 props 来渲染输入框和下拉菜单。

2024-06-08 22:21:46 347

原创 vue3+ts封装一个button组件

指令来绑定按钮的类名和禁用状态,使用。创建一个新的Button组件文件。指令来监听按钮的点击事件,并使用。属性来确保样式只应用于当前组件。属性定义了组件的输入属性,包括。来动态生成按钮的类名,以及一个。标签中定义了按钮的样式,使用了。接口来描述组件的属性,并使用。属性是否存在来显示图标,使用。方法来处理按钮的点击事件。在这个组件中,定义了一个。还定义了一个计算属性。

2024-06-01 16:10:29 205

原创 父子组件通信

都支持通过属性(propertiesprops)向子组件传递数据。都支持通过事件(events$emit)从子组件向父组件传递消息。微信小程序使用Component构造函数来定义组件,而Vue使用或单文件组件。Vue3提供了组合式API,使得组件的定义和通信更加灵活和模块化。

2024-06-01 15:47:13 435

原创 em,rem,vw,vh,px,rpx,%的用法

条件,可以实现子组件的重新渲染。这种方法比较简单,但可能会导致组件频繁地销毁和重建。来监听父组件传递的数据,一旦数据发生变化,子组件就会重新渲染。监听这个事件,并在事件处理函数中调用。触发一个事件,然后在子组件中使用。在父组件中改变数据后,通过。来强制子组件重新渲染。

2024-05-25 17:38:36 410

原创 uniapp中,当页面显示时触发子组件的重新渲染

条件,可以实现子组件的重新渲染。这种方法比较简单,但可能会导致组件频繁地销毁和重建。来监听父组件传递的数据,一旦数据发生变化,子组件就会重新渲染。监听这个事件,并在事件处理函数中调用。触发一个事件,然后在子组件中使用。在父组件中改变数据后,通过。来强制子组件重新渲染。

2024-05-24 08:15:00 575

原创 UniApp中,在页面显示时触发子组件的重新渲染

钩子中改变传递给子组件的props值,这样也可以触发子组件的重新渲染。但是,通常不建议直接修改props,而是应该通过事件或者方法来通知子组件更新数据。或者计算属性,那么在父组件中改变props或者调用子组件的方法也会触发这些监听器或计算属性的更新,从而导致子组件的重新渲染。在UniApp中,要在页面显示时触发子组件的重新渲染,可以利用生命周期钩子函数来实现。生命周期钩子中调用子组件的方法或者改变子组件的props,从而触发子组件的重新渲染。数据,触发子组件的重新渲染。方法,从而更新子组件的。

2024-05-24 07:30:00 574

原创 微信小程序中页面显示时触发子组件的重新渲染

生命周期函数中,调用子组件的方法或者改变子组件的数据,从而触发子组件的重新渲染。触发子组件中的这个事件,子组件监听到事件后进行相应的处理,从而实现重新渲染。监听数据变化,当页面显示时,通过改变子组件的数据来触发。如果子组件的数据依赖于父组件的数据,可以在父组件的。改变父组件的数据,从而间接触发子组件的重新渲染。在子组件中定义一个事件,当页面显示时,父组件通过。生命周期函数中,通过。,从而实现重新渲染。

2024-05-23 23:23:44 971

原创 水平垂直居中的六种方法

使用 display: table 和 display: table-cell 可以模拟表格布局来居中元素。对于单行文本,可以通过设置 line-height 等于容器的高度来实现垂直居中。Flexbox 是一个现代的布局模型,可以轻松实现元素的水平和垂直居中。CSS Grid 是另一种强大的布局系统,也可以用来居中元素。通过绝对定位和 transform 属性,可以实现元素的居中。通过计算元素的偏移量,可以实现居中。

2024-05-23 22:30:29 372

原创 vue3+ts购物车demo

【代码】vue3+ts购物车demo。

2024-05-22 08:15:00 911

原创 vue3+ts实现幻灯片效果

【代码】vue3+ts实现幻灯片效果。

2024-05-21 22:30:21 459

原创 vue3+ts实现一个下拉选择框组件,支持搜索和多级联动

来定义组件可以触发的事件。或事件监听来与这个子组件进行交互。来管理数据和计算属性,以及。来监听数据变化并更新父组件。在这个组件中,我们使用了。

2024-05-21 22:12:10 670

原创 vue3+ts实现文件上传

vue3+ts上传文件。

2024-05-11 18:30:00 377

原创 vue3+ts父子通信

在Vue 3中,使用TypeScript进行父子组件通信的方式与使用JavaScript是类似的,只是需要注意类型的声明。prop,并在子组件中的点击事件时更新父组件的状态。是在子组件中用于声明props和emits的函数。

2024-05-11 09:00:00 237

原创 微信小程序父子组件通信

属性传值是最常见、也是最基础的父子组件通信方式之一。在微信小程序中,父组件可以通过在子组件上绑定属性的方式向子组件传递数据,子组件则可以通过监听属性的变化来获取父组件传递过来的数据。除了通过属性传值外,父组件还可以通过事件的方式与子组件进行通信。父组件可以向子组件发送事件,并传递需要的数据,子组件则可以通过监听事件来接收数据并进行相应的处理。

2024-05-10 22:03:56 635

原创 从0到1开发一个vue3+ts项目(一)

在组件定义对象中,可以通过 “emits” 属性将 “defineEmits” 返回的值传递给组件,从而指定该组件可以触发的自定义事件。

2024-05-10 21:53:20 877

原创 HTML5新标签与特性

例如我们创建了一个名为demo.appcache的文件,然后在需要应用缓存在页面的根元素(html)添加属性manifest=“demo.appcache”,路径要保证正确。在现实开发中,通过调用第三方API(如百度地图)来实现地理定位信息,这些API都是基于用户当前位置的,并将用位置位置(经/纬度)当做参数传递,就可以实现相应的功能。随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。

2024-05-09 07:00:00 834

原创 js基础知识总结

什么是变量变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据为什么要使用变量使用变量可以方便的获取或者修改内存中的数据把一段相对独立的具有特定功能的代码块封装起来,形成一个独立实体,就是函数,起个名字(函数名),在后续开发中可以反复调用函数的作用就是封装一段代码,将来可以重复使用函数声明function 函数名() {// 函数体函数表达式// 函数体特点:函数声明的时候,函数体并不会执行,只要当函数被调用的时候才会执行。

2024-05-08 08:45:00 663

原创 html知识总结

浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。渲染引擎 它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。JS 引擎 则是解析 Javascript 语言,执行 javascript语言来实现网页的动态效果。

2024-05-08 07:30:00 521

原创 前端权限控制

分享一些在Vue项目中实现权限控制的方法。

2024-05-07 09:44:53 759

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除