Vue3
是要开心的婷婷呀~
这个作者很懒,什么都没留下…
展开
-
1.双重三元
1.使用场景:传入后端的方式:js文件中: { name: '创建日期', // input框前的名称 desc: 'createDateEq', // 传入后端的字段名称 type: 'dated', // 格式类型,本文使用ant desgin中的date ,自己又重新定义的dated childrenDesc: ['createTimeStart', 'createTimeEnd'] // 使用选择日期需求传入后端的字段名 }...原创 2022-04-13 13:36:00 · 653 阅读 · 0 评论 -
Vue3项目中组件生成方法
封装的确认框组件:<template> <div class="xtx-confirm" :class="{ fade: fade }"> <div class="wrapper" :class="{ fade: fade }"> <div class="header"> <h3>{{ title }}</h3> <a href="JavaScript:;" class原创 2021-09-28 12:03:43 · 602 阅读 · 0 评论 -
Vue3项目中实现相同属性的互斥点击,与自我点击选中与消除选中状态
效果1:相同属性的互斥点击效果2:自我点击选中与取消选中的状态代码实现:自我点中与取消的逻辑分析: 1.选中的状态时是有一个类名:selected2.但是后台的数据中并没有标志符号来区分是否选中,这个时候需要自己添加一个类名3.添加点击事件实现标识符的切换false与true,由此来确定是否选中互斥的效果逻辑分析:1.点击事件中,将渲染的数据list全部传递过来2.过滤出点中的自己...原创 2021-09-27 18:30:04 · 1147 阅读 · 0 评论 -
Vue3项目中页面滚动加载更多的原生操作
效果:数据未回来就是加载中,加载数据完成后就会显示没有更多的数据了步骤一,定义无限下拉的商品组件:xtx-infinite-loading.vue使用了vueuse中的useIntersectionObserve来监听是否达到了可视化界面中,如果到达了界面,就像父组件传自定义属性load通知父组件做接下来的操作<template> <div class="xtx-infinite-loading" ref="container"> <div c..原创 2021-09-24 11:08:34 · 2245 阅读 · 1 评论 -
Vue3项目中useVModel的使用方式
vue3.0中v-model会拆解成 属性 modelValue 和 事件 update:modelValue父组件:<div class="check"> <XtxCheckbox v-model="sortParams.inventory">仅显示有货商品</XtxCheckbox> <XtxCheckbox v-model="sortParams.onlyDiscount">仅显示特惠商品</XtxCheck.原创 2021-09-23 19:46:13 · 5447 阅读 · 4 评论 -
Vue项目中原生写消息提示组件
效果:组件功能分析: 固定顶部显示,有三种类型:成功,错误,警告。 显示消息提示时需要动画从上滑入且淡出。 组件使用的方式不够便利,封装成工具函数方式。 注:Vue2.0使用的是Vue.prototype.$message = function(){} Vue3.0中使用的是app.config.globalProperties = function(){}挂载原型方法使用组件:<Message text="手机号或密码错误" type...原创 2021-09-23 17:48:03 · 896 阅读 · 0 评论 -
Vue项目中登录页面使用表单验证
效果:文档:VeeValidate 支持vue3.0第一步:安装 执行命令 npm i vee-validate@4.0.3 第二步:导入 修改文件 src/views/login/index.vue,哪个页面使用表单验证就导入以下的信息进行注册使用 import { Form, Field } from 'vee-validate'components:{Form, Field}第三步:将form表单部分的div换成Form,input需要校验的inpu..原创 2021-09-23 17:35:46 · 1285 阅读 · 1 评论 -
vue中原生写分页组件
效果:分页的本质: 分批次的查询数据(基于页码page与每页的条数pagesize),后端接收到分页参数后,会基于这些参数查询数据库,然后基于数据库进行分页;基于sql语句(select * from user limit n,m);分页组件需要实现的功能: 基本组件的结果 动态计算中间的页码 控制省略号的显示和隐藏,控制页码的切换,点击第4页的时候会居中显示和前后出现省略号,后2页的时候不显示后面的省略号, ...原创 2021-09-23 11:54:06 · 429 阅读 · 0 评论 -
Vue3项目中动态组件component的使用
<template> <div class="goods-tabs"> <nav> <a :class="{ active: currentName === 'GoodsDetail' }" href="javascript:;" @click="toggle('GoodsDetail')" >商品详情</a > <a href="javascript:;" :class="{.原创 2021-09-22 15:25:32 · 12672 阅读 · 0 评论 -
Vue3中使用原生的js监听图片懒加载
目的:当图片进入可视区域的时候去加载图片,且数据要是加载失败,会显示默认的图片需解决的问题:1.如果监听图片进入可视区域2.直接操作图片,给他的src属性赋值3.自定义指令的规则自定义指令实现如下的src\components\library\index.js注意:使用webapi:IntersectionObserve ,vueuse中的useIntersectionObserve的底层就是由这个webAPI而来的其中有两个方法 observe.observe(imgDom原创 2021-09-16 21:52:01 · 547 阅读 · 0 评论 -
Vue3中点击箭头切换图片
效果:切换前点击右侧的按钮,切换后没有动画,可以展示图片的切换,可以考虑计算属性computed(过滤一下index,如果为0就是显示前5张图片,如果为1显示后5张图片,computed根据index的不同而实时更新,显示页面也就有不同)<template> <HomePanel title="热门品牌" sub-title="国际经典 品质保证"> <template v-slot:right> <!-- 右侧的.原创 2021-09-16 12:34:24 · 1848 阅读 · 2 评论 -
Vue3中的数据(此项目为图片)懒加载
实现的目的:实现当前组件进入可视区域时候在加载数据,然后渲染图片@vueuse/core中的useIntersectionObserver来监听是否进入可视区域的行为,但是须要配x合Vue3中的组合API才能实现先来分析一下useIntersectionObserver函数const {stop} = useIntersectionObserver(target,fn,options)// target表示被监听的Dom元素 必须是dom容器,而且还必须是Vue3的方式绑定的dom对象原创 2021-09-15 15:43:15 · 335 阅读 · 0 评论 -
Vue3项目中的骨架屏
实现场景:刚进入页面的时候,需要后端接口回传的数据,还没有回来,为了客户有更好的体验,需要设置骨架屏,效果图如下:实现步骤:1.设置通用组件骨架屏(可以设置的属性:高,宽,背景颜色,是否有闪动画)基本传值如下图:2.设置业务组件骨架屏1).设置通用组件骨架屏基本构建src/components/library/Skeleton.vue<template><div class="skeleton" :style="{width,height}" :..原创 2021-09-15 14:51:42 · 1490 阅读 · 0 评论 -
Vue中的简单淡入淡出动画
使用的场景:刚进入页面.数据还没有显示,图片也没有,可以搭配骨架屏,带有这些动画!Vue2中与Vue3中的动画节点函数名称不同 进入(显示,创建) v-enter 进入前 (vue3.0 v-enter-from) v-enter-active 进入中 v-enter-to 进入后 离开(隐藏,移除) v-leave 离开前 (vue3.0 v-leave-from) v-leave-active 离开中原创 2021-09-15 14:15:02 · 1394 阅读 · 1 评论 -
Vue3原生写轮播图组件
实现的基本功能: 自动播放,暴露自动轮播属性,设置了就自动轮播 如果有自动播放,鼠标进入离开,暂停,开启 指示器切换,上一张,下一张 销毁组件,清理定时器 步骤:1.实现通用轮播图样式的基本布局2.设置为全局组件3.设置业务组件4.业务组件导入到首页当中(home.vue)1)在src/components/library/Carousel.vue(这是轮播图的通用组件基本构建,全局注册)<template><div c.原创 2021-09-15 13:56:16 · 1554 阅读 · 0 评论 -
Vue3中的v-model与Vue2中的不同
Vue3中的v-model与Vue2中的不同Vue2的规则: Vue2中v-model默认绑定的属性是value Vue2中v-model默认绑定的事件是@input Vue3的规则: Vue3中v-model默认绑定的属性是modelValue Vue3中v-model默认绑定的事件是@update:modelValue .sync被废除,Vue3中v-model可以绑定多个值第一个值为modelValue,从第二个值开始就是它本身 父组件:&l原创 2021-09-11 14:31:25 · 984 阅读 · 0 评论 -
Vue3中的爷爷与祖孙之间的传值
1.父传孙数据:provide2.子孙得到数据:inject一.爷爷传孙数据:provide爷爷组件:<template> <div>我是爷爷组件我有{{ money }}元钱</div> <hr /> <Child></Child></template><script>import { ref, provide } from 'vue'import Child from原创 2021-09-11 12:19:48 · 7109 阅读 · 2 评论 -
Vue3中的父子之间的传值
1.父组件向子组件传递数据:props2.子组件向父组件传递数据:emit一:父组件向子组件传递数据:props父组件:<template> <div>我是父组件我有{{ money }}元钱</div> <hr /> <Child :money="money"></Child></template><script>import { ref } from 'vue'impo原创 2021-09-11 11:58:26 · 625 阅读 · 0 评论 -
Vue3中功能可以分模块定义与使用
原因:setup函数中内容太多,需要将复杂的功能可以拆分模块,然后倒入使用,方便后期的复用和定期的维护App.vue 中<template> <div><div>案例</div><div>坐标{{"{"+x+"px"+y+"px"+"}"}}</div><hr><div>{{count}}</div><button @click="handlerClick">点击+原创 2021-09-10 22:45:30 · 757 阅读 · 0 评论 -
Vue3中的组合API:ref的使用
一. 操作Dom步骤:1.先在setup中第一变量设置为null2.return出来供模板使用3.模板中绑定上述返回的数据二:获取v-for遍历的DOM或者组件步骤:1,在组件或者需要遍历的dom上定义一个函数2.把该函数绑定到ref上(必须是动态绑定)3.在函数中可以通过参数得到单个元素,这个元素一般都可以放在数组中4.使用<template><h1>ref</h1><div ref="info">hello原创 2021-09-10 22:39:07 · 856 阅读 · 1 评论 -
Vue3中的组合API:computed函数,watch函数
一.计算属性:computed1.计算属性中要有return2.计算属性不能做异步操作,因为他是同步的,异步的不能通过返回值来被处理3.如果使用修改数据set方法与读取数据get方法,computed({})中的参数需要是对象的形式,其中set会自动获取你设置的值,get中要有return,set中没有return1.基本使用的代码:<template><h1>计算属性</h1><button @click="age = 28">点.原创 2021-09-10 22:31:17 · 893 阅读 · 0 评论 -
Vue3中的组合API:setup函数,reactive,toRef函数,toRefs函数
一.setup1.setup是实现组合api的基础p函数的使用2.触发的时机是在beforeCreate之前3.vue3中已经废弃了beforeCreate 与 Created,被setup函数代替了4.无法访问this,因为组件实例还没有被创建5.需要返回值,用于给模板提供数据与方法6.可以沿用Vue2中的data,但是已经不建议这么做了<template> <div ><h1>{{msg}}</h1><butto原创 2021-09-10 21:44:58 · 1139 阅读 · 0 评论 -
Vue3与Vue2的区别
现状:vue-next2020年09月18日,正式发布vue3.0版本主流的组件库已经开始支持了Vue3.0版本,其他的生态也会不断完善 element-plus 基于 Vue 3.0 的桌面端组件库 vant vant3.0版本,有赞前端团队开源移动端组件库 ant-design-vue Ant Design Vue 2.0版本,社区根据蚂蚁 ant design 开发 Vue3的优点: 是目前最火的框架之一, ...原创 2021-09-10 20:45:22 · 134 阅读 · 0 评论