- 博客(71)
- 收藏
- 关注
RSS订阅原创 动态组件的渲染
1、动态组件1. 什么是动态组件动态组件指的是动态切换组件的显示与隐藏。2. 如何实现动态组件渲染vue 提供了一个内置的 <component>（组件的占位符） 组件，专门用来实现动态组件的渲染。示例代码如下：<template> <div class="goods-tabs"> <nav> <a @click="toggle('GoodsDetail')" :class="{ active: compon
2021-09-23 22:41:06
573
原创 vue中自制表单验证中的清空表单验证
温馨提示：想要自制表单验证的请看上一篇 这次，我们着重讲一讲，表单验证过后怎么清空表单验证（1）清空表单内容// 表单数据 const form = reactive({ // 用户名 account: null, // 密码 password: null, // 手机号 mobile: null, // 验证码 code: null, // 是否...
2021-09-23 15:56:29
1316
原创 vue中自制表单验证
我们在不借助第三方组件库的情况下，自己制定表单验证借助vee-validate具体实现步骤第一步：安装依赖包npm i [email protected]第二步：导入Form和Field组件并使用import { Form, Field } from 'vee-validate第三步：在Field组件上通过rules属性绑定验证规则，并且必须有name属性，其值可以自定义通过Form组件的作用域插槽可以获取错误提示 errors.na...
2021-09-23 15:34:17
698
原创 Vue-电商项目中规格商品是否可以选中功能
当我们在做电商平台时，要判断用户购买的商品有没有库存，根据库存的多少来判断商品的规格能不能选择，基于这样的需要，我们现在来实现一下规格商品是否可以选中大概的思路 从后端可以得到所有的SKU数据 我们需要过滤出有库存的SKU数据 为了方便进行组合判断，需要计算每个SKU规格的集合数据的【笛卡尔集】 为了方便判断是否可以选择规格，可以基于笛卡尔集生成规格的【字典】 此时当点击规格标签时，把选中的规格进行组合，然后去字典中判断，只要有一个存在，就证...
2021-09-23 12:22:58
597
原创 SKU&SPU概念
SPU（Standard Product Unit）：标准化产品单元。是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。通俗点讲，属性值、特性相同的商品就可以称为一个SPU。SPU就是一种商品 SKU（Stock Keeping Unit）库存量单位，即库存进出计量的单位， 可以是以件、盒、托盘等为单位。SKU是物理上不可分割的最小存货单元。在使用时要根据不同业态，不同管理模式来处理。 总结一下： spu代表一种商品，拥有很多相同的属性。..
2021-09-23 12:06:37
202
原创 Vue原生封装分页组件
封装分页组件的本质：前端：分批次查询（常规的分页基于页码（page）和每页的条数（pagesize））后端：后端接收到分页参数后，会基于这些参数查询数据库，然后基于数据库进行分页：基于SQL语句（select * from user limit n,m）大致步骤： 分页基础布局，依赖数据分析。 分页内部逻辑，完成切换效果。 接收外部数据，提供分页事件。 <template> <div class="xtx-pagin...
2021-09-23 11:44:31
478
原创 使用webpack提供的一个自动导入的API自动的批量注册组件
使用require.context() 是webpack提供的一个自动导入的API大致步骤： 使用 require 提供的函数 context 加载某一个目录下的所有 .vue 后缀的文件。 然后 context 函数会返回一个导入函数 importFn 它又一个属性 keys() 获取所有的文件路径 通过文件路径数组，通过遍历数组，再使用 importFn 根据路径导入组件对象 遍历的同时进行全局注册即可 // 导入./路径下的所有组件/
2021-09-20 00:32:12
319
原创 Vueuse组件库中配合vue3的组合API的一些好用的方法
安装npm i @vueuse/[email protected]（1）useIntersectionObserver 来实现监听进入可视区域行为、使用方法：// const {stop} = useIntersectionObserver(target, fn, options)// 1、参数一target表示被监听的DOM元素// 2、参数二是回调函数，用于通知监听的动作（回调函数的第一个形参isIntersecting表示被监听的元素已经进入了可视区）// 3、表示配置选项/..
2021-09-20 00:27:59
634
原创 Vue3---封装一个下拉加载更多组件
今天我们手动封装一个下拉加载更多组件，类似于vant组件库中的list功能loading.vue<template> <div class="infinite-loading" ref="container"> <div class="loading" v-if="loading"> <span class="img"></span> <span class="text">正在加载...&l
2021-09-19 10:00:35
1062
1
原创 Vue3封装一个面包屑组件（终极版）
经过前两次的铺垫，想必大家多面包屑组件的封装也有了一定的了解，今天，我们就来一个终极版，完美实现面包屑组件的多级展示问题，这里我们使用到了render函数 同样我们需要两个组件：bread组件和 bread-item 组件bread-item组件<template> <div class="xtx-bread-item"> <RouterLink v-if="to" :to="to"><slot /></R...
2021-09-16 19:59:28
734
原创 Vue3封装一个高级面包屑组件（2）
接着上一篇我们封装的面包屑组件性能比较差、灵活度不强，所以这次我们封装一个高级组件，适用于多级场合这次我们先封装两个组件bread.vue以及bread-item.vuebread-item.vue<template> <div class="xtx-bread-item"> <RouterLink v-if="to" :to="to"><slot /></RouterLink> ...
2021-09-16 19:50:48
168
原创 Vue3中封装一个初级面包屑组件（1）
今天我们来封装一个初级版面包屑组件（1）准备静态bread.vue组件<template> <div class='xtx-bread'> <div class="xtx-bread-item"> <RouterLink to="/">首页</RouterLink> </div> <i class="iconfont icon-angle-right"></i>
2021-09-16 18:07:42
132
原创 Vue3中原生js实现图片懒加载
今天我们使用原始js实现图片的懒加载，利用自定义指令以及原生的方法IntersectionObserver 构造函数 来实现图片的懒加载功能首先，我们先来介绍一下原生的IntersectionObserver 方法// 创建观察对象实例new一个实例const observer = new IntersectionObserver(callback[, options])const obs = new IntersectionObserver((entries,...
2021-09-16 12:30:31
353
原创 Vue3中封装一个数据懒加载共用函数，实现数据懒加载
需求：实现当组件进入可视区域加载数据 使用@vuevuse/core中的useIntersectionObsercer来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现先来分析一下useIntersectionObserver 函数const {stop} = useIntersectionObserver(target, fn, options)1、参数一target表示被监听的DOM元素2、参数二是回调函数，用于通知监听的动作（回调函数的第...
2021-09-15 16:43:48
270
1
原创 Less中的混入用法（类似于函数）
// 定义混入方法时，需要在类选择器之后添加一个小括号// 定义混入方法.abc () { color: red;}.active { border: 1px solid blue; // 使用混入方法 .abc();}.current { background: orange; // 使用混入方法 .abc();}混入的好处：把重复的代码抽离出去，使用的时候可以多次导入，降低代码的冗余度定义一个less文件// ..
2021-09-15 16:32:22
778
原创 Vue中封装一个骨架屏组件
骨架屏组件的目的：为了在加载过程中等待效果更好，封装一个骨架屏组件封装一个组件，做占位使用，这个占位组件有个专业术语：骨架屏组件，暴露一些属性：高、宽、背景、是否有闪动画skeleton.vue<template> <div class="skeleton" :style="{width,height}" :class="{shan:animated}"> <!-- 1 盒子--> <div class="block" :style
2021-09-15 16:14:19
341
原创 Vue动画的淡入淡出效果
今天呢，我们来利用vue动画实现以下淡入淡出效果在vue中，显示隐藏和创建移除，一个元素或者一个组件的时候，可以通过transition实现动画主要通过6个类名来控制 进入（显示，创建） v-enter 进入前 （vue3.0 v-enter-from） v-enter-active 进入中 v-enter-to 进入后 离开（隐藏，移除） v-leave 离开前 （vue3.0 v-leave-from）
2021-09-15 15:56:24
9957
5
原创 Vue3---封装一个轮播图组件
友友们，今天我们来使用Vue3封装一个轮播图组件 第一步：我们先来封装一个轮播图组件的通用组件：（1）轮播图组件的结构 carousel.vue<template> <div class='xtx-carousel'> <ul class="carousel-body"> // 放置图片 <li class="carousel-item fade"> <Ro...
2021-09-14 12:00:20
1570
1
原创 Vue中实现vuex状态管理的数据的持久保存的方法
vuex的stor数据有一个特点，就是在页面重新刷新后，页面会重新加载vue实例，同时，store里面的数据也会被重新刷新掉，这样就出现的刷新页面vuex中的数据会丢失的提问。解决这个问题个人总结了一写方法：（1）利用js的存储技术，可以将vuex中的数据保存在浏览器中，可以保存在localStorage中、sessionStorage中、cookie中（2）可以利用vue的插件。vuex-persistedstate，来实现数据的持久化保存。vuex-persisted...
2021-09-13 12:21:08
1204
原创 Vue3封装一个通用的购物类网站的底部导航组件
手动封装一个通用的电商类底部导航组件<template> <footer class="app_footer"> <!-- 联系我们 --> <div class="contact"> <div class="container"> <dl> <dt>客户服务</dt> <dd><i class="..
2021-09-13 12:05:32
194
原创 Vue3-封装一个导航栏组件
在Vue3中封装一个导航栏组件，并且实现，随着滚动条滚动实现一个吸顶效果 导航栏组件的效果图：滚动条滚动以后的吸顶效果示意图：具体代码展示：<template> <header class="app-header"> <div class="container"> <!-- 头部导航区域 --> <HeaderNavCommon /> <...
2021-09-13 12:02:57
1242
原创 Vue3中封装一个通栏组件
今天我们封装一个Vue3的通栏组件，实现登录后（有token）和没有登录（没有token） 的动态展示没有登录的效果图登录以后的效果图：<template> <nav class="app-topnav"> <div class="container"> <ul> <template v-if="$store.state.user.profile.token">...
2021-09-13 11:52:47
89
1
原创 Vue3与Vue2--- v-model语法糖
v-model在vue中很重要，实现数据与视图的双向绑定，但在Vue2和Vue3中，v-model的使用还有有区别的。v-model本质上就是绑定属性和事件的结合。1、vue2中v-model的应用场景（1）在vue2中，v-model绑定的:value属性，和input事件。当然v-model可以绑定在DOM上，也可以绑定在组件上<template> <div> <div>v-model指令用法</div> &l...
2021-09-11 12:15:45
1202
原创 Vue3中的祖孙传值
当我们遇到一个父组件，里面有子组件、有孙组件，有很多后代组件时，需要共享父组件的数据，我们可以用到 ----依赖注入---- 核心就是使用provide方法，传递数据，使用inject接收数据1、父组件向子、孙组件传值父向子孙传数据：使用provide方法，将数据传出父组件代码：<template> <div> <div>父子组件的交互</div> <button @click='mon...
2021-09-11 11:56:53
5874
1
原创 Vue3中的父子通讯
Vue3中的父子传值用的同样是自定义属性props和自定义事件emit,但是在具体使用上还要和vue2中有区别（1）父组件向子组件传值：自定义属性：props父组件代码：<template> <div> <div>父子组件的交互</div> <button @click='money=200'>修改</button> <hr> <Child :money='...
2021-09-11 11:38:55
322
原创 Vue2与Vue3中的API生命周期
vue2生命周期函数钩子函数（1）实例创建前，这时还没有domdeforeCreatecreated（2）dom创建beforeMountmounted(3)更新前beforeUpdateupdated(4)销毁前deforeDestoeydestroyedVue3生命周期钩子函数setup创建实例前onBeforeMount挂载DOM前onMounted挂载DOM后onBeforeUpdate更新组件前onUpdated更新组件后
2021-09-10 22:27:06
83
原创 Vue3 组合API-ref属性
vue中的ref是用来获取、操作dom或者组件的属性（1）Vue3中操作单个DOM元素ref操作单个DOM或者组件的流程1、定义一个响应式变量2、把变量返回给模板使用3、模板中绑定上述返回的数据4、可以通过变量操作DOM或者组件实例<template> <div> <div>ref操作DOM和组件</div> <hr> <!-- 3、模板中绑定上述返回的数据 --> ...
2021-09-10 22:11:46
388
原创 Vue3中组合API-watch函数
当需要侦听一些信息的变化时， 需要用到watch侦听器，当被侦听的信息变化时，触发侦听器的回调函数典型的场景：路由的参数发生变化时，重新调用接口获取组件的数据1、侦听ref定义的响应式数据<template><div> 侦听器 <div><div>{{count}}</div><button @click='count+=1'>点击+1</button></template...
2021-09-10 21:44:54
403
原创 Vue3中的组合API-computed函数计算属性
computed函数，是用来定义计算属性的，计算属性不能修改 应用场景：基于已有的数据，计算一种数据（1）基本使用：只读<template> <div> <div>计算属性</div> <button>点击</button> <div>今年：{{age}}岁了</div> <div>明年：{{nextAge}}岁了<...
2021-09-10 20:18:51
1665
1
原创 Vue3中数据响应式的4种方式
在vue3中setup默认返回的普通数据不是响应的，如果希望数据是响应式的，有4种方式，今天我就来和大家介绍一下这4种方式（1）reactive（）：reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。代码演示：<template> <div>数据响应式</div> <div> {{ obj.msg }} </div> <div> <button ...
2021-09-10 19:40:19
14315
1
原创 Vue3中组合API-setup函数
在Vue3中中我们定义数据项和函数时，一般采用setup函数，可以使用data，但是一般b不建议使用，因为使用setup函数更符合组合API的语法规范 setup函数的使用细节： （1）setup是一个新的组件选项，作为组件中使用组合API的起点 （2）从组件生命周期来看，它的执行在组件实例创建之前Vue2的beforeCreate执行（3）这就意味着在setup函数中this还不是组件实例，this此时是undefined （...
2021-09-10 12:21:57
785
原创 Vue3中的区别：选项API和组合API
Vue3和Vue2中有一个很大的区别，就是API的使用方式，在Vue2中使用的是选项API（Options API）在Vue3中使用的组合API（Composition API）1、什么是选项API写法：（1）代码风格：data选项写数据，methods选项写函数。。。一个功能逻辑的代码分散（2）优点：易于学习和使用，写代码的位置已经预定好（3）缺点：代码组织性差，相似的逻辑（功能）代码不便于复用，逻辑负责代码多了不好阅读2、什么是组合API写法：以功能为单位组织代码...
2021-09-10 12:13:21
1048
原创 初识vue3：比较一些vue2和vue3的基础代码的区别
使用vue3已经成为趋势，今天我们就来初识一些vue3，比较vue2和vue3的存在的一些区别（1）创建实例化的区别：vue3的风格是按需导入vue2中实例化vuenew Vue({router,store,render:h=>h(APP)})vue3中实例化vueimport { createApp } from 'vue'// 导入根组件import App from './App.vue' // 支持前端路由import router from ...
2021-09-10 12:03:33
232
原创 聊一聊vue中预览数据回填以后根据答案的多选和单选动态显示
在项目中，遇到点击预览按钮，显示当前题目的详情，当选择的题目的答案是多选的是动态显示多选的答案，选择单选就动态显示单选的答案，具体效果如图所示点击单选题的预览点击多选题的预览具体代码：// 父组件</template> <el-button type="text" @click="hPreview(scope.row)">预览</el-button> <!-- 题目预览 --> <el-...
2021-09-09 00:12:02
611
原创 vue+element-ui中的tabs组件，如何动态渲染数据
vue中element-ui的tabs组件如何动态渲染数据呢？ 使用tabs组件自带tab-click事件，同时通过tabs的name渲染数据 <template> <div style="margin-top:20px;"> <el-tabs type="card" v-model="activeName" @tab-click="handleClick"> <e...
2021-09-07 23:43:46
3395
原创 VUE中按钮和vue页面的动态渲染，同时，其他按钮联动显示禁用和不禁用
当我们有需要，例如，按钮显示上架，页面状态显示已下架，这是修改和删除按钮是可以点击状态当我们点击上架以后，按钮会变成下架，同时页面显示已发布，这是修改按钮和删除按钮被禁用效果如图所示具体代码表示<template> <el-table> <el-table-column label="发布状态" prop="publishState"> <template slot-scope="s...
2021-09-07 23:31:12
1029
2
原创 VUE中点击审核按钮，在页面渲染不同的状态，同时按钮被禁用
当我们在做项目的时候，会遇到这样的需求，比如说vue页面，显示待审核，当我们点击了审核按钮以后，根据，输入的审核意见，vue页面要动态渲染成已审核或者已拒绝，同时审核按钮会禁用。具体效果vue页面初始状态点击审核的弹窗最后页面的结果具体代码显示：<template><div><el-table-column label="审核状态" prop="chkState"> <temp...
2021-09-07 22:57:42
3458
3
原创 使用git会遇到的一些小问题
问题一：pull的时候，会出现的问题 当你在自己的分支(例如：feature/questions)开发完成代码，切换到开发分支例如：develop，当从远程拉取代码的时候，可以会遇到这个错误原因是：本地的分支（develop）和远程的分支（develop）没有建立关联。解决方法是：// 先建立关联$ git branch --set-upstream-to=origin/develop develop// 再拉取$ git pull然后做合并git mer..
2021-09-07 18:00:20
61
原创 小总结：git的使用
当我们做项目时，总是会将自己的项目放到远程仓库，和同事一起开发项目，在做项目时，要时时保存自己的项目，也方便代码的管理，今天和大家分享一些，使用git时的一些命令组长需要做的：（1）初始化项目 初始化仓库 git init 添加暂存区 git add . 提交本地仓库 git commit -m "项目初始化" （2）当我们创建了自己的项目以后，最好要建立两个其他分支，不要在主分支master上开发额外建立两个分支git branch rele...
2021-09-07 17:43:05
106
原创 在VUE中实现城市及对应的地区的联动渲染
今天和大家分享如何在vue中实现，城市的联动渲染 预期效果： 当我们不点击城市列表，点击渲染地区列表，没有数据 如图所示： 当点击了城市以后，会根据城市渲染出相对应的地区列表具体代码：（1）首先要先准备好渲染城市以及地区的数据源，如下代码所示/* * @Author: taoshiwei * @Date: 2019-04-09 14:38:13 * @Last ...
2021-09-07 00:13:39
733
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人