前端
文章平均质量分 55
Vue3+vite+TypeScript+Pinia+Router+Hooks
J不A秃V头A
一切皆有可能
展开
-
Vue 3:实现页面返回上一页的功能
在Vue 3中,可以使用Vue Router库来实现页面返回上一页的功能。首先,确保你已经安装并设置了Vue Router。这两个方法都可以使浏览器的历史记录回退一步。来获取Vue Router实例。然后,我们定义了一个。函数会被触发,从而使浏览器返回到上一个访问的页面。在这个例子中,我们使用。原创 2024-09-15 00:30:13 · 26 阅读 · 0 评论 -
element-plus表单使用show-overflow-tooltip,避免占满屏幕,需要设置宽度
在表单中,<el-table-clumn>中添加show-overflow-tooltip,可以实现表格内容过多的问题。属性官方解释:是否隐藏额外内容并在单元格悬停时使用 Tooltip 显示它们。原创 2024-09-14 22:27:26 · 64 阅读 · 0 评论 -
el-table:根据 scope.row.type 的值来显示不同的类型
是严格等于操作符,它会检查两边的值和类型是否都相等。这是推荐的做法,因为它可以防止类型强制转换导致的意外行为。,因为字符串 "0" 和数字 0 在类型上是不相等的。如果你的数据源可能包含这种情况,请确保。的值来显示不同的房源类型(转租、短租、长租、招租)的值,并根据该值显示相应的文本。的值不是 0、1、2 或 3,则通过。的值是一个字符串 "0",那么。的类型与你的比较值类型一致。原创 2024-09-13 22:59:34 · 128 阅读 · 0 评论 -
Vue3:el-table实现日期的格式化
后端如果返回的是时间戳,需要我们进行日期格式化例如:2024-09-11T14:19:14在表格中进行使用该工具完成日期解析原创 2024-09-13 20:58:11 · 184 阅读 · 0 评论 -
在Vue中,字符串转换为整数类型
在Vue中,字符串转换为整数类型(Integer)与在纯JavaScript中的操作是一样的,因为Vue是基于JavaScript的。原创 2024-09-13 16:11:15 · 302 阅读 · 0 评论 -
Vue3:实现重置密码和校验功能
通过表单校验,可以实现密码填写的判断是否合规,实现第二次输入密码,保证密码的准确性。原创 2024-09-13 14:53:02 · 245 阅读 · 0 评论 -
Vue 3:检验手机号码的逻辑
在Vue 3中,检验手机号码的逻辑通常涉及到正则表达式(RegExp)的使用。手机号码的格式依赖于你希望支持的地区或国家。以中国大陆的手机号码为例,它们通常是11位数字,以13、14、15、17、18或19开头。以下是一个简单的示例,展示如何在Vue 3组件中检验手机号码的有效性。原创 2024-09-12 20:40:15 · 345 阅读 · 0 评论 -
Vue3进阶:响应性是如何工作的
当你将一个响应式对象的属性赋值或解构到一个本地变量时,访问或赋值该变量是非响应式的,因为它将不再触发源对象上的 get / set 代理。注意这种“断开”只影响变量绑定——如果变量指向一个对象之类的非原始值,那么对该对象的修改仍然是响应式的。如果有,我们会查找到一个存储了所有追踪了该属性的订阅者的 Set,然后将当前这个副作用作为新订阅者添加到该 Set 中。在运行实际的更新之前,这个外部函数会将自己设为当前活跃的副作用。此时,我们已经创建了一个能自动跟踪其依赖的副作用,它会在任意依赖被改动时重新运行。原创 2024-09-12 16:01:20 · 442 阅读 · 0 评论 -
Vue3:响应性调试
Vue 的响应性系统可以自动跟踪依赖关系,但在某些情况下,我们可能希望确切地知道正在跟踪什么,或者是什么导致了组件重新渲染。原创 2024-09-12 15:58:27 · 202 阅读 · 0 评论 -
Vue3:v-model的使用场景-表单输入绑定
在前端处理表单时,我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。另外,v-model还可以用于各种不同类型的输入,<textarea><select>元素。<input><textarea>valueinputcheckedchange<select>valuechange注意v-model会忽略任何表单元素上初始的valuechecked或selectedattribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。原创 2024-09-11 13:28:50 · 1183 阅读 · 0 评论 -
Vue3:回车键实现提交功能
在 Windows 键盘上,meta 键是 Windows 键 (⊞)。在 Sun 微机系统键盘上,meta 是钻石键 (◆)。在某些键盘上,特别是 MIT 和 Lisp 机器的键盘及其后代版本的键盘,如 Knight 键盘,space-cadet 键盘,meta 都被标记为“META”。在 Symbolics 键盘上,meta 也被标识为“META”或“Meta”。你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器,只有当按键被按下时才会触发。事件一起使用时,该按键必须在事件发出时处于按下状态。原创 2024-09-11 13:17:30 · 489 阅读 · 0 评论 -
Vue3:重新赋值来“清空”这个引用ref([])
在 Vue 3 中,如果你使用了 Composition API,特别是ref来创建一个响应式的引用(在这个例子中是一个数组),你可以通过简单地重新赋值来“清空”这个引用。但是,要注意的是,当你这样做时,你实际上是在替换整个引用,而不是仅仅清空数组的内容。这可能会导致依赖于该引用的任何计算属性或侦听器被重新评估,因为它们会检测到引用的变化(即新的内存地址)。然而,如果你只是想要清空数组的内容而不是替换整个引用,你可以直接修改数组的内容。原创 2024-09-10 14:04:43 · 376 阅读 · 0 评论 -
Vue3:条件插槽/作用域插槽
有时你需要根据插槽是否存在来渲染某些内容。你可以结合使用属性与来实现。headerfooter和default。原创 2024-09-10 09:26:22 · 850 阅读 · 0 评论 -
Vue3:具名插槽
时,我们需要一种方式将多个插槽内容传入到各自目标插槽的出口。元素中的所有内容都将被传递到相应的插槽。其意思就是“将这部分模板片段传入子组件的 header 插槽中”。有时在一个组件中包含多个插槽出口是很有用的。的插槽被称为具名插槽 (named slots)。当一个组件同时接收默认插槽和具名插槽时,所有位于顶级的非。节点都被隐式地视为默认插槽的内容。元素可以有一个特殊的 attribute。要为具名插槽传入内容,我们需要使用一个含。出口会隐式地命名为“default”。下面我们给出完整的、向。原创 2024-09-10 09:21:21 · 255 阅读 · 0 评论 -
Vue3:子传父,使用自定义事件(强烈推荐)
在子组件,选择场景触发自定义事件,可以是点击更新等场景再使用声明的事件,emit(事件名,参数)以上就可以实现数据通过子传父的方式。原创 2024-09-09 17:25:09 · 806 阅读 · 0 评论 -
前端消息中间件mitt实战开发运用
如果父组件需要多次引入该子组件,只需要绑定不一样的消息主题,即可实现数据的获取。msgItem是消息主题,子组件会获取该属性,并向该消息主题发送数据。ImageUploader该组件是自定义的图片文件上传工具组件。原创 2024-09-09 14:07:42 · 527 阅读 · 0 评论 -
Vue3:自定义指令
除了 Vue 内置的一系列指令 (比如v-model或v-show) 之外,Vue 还允许你注册自定义的指令 (Custom Directives)。组件和组合式函数。组件是主要的构建模块,而组合式函数则侧重于有状态的逻辑。另一方面,自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。// 在模板中启用 v-focus</script><template>原创 2024-09-08 23:07:57 · 775 阅读 · 0 评论 -
Vue3组件: v-model了解底层并实战运用
这两个选项在从模型引用中读取或设置值时会接收到当前的值,并且它们都应该返回一个经过处理的新值。值且父组件没有为该 prop 提供任何值,会导致父组件与子组件之间不同步。在下面的示例中,父组件的。小节中学到的指定参数与事件名的技巧,我们可以在单个组件实例上创建多个。把这个 ref 绑定到一个原生 input 元素上,在提供相同的。这里是另一个例子,展示了如何在使用多个不同参数的。在某些场景下,你可能想要一个自定义组件的。的返回值,可以在子组件中访问添加到组件。是 undefined,而子组件的。原创 2024-09-08 23:03:01 · 1087 阅读 · 0 评论 -
Vue3+elementplus实现图片上传下载(最强实践)
实现照片的上传,预览,以及转成以逗号隔开的图片地址,即时监听,并发送消息到父组件。引入图片上传子组件,接受消息,并实现挂载之后取消绑定事件,避免占用内存。原创 2024-09-07 22:56:42 · 210 阅读 · 0 评论 -
图片地址携带blob:的原因
在计算机中,Blob常用于数据库中存储二进制文件,但在Web开发中,Blob对象也被广泛用于前端处理二进制数据。:由于Blob URL是由浏览器自动生成的,并且只能在生成它们的文档上下文中使用,因此它们提供了一定程度的安全性。:当图片是通过JavaScript动态生成的,或者从其他源(如Canvas)转换而来时,这些图片数据可以被封装在Blob对象中,并通过Blob URL(即。时,这通常意味着图片数据是以Blob对象的形式存储在浏览器的内存中,而不是直接存储在服务器的文件系统上。原创 2024-09-07 20:34:06 · 449 阅读 · 0 评论 -
使用http-request 属性替代action绑定上传URL
方法的返回值是一个 Promise,如果你的自定义方法不返回 Promise,那么你可能需要手动处理文件列表的更新和错误处理。组件中,如果你需要为上传的 HTTP 请求添加自定义的请求头(例如,为了通过身份验证或满足服务器端的特定要求),你不能直接在。属性允许你完全控制上传的行为,包括如何构建请求、发送请求以及处理响应。这样,你就可以使用像。文件中的函数不支持像上面那样直接传递文件和处理函数,你可能需要调整你的请求发送逻辑,以适应。函数是一个假设的函数,你需要根据你的。组件的默认行为更一致,建议让你的。原创 2024-09-07 18:29:24 · 536 阅读 · 0 评论 -
Vue3:实现路径变量
在你的代码中,你使用了一个占位符{id}来表示 URL 中的动态部分(即房源的 ID),但你的request函数调用并没有正确地替换这个占位符。通常,这种替换不会在request函数(或类似的 HTTP 请求库,如axiosfetch等)的参数中直接完成,而是需要在调用之前对 URL 字符串进行格式化。以下是如何根据你的函数detail。原创 2024-09-06 14:46:21 · 759 阅读 · 0 评论 -
Element Plus(Vue 3 版本)来实现图片轮播
使用 Element Plus(Element UI 的 Vue 3 版本)来实现图片轮播,你可以利用 Element Plus 提供的组件。这个组件提供了一个方便的接口来展示轮播图,包括切换箭头、指示器(小圆点)等。以下是一个基本的示例,展示如何使用 Element Plus 的。原创 2024-09-06 13:55:54 · 624 阅读 · 0 评论 -
Vue3,格式化时间的函数作为组件的方法(methods)、计算属性(computed properties)来使用
确实,在Vue3组件中,你可以将这些用于格式化时间的函数作为组件的方法(methods)来使用,或者更优雅地,作为计算属性(computed properties)来使用,特别是当你需要基于响应式数据动态地格式化时间时。原创 2024-09-06 10:44:35 · 635 阅读 · 0 评论 -
Vue3时间戳“2024-08-16T14:29:19“转换为不同的时间格式
在Vue3中,将时间字符串"2024-08-16T14:29:19"转换为不同的时间格式,可以通过JavaScript的Date对象和相关方法来实现。原创 2024-09-06 10:34:43 · 386 阅读 · 0 评论 -
Vue3进阶:异步状态示例
在做异步数据请求时,我们常常需要处理不同的状态:加载中、加载成功和加载失败。如果在每个需要获取数据的组件中都要重复这种模式,那就太繁琐了。原创 2024-09-05 22:31:39 · 731 阅读 · 0 评论 -
Vue3:组合式函数使用场景
在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用的函数。当构建前端应用时,我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间,我们可能会抽取一个可复用的日期格式化函数。这个函数封装了:它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多,比如你可能已经用过的或是。相比之下,有状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。原创 2024-09-05 22:28:42 · 613 阅读 · 0 评论 -
Vue3实现elementplus实现分页查询,组合式API写法
在Vue 3中使用Element Plus实现分页查询时,通常会利用组合式API(Composition API)来组织代码,使得逻辑更加清晰和模块化。以下是一个基本的示例,展示了如何在Vue 3项目中结合Element Plus的分页组件和组合式API来实现分页查询功能。首先,确保你的项目中已经安装了Vue 3和Element Plus。这样,你就完成了一个基本的分页查询功能的实现。原创 2024-09-04 20:08:12 · 541 阅读 · 0 评论 -
value值没有根据下拉选择而改变
如果你不想使用计算属性,或者你需要执行一些额外的逻辑来更新。只是一个普通的 JavaScript 变量,它接收了。这种方法适用于你不需要在多个地方或组件中持久保持。来创建一个响应式的属性,该属性会自动根据。变化时执行额外的逻辑,并且你可以直接修改。中保持它的响应性,你可以直接在需要时传递。是一个计算属性,你不能直接修改它(即。如果你只是在某些函数或操作中需要。的值并不会自动更新,因为。的初始值,但之后就不再与。你可以使用 Vue 3 的。是一个 Vue 3 的。这里的关键是,当你改变。的响应性状态的情况。原创 2024-09-04 17:37:46 · 449 阅读 · 0 评论 -
Vue 3结合Element Plus中,实现一个级联选择器(Cascader)来展示省市区
在Vue 3结合Element Plus中,实现一个级联选择器(Cascader)来展示省市区(甚至到更细分的级别,如街道、小区等)的联动选择是一个常见的需求。Element Plus的Cascader组件非常适合这样的场景,因为它支持多级联动。以下是一个基本的步骤和示例,说明如何在Vue 3项目中使用Element Plus的Cascader组件来实现省市区(甚至更多级)的联动选择。原创 2024-09-04 09:32:48 · 926 阅读 · 0 评论 -
使用Pinia作为状态管理库来存储用户登录的token
在Vue.js应用中,使用Pinia作为状态管理库来存储用户登录的token是一种常见且推荐的做法。Pinia提供了比Vuex更加简洁和强大的API,特别适合于Vue 3。原创 2024-09-03 11:05:10 · 805 阅读 · 0 评论 -
Element Plus设置表单字段为必填
在使用 Element Plus(一个基于 Vue 3 的 Element UI 组件库)时,设置表单字段为必填通常涉及到两个方面:表单验证(Validation)和表单字段的提示信息。Element Plus 提供了强大的表单验证功能,通过。如果验证通过,则执行相应的操作(如提交表单);来表示该字段为必填项,并定义了当该字段为空时显示的提示信息。在这个示例中,我们定义了一个包含用户名和邮箱的表单。字段,我们同样设置了必填规则,并额外添加了邮箱格式验证。属性定义了触发验证的时机,方法中,我们通过调用。原创 2024-09-03 10:01:17 · 582 阅读 · 0 评论 -
elementplus表单位置居中
要使Element Plus表单居中显示,可以使用Flexbox布局。确保表单至少有100%的视口高度,即使内容不够也会占满整个视口。属性来使表单在页面中水平和垂直居中。是为了让表单项垂直排列。原创 2024-09-02 17:30:10 · 555 阅读 · 0 评论 -
项目中使用 Element Plus
Element Plus 提供了基于 ES Module 的开箱即用的。如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。在引入 ElementPlus 时,可以传入一个包含。并且只使用组件 API,你需要手动导入样式。您需要使用额外的插件来导入要使用的组件。,然后您就可以使用打包工具,例如。如果您使用 Volar,请在。用于设置表单组件的默认尺寸,然后把下列代码插入到你的。用于设置弹出组件的层级,) 和配置工具,请参考。属性的全局配置对象。原创 2024-09-02 11:18:09 · 733 阅读 · 0 评论 -
npm 下载依赖慢的解决方案(亲测有效)
当使用npm下载依赖包时遇到速度过慢的问题,可以尝试更换npm镜像源、使用cnpm或yarn、检查网络环境或使用npm加速工具等方法来解决。如果问题仍然存在,可能需要进一步检查npm的配置或咨询相关技术支持。原创 2024-09-02 09:39:54 · 1149 阅读 · 0 评论 -
router实现数据获取
有时候,进入某个路由后,需要从服务器获取数据。例如,在渲染用户信息时,你需要从服务器获取用户的数据。:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。从技术角度讲,两种方式都不错 —— 就看你想要的用户体验是哪种。原创 2024-09-01 00:17:28 · 275 阅读 · 0 评论 -
Vscode推送代码到 Gitee
在Visual Studio Code (VSCode) 中推送代码到 Gitee(一个类似于 GitHub 的代码托管平台,主要面向中国开发者)可以通过以下步骤完成。这通常涉及到使用 Git 作为版本控制系统,并通过 SSH 或 HTTPS 方式与 Gitee 仓库进行交互。原创 2024-09-01 00:15:25 · 392 阅读 · 0 评论 -
RouterView 插槽
RotuerView 组件暴露了一个插槽,可以用来渲染路由组件:template上面的代码等价于不带插槽的,但是当我们想要获得其他功能时,插槽提供了额外的扩展性。原创 2024-08-31 21:19:09 · 362 阅读 · 0 评论 -
Vue Router 和 组合式 API
Vue 的的引入开辟了新的可能性,但要想充分发挥 Vue Router 的潜力,我们需要使用一些新的函数来代替访问this和组件内导航守卫。原创 2024-08-31 21:21:53 · 684 阅读 · 0 评论 -
Vue3项目模块划分
原创 2024-08-30 23:28:17 · 241 阅读 · 0 评论