ggg21534的博客

原创 表单校验-

value: 这是需要验证的字段的值。在您的情况下，它可能是表单中的一个复选框（checkbox）的值，您正在检查这个值是否为。callback: 这是一个回调函数 在校验成功或失败时均需要调用它 在成功时可直接调用 在失败时需要携带参数调用。rule: 这是与当前验证字段相关的规则对象。它可能包含该字段的多个验证规则和相关的元数据。valid：第一个参数为判断校验是否通过 所有校验均通过 valid为true。fields：第二个参数为校验的字段值 但是校验成功时好像拿不到值。

原创 蒙层滑块图片放大

2. 大图的原理就是把小滑块所覆盖的图片部分采用与原图一样的尺寸进行显示 从而达到放大的效果 在计算出小滑块的位置后 将此数值乘二(具体乘几看给的尺寸，此处小滑块的尺寸和大图是1：2)便是大背景图要移动的位置 positionX = -left * 2 (因为滑块移动方向和大图移动方向相反 则添加负号)1. 根据鼠标移动的位置以及鼠标是否在图片内计算蒙层小滑块的位置以及控制是否移动。

原创 购物车相关

登录状态下的加购调用接口即可 但是非登录状态下需要在本地进行 需要考虑此物品是否已存在购物车 如果已存在 则只需要数量加一 如果不存在 则添加。判断是否全选 即判断每一项selected是否都为true 采用every方法 如果均符合要求 则为true。删除时同理 如果是登陆状态则调用接口 如果不是则采用数组过滤方法进行删除。1. 如果非登录状态下可以进行加购 则要分清楚是否是登录状态下的加购。3. 单选功能通过skuId进行判断 决定selected的值。

原创 无限的加载

【代码】无限的加载。

原创 tab栏筛选切换

在tab栏切换时 组件可以直接拿到改变的tab值 注意在渲染时需要将渲染页面改回到第一页。

原创 路由跳转(同个组件)-路由守卫

的函数（该函数在给出的代码片段中未定义，但可以假设它在其他地方被定义）。这个函数似乎接收一个参数，该参数是从目标路由对象。这是一个路由守卫，它会在当前路由改变，但仍然是同一个组件（即组件被复用）时被调用。，这个参数是一个即将要进入的目标路由对象。这个对象包含了关于目标路由的详细信息，如。这通常用于调试，以查看在导航到新的路由时传递了哪些参数或查询。，并且这两个路由都渲染同一个组件（比如。这行代码会在控制台打印出目标路由对象。这是一个箭头函数，它接收一个参数。会在这个组件内部被触发。这行代码调用了一个名为。

原创 渲染面包屑导航

给面包屑导航要添加路由跳转。请求参数为路由参数id。

原创 图片懒加载指令

封装后在main.js中进行使用。引用后可在组件里使用。

原创 产品列表-

1. 布局相同的产品列表可以封装组件 采用插槽进行不同的渲染。2. 相同的商品小卡片也可以单独封装组件 以便复用。

原创 吸顶交互导航实现

当鼠标滚动到一定距离时 将它返回原位 用transition实现过渡效果。2. 吸顶导航出现前 将它上移自身高度的100% 且透明度为零 实现隐藏。

原创 VUE项目创建

2. 样式资源 - 把 common.scss 文件放到 styles 目录下。1. 图片资源 - 把 images 文件夹放到 assets 目录下。3. 配置element-plus组件导入(按需或全部 看情况)2. 配置eslint和prettier规则。在vite.config.js中进行样式覆盖。在eslintrc.cjs文件和设置中。6. 安装axios并简单封装。看官方文档 配置完记得检测。5. 主题色配置(官方文档)10. scss变量自动导入。1. 创建项目并整理目录。

原创 VUE3项目初始化

3. 调整项目目录，修改内容 1.删除文件，里面初始化的一些文件 2. 修改内容， 3. 新增需要的目录 api utils 4. 将项目需要的全局样式 和 图片文件，复制到 assets 文件夹中, 并将全局样式 在 在main.js中引入 import '@/assets/main.s

原创 vue指令

v-on:事件名 = "methods的函数名" @事件名 = "methods的函数名"v-for中要加key属性，作为元素的唯一属性，只能是字符串或者数字类型，建议使用id。v-show：通过控制display的属性控制元素的显示与隐藏，适用于频繁切换的场景。v-if：通过控制元素的显示与移除来控制元素的显示与隐藏，适用于不频繁切换的场景。v-show v-if 均是用来控制元素显示隐藏的。item ------- 每一项。index ----- 下标。

原创 实例4：成绩列表

【代码】实例4：成绩列表。

原创 实例2-记事本

【代码】实例2-记事本。

原创 指令修饰符

【代码】指令修饰符。

原创 实例1-图片切换

在下标为零和下表为数组的最后一位时隐藏一个按钮，用到v-show（频繁切换）。将所有图片封装近数组内，切换图片时只需切换数组下标。

原创 VUE-14:插槽（slot）

插口中的内容将被当作“默认”内容：它会在父组件没有传递任何插槽内容时显示。子元素无内容时默认显示插槽的内容。子元素不为空时显示子元素的内容。

原创 VUE-13:Props

从父组件接受动态数据。

原创 VUE-12:组件

【代码】VUE-12:组件。

原创 VUE-11:侦听器（watch）

【代码】VUE-11:侦听器（watch）

原创 VUE-10:模板引用（ref onMounted）

【代码】VUE-10:模板引用（ref onMounted）

原创 VUE-9:计算属性（computed）

【代码】VUE-9:计算属性。

原创 VUE-8:列表渲染（v-for）

数组，并为每个元素生成一个模板的副本，同时将当前元素作为。就是告诉 Vue 去遍历。

原创 VUE-7:条件渲染（v-if）

原创 VUE-6:表单绑定（v-model）

（ref或者reactive返回的代理对象，发生改变的时候就会驱动template中的视图发生改变）·change事件指的是当输入框内容发生改变时触发的事件，前提是失去了焦点，才会触发到change事件。·input事件是指当输入框内容发生改变时就会触发，实时触发，不用失去焦点。1. input表单中input和change事件的区别？2. 什么是双向绑定？

原创 VUE-5:动态属性绑定

v-bind可以省略。

原创 VUE-4:whenDepsChange自动变化

这个例子中target：data propKey：A0 / A1 receiver：proxy_data（改变后的data）·target：目标对象（侦听的对象）·target：目标对象（侦听的对象）·propKey：将被设置的属性key。·propKey：被获取的属性key。·receiver：调用的代理对象。·receiver：调用的代理对象。·value：新属性值。2. set()函数有四个参数。1.get()函数有三个参数。

原创 VUE-3:vue的响应式核心

对ref进行修改的时候不能直接改，需要用到"对象.value++

原创 VUE-2:vue安装

5. 输入cd .\vue-project(文件名)\ 回车 输入clear。2. 打开终端，输入npm init vue@latest。可修改文件名（vue-project）下载完之后在执行npm run dev。因为没有下载什么 再输入npm i。ls 和 clear 交替输入几遍。然后输入npm run dev。得到一个网站 可以打开。

原创 VUE-1：面试题（2）

根据你的需求场景，你可以用不同的方式使用vue。· 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面。· 在任何页面中作为Web Components 嵌入。a. 易学易用，API设计简单，好上手，也是较火的原因。b. 性能出色，proxy，精准更新，diff算法。· Jamstack / 静态站点生成（SSG）· 无需构建步骤，渐进式增强静态的HTML。vue的设计非常注重灵活性和"· 全栈/服务端渲染（SSR）1.怎么理解vue的渐进式？c. 灵活多变，回到渐进式。· 单页应用（SPA）