vue3
文章平均质量分 68
奥特曼
这个作者很懒,什么都没留下…
展开
-
Vue3 Hooks函数使用及封装思想
专业解释:Vue 3中的Hooks函数是一种用于在组件中共享可复用逻辑的方式。大白话:将单独功能的js代码抽离出来, 加工成公共函数,从而达到逻辑复用。对Vue社区调研,了解了许多使用Vue的开发者对于更好的组件逻辑组织方式的期望。对React Hooks和其他前端框架的解决方案进行了学习和借鉴。有了composition API 意味着我们就可以自定义封装hooks,最终的目的都是进行复用,在Vue2中复用的方式大部分都是采取的mixin,但相比hooks,hooks更清楚复用的功能来源及功能。原创 2023-06-17 21:15:31 · 7481 阅读 · 3 评论 -
Vue3 Element-plus el-menu无限级菜单组件封装
对于element中提供给我们的el-menu组件最多可以实现三层嵌套,如果多一层数据只能自己通过变量去加一层,如果加了两层、三层这种往往是行不通的,所以只能进行封装原创 2023-04-14 19:34:19 · 3717 阅读 · 3 评论 -
vue 去除控制台 console.log
vue 去除控制台 console.log原创 2022-04-06 15:10:50 · 1646 阅读 · 0 评论 -
vite+vue3+ts 项目初始化操作
create vue是vite +Vue项目的脚手架工具。必装:Vue Language Features (Volar) vue3语法支持TypeScript Vue Plugin (Volar) vue3项目ts支持Eslint 代码风格校验原创 2023-02-04 20:00:00 · 1483 阅读 · 0 评论 -
vite vue自动加载api(再也不用每个文件引入ref、reactive、vue-router)
可以解决 每次定义数据都需要引入响应式ref、reactive等其他api的烦恼 1.安装自动引入插件 2.vite.config.ts 配置自动引入插件 解决方法 可以去.eslintrc.cjs 文件中 把 no-undef关闭校验。如果 会报以下提示 她说告诉你 不知道ref是什么。这时候呢 就可以去使用 不再去引入ref。原创 2022-12-12 21:45:00 · 1254 阅读 · 0 评论 -
vue3 封装单选框组件
一、封装思想:在父组件定义数据 传入给子组件 并绑定 v-model 获取当前选中的值modelValue 可以接收到父组件 v-model 绑定的值父组件传递数据 并绑定v-model 拿到子组件选中的值原创 2022-12-08 20:14:08 · 873 阅读 · 0 评论 -
vue+ts中引入组件自动提示 declare module
可以发现 用到了ts中的 declare module 意为声明模块,可以让vue知道这是一个组件,当然我们自己定义的组件,使用相同的语法同样可以实现。在我们引入vant UI 组件库时 只要我们输入一个原创 2022-11-14 19:10:44 · 5156 阅读 · 0 评论 -
vite vue3+ts @引入无提示/解决提示报错
配首先置setting.json好后 重新引入 没有红色波浪线但是 vite不认识 @符号 运行项目还是会报错。这时候就需要在vite.config.ts中添加配置。如果path会报错 需要下载一下@types/node。这时候已经有提示了 但是ts会报错。原创 2022-10-19 20:00:00 · 6874 阅读 · 0 评论 -
vue使用pinia (vue2/vue3)
inia是什么?Pinia 是 Vue.js 的轻量级状态管理库官方网站:Pinia中文文档: 介绍 | Pinia 中文文档pinia与vuex4相同是vue 官方 状态管理工具(作者是 Vue 核心团队成员)是vue开发者工具支持pinia不同pinia相比vuex4,对于vue3的 兼容性 更好pinia相比vuex4,具备完善的 类型推荐 => 对 TS 支持很友好Pinia 的 API 设计非常接近 Vuex 5 的提案。vuex只能有一个根级别的状态,原创 2022-09-23 20:00:00 · 7106 阅读 · 0 评论 -
vue3中<script setup> 和 setup函数的区别
是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 语法,具有以下特点:更少的样板内容,更简洁的代码。能够使用纯 TypeScript 声明 props 和自定义事件。更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数,避免了渲染上下文代理对象)。更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。简单来说<script setup>就是 set原创 2022-09-14 19:27:04 · 5180 阅读 · 3 评论 -
vue3.0手写dialog提示框
实现效果组件代码<template> <div class="xtx-dialog" v-show="visible" :class="{fade:visible}" > <div class="wrapper" :class="{fade:visible}"> <div class="header"> <h3>{{title}}</h3> <a href=".原创 2021-08-04 19:51:25 · 968 阅读 · 0 评论 -
vue手写Element提示框组件(confirm)
效果图组件<template> <div class="xtx-confirm" :class="{fade}"> <div class="wrapper" :class="{fade}"> <div class="header"> <h3>{{title}}</h3> <a @click="cancelCallback()" href="JavaSc..原创 2021-07-31 20:10:42 · 1403 阅读 · 4 评论 -
vue实现第三方登录——qq
目录一、介绍如何申请QQ登录解决点击登录后打开一个新窗口二、vue项目中使用(1)引入使用(2)自动生成的代码转换a链接跳转(3)将测试地址映射到本地三、登陆后的三条路线第一条路线第二条路线第三条路线一、介绍整体流程 在登录页面,QQ登录图片处,赋予其打开QQ登录页面功能。 回跳的页面得到QQ给的唯一标识openId,根据openId去后台查询是否已经绑定过账户。 如果绑定过,完成登录。 没有绑定过...原创 2021-07-30 21:10:10 · 9989 阅读 · 19 评论 -
vue 手写分页组件
效果图初始结构<template> <div class="xtx-pagination"> <a href="javascript:;" class="disabled">上一页</a> <span>...</span> <a href="javascript:;" class="active">3</a> <a href="javascript:;"&g原创 2021-07-29 14:59:00 · 462 阅读 · 0 评论 -
vue3.0利用useIntervalFn 工具实现验证码倒计时
实现效果图使用vueuse官方工具库提供的useIntervalFn 方法npm i @vueuse/coreimport { useIntervalFn } from '@vueuse/core'useIntervalFn语法const {pause, resume } =useIntervalFn(() => {// 具体要做的事情 }, 间隔时间, { immediate: false|true })pause() // 暂停resume()// 继续...原创 2021-07-28 19:28:53 · 1837 阅读 · 1 评论 -
手写vue弹框提示
1.使用场景场景还是比较多的 例如常见的登录、做一些功能发送失败的ajax都可以用弹框提示2.提示组件 message.vue<template> <div class="xtx-message" :style="style[type]"> <!-- 上面绑定的是样式 --> <!-- 不同提示图标会变 --> <i class="iconfont" :class="[style[type].i...原创 2021-07-28 13:29:35 · 1732 阅读 · 2 评论 -
vue项目中使用vee-validate表单验证
官方文档https://vee-validate.logaretm.com/v4/ 支持vue3.0npmhttps://www.npmjs.com/package/vee-validate1.安装包npm i [email protected]. 引入 组件import { Form, Field } from 'vee-validate'components:{Form, Field}3.结构form就是表单 field就是表单项 ===input...原创 2021-07-27 23:47:06 · 1154 阅读 · 0 评论 -
vue电商项目sku 规格 详细步骤
一、概念及需求 SPU(Standard Product Unit):标准化产品单元。是商品信息聚合的最小单位,是一组可复用、易检索的标准化信息的集合,该集合描述了一个产品的特性。通俗点讲,属性值、特性相同的商品就可以称为一个SPU。 SKU(Stock Keeping Unit)库存量单位,即库存进出计量的单位, 可以是以件、盒、托盘等为单位。SKU是物理上不可分割的最小存货单元。在使用时要根据不同业态,不同管理模式来处理。 区别:SPU:属性值 特性相同的就是SPU 例如 ip.原创 2021-07-27 21:12:02 · 3274 阅读 · 4 评论 -
vue3.0手写省市区地区联动 详细
目录1、注册一个全局组件城市2.使用城市组件3、城市组件中切换显示隐藏4. 在城市组件外点击关闭城市组件5、城市组件 获取数据6、城市组件-逻辑交互初始值7、城市组件-交互-显示默认地址8. 城市组件 点选交互 子传父9. 城市组件 点选交互 父接收10. 给城市组件加缓存11.请求城市数据时保存loading效果完整代码实现效果因为省市区数据较大 所以数据通过链接引入https://yjy-oss-files...原创 2021-07-27 00:06:11 · 1686 阅读 · 7 评论 -
vue3.0中手写商品放大镜效果
实现效果实现分析(1) 基础组件布局goods-info.vue 父组件<template><div class="goods-info"> <!--左边--> <div class="media"> <GoodsImage /> <!-- 商品图片组件 --> </div> </div></template><scrip..原创 2021-07-26 18:49:30 · 544 阅读 · 0 评论 -
vue3.0项目中手动封装加载更多数据(常见)
技术点 Vue官方工具库(仅限vue3.0使用)中的useIntersectionObserver使用场景:在一些购物平台中,往往都会看见下滑商品的时候当滑倒底部就会去请求最新的数据,和数据懒加载和图片懒加载很类似一、模拟数字实现默认数字为60个数字 当滚到第60个数字时模拟请求20个数字封装组件npm i @vueuse/core<template> <div class="xtx-infinite-loading" ref="c...原创 2021-07-22 23:56:48 · 619 阅读 · 4 评论 -
vue项目中解决路由缓存组件不重新请求数据问题
场景:当点击个护标题时再点击严选标题时页面数据没有发生请求当点击标题时只有我们通过<router-link to="${xx}"></router-link>的路由id变了,并没有去重新请求页面的变化,只有刷新页面后才会去请求当前id的数据,其实也是可以理解的, 对比一下这两个路由 只是后面路由的参数变了,但是组件并没有销毁在创建,你也可以理解为,当你手动在浏览器输入id值时,并没有点击回车键或搜索,浏览器就不会自动去搜索数据,总结出现的问题:路由地址变了,匹配的是同原创 2021-07-20 19:32:46 · 1899 阅读 · 2 评论 -
vue3.0中用自定义指令实现图片懒加载
本章技术点Vue官方工具库(仅限vue3.0使用)中的useIntersectionObservervue.use插件的使用vue3.0自定义指令使用场景① 每一张图片都要进行懒加载操作,在存在大量图片的列表中,为了避免大量图片一起发送网络请求而造成网络堵塞,把图片的加载变成按需的状态 浏览器一般最多支持并行发送的请求数6个左右 避免和重要请求竞争② 监听图片是否成功进入到视口 如果进来了我们才正式发送请求 (操作src就可以)③ 迷惑点 我们请求回来的数据给数据做...原创 2021-07-19 23:47:23 · 1144 阅读 · 3 评论 -
vue2.0和vue3.0中自定义指令(directive)的区别
其他区别 ===》vue2.0和vue3.0中语法的区别自定义指令是什么?类似于vue中的v-for v-if v-model...类似的指令语法,自定义指令是自己注册的指令为什么使用自定义指令?对于现有的指令需求达不到目的,有时候需要对DOM进行其他操作,用自定义扩展更多的功能使用自定义指令vue2.0组件中注册<template> <div> <input type="text" v-focus='123' > ...原创 2021-07-19 22:37:54 · 2635 阅读 · 0 评论 -
vue3.0实现数据懒加载
技术手段 Vue官方工具库(仅限vue3.0使用)中的useIntersectionObserver核心API :Intersection Observer(H5新增,不支持ie)在没有这方法前使用Element.getBoundingClientRect()1.为什么使用数据懒加载?以上面图参考,如果不使用数据懒加载,当用户还没滑到不可见区域时,数据已经请求回来了,如果一个完整的项目,数据是非常多的,请求了很多没有必要的数据,我们想要的效果是 页面滑到哪里,就应该请求相对于...原创 2021-07-19 13:55:47 · 2934 阅读 · 6 评论