vue-3
古迪红尘
这个作者很懒,什么都没留下…
展开
-
vue3-轮播图-封装全局组件和使用
第一步:新建组件 src/components/Slider/index.vue <template> <div class="box" style="height:500px"> <div class="xtx-slider" @mouseenter="mouseEnter" @mouseleave="mouseLeave"> <!-- 图片列表 --> <ul class="slider-body">原创 2021-09-29 12:08:49 · 603 阅读 · 0 评论 -
vue3-template的使用
在vue3里面 template 只有俩种情况使用 1. 根据某个状态渲染多个模板的 v-if v-else 2. 插槽的场景 <tempalte #default></template> <tempalte #footer></template> <div class="container"> <ul> <!-- tem.原创 2021-09-28 11:35:31 · 5974 阅读 · 1 评论 -
vue3-封装一个函数:得到窗口的滚动距离
得到窗口的滚动距离,是响应式的 第一步:封装 // 1. 是一个函数 // 2. 有参数 没有 // 3. 返回值 对象 属性y // 4. 通用逻辑 产出响应式的数据 ref类型 // 5. 初始值确定 import { ref } from 'vue' export function useWindowScroll () { const y = ref(0) // 通用逻辑: 基于scroll事件得到当前距离顶部的滚动距离 然后返回 window.addEventListener('sc原创 2021-09-27 20:55:30 · 446 阅读 · 0 评论 -
vue2和vue3-Less的自动化导入
任务目标: 让业务组件自动加入公共样式(全局字体色值) 我们开发的应用有些样式是公用的,比如我们常见的配色色值,为了做到统一修改的目的往往需要定义成less变量,很多的业务组件都需要使用这些变量,如果我们每一个业务组件都手动引入然后使用的话,开发量巨大,所以为了解决这个问题,我们采取自动导入的方式,方便我们业务组件使用全局less变量 1. 手动引入方案 1)准备样式变量文件 src/styles/variables.less // 主题 @xtxColor:#27BA9B; // 辅助 @helpCo原创 2021-09-26 17:17:16 · 260 阅读 · 0 评论 -
vue3- Vuex - 持久化-使用插件帮助我们自动把vuex的数据同步到本地进行持久化缓存
Vuex - 持久化 在开发的过程中,像用户信息(名字,头像,token)需要vuex中存储且需要本地存储,再例如,购物车如果需要未登录状态下也支持,如果管理在vuex中页需要存储在本地 任务目标: 使用插件帮助我们自动把vuex的数据同步到本地进行持久化缓存 实现步骤 安装vuex-persistedstate 插件 vuex中准备user模块和cart模块 将插件配置到vuex的plugins选项中,配置user模块和cart模块进行状态持久化 修改state数据就会触发自动同步机制,修改一下数原创 2021-09-26 17:04:30 · 1481 阅读 · 0 评论