- 博客(716)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 VUE—— 2. Swiper商城轮播图实现
建立一个文件夹，libs文件夹，专门存放要使用的第三方库如这里的Swiper第三方库，将第三方库的JS文件放到libs文件夹中，第三方库的CSS文件可以放在公共样式文件夹中，或者也放在libs中也行。去第三方库官网下载Swiper.3的压缩包，这个版本最稳定，在Swiper.3的压缩包中将Swiper.js和Swiper.css 这2个文件放入项目中。应人而异自己在package.json中查看，有的人是serve,也有的是dev,看自己设置的。2. 分页器点击切换效果，1. 添加轮播图分页器，
2025-06-12 03:38:16
6
原创 VUE——＜ keep-alive＞缓存
用途：缓存组件实例，避免重复渲染，提升性能。场景：标签页切换、路由懒加载但希望保持滚动位置等。钩子：activated() 和 deactivated() 用于处理组件激活和停用时的逻辑。注意：避免内存泄漏，合理管理组件状态。通过合理使用 < keep-alive>，可以显著提升应用的性能和用户体验。
2025-06-12 01:42:35
481
原创 VUE——1. 商城：导航栏样式滚动控制解析
当一个被 < keep-alive> 缓存的组件被激活（即从缓存中取出并显示）时调用。可以在这个钩子中执行一些初始化操作，比如重新获取数据、重置状态等。当一个被 < keep-alive> 缓存的组件被停用（即被缓存起来，不再显示）时调用。可以在这个钩子中执行一些清理操作，比如保存状态、取消定时器、移除事件监听器等。
2025-06-11 16:52:58
14
原创 Vue——搭建项目架构【开发项目用，环境变量，跨域】
首先，需要为不同的环境创建相应的.env文件，并在文件中定义环境变量。开发环境：创建.env.development文件，内容如下：生产环境：创建.env.production文件，内容如下确保变量名以VUE_APP_开头，这样Vue CLI才能识别并将其嵌入到构建中。
2025-06-06 23:49:21
531
1
原创 Javascript——map
map 方法会遍历数组中的每个元素，并对每个元素执行一个指定的函数（回调函数）。, 新数组中的每个元素是原数组元素经过回调函数处理后的结果。
2025-06-06 09:26:47
149
原创 Vue——移动端UI库之cube-ui
Toast 是一种轻量级的提示组件，通常用于向用户展示简短的信息（如操作成功或失败的提示）。它会自动消失，不会阻塞用户的操作。Switch 是一种开关组件，通常用于在两种状态之间切换（如开启或关闭某种功能）。它的特点是操作直观，用户只需点击即可完成状态切换。（1）引入 Switch 组件如果你只在某个页面中使用 Switch，可以直接通过 标签使用，而无需注册为全局组件。
2025-06-05 10:25:15
642
原创 VUE——移动端UI库之mint-ui
Switch 是一种开关组件，通常用于在两种状态之间切换（如开启或关闭某种功能）。它的特点是操作直观，用户只需点击即可完成状态切换。以下是核心要点：引入和注册：通过 import { Actionsheet } from ‘mint-ui’ 引入，并通过 Vue.component(Actionsheet.name, Actionsheet) 注册为全局组件。定义选项：通过 actions 属性定义操作表中的选项。控制显示与隐藏：通过 v-model 属性控制操作表的显示与隐藏。
2025-06-03 20:48:04
714
原创 VUE——Elemment-ui开发PC端后台管理系统必备
rules 是一个对象，用于定义每个表单项的校验规则。规则可以通过数组的形式指定多个条件。校验规则的常用选项示例规则注意事项1. this.checkCallphone 是一个方法名，必须在 methods 中定义。2. trigger: "blur" 表示在校验时触发的事件（失去焦点时）。（1）自定义校验规则未生效原因：validator 方法未正确绑定到 rules 中。解决：确保 validator 指向的是 methods 中定义的方法，例如 this.checkCallphone。
2025-06-03 06:25:55
780
原创 VUE——BetterScroll实现下拉刷新上拉加载
BetterScroll是一款重点解决移动端（已支持PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些特性以及做了一些性能优化。 BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。BetterScroll官网：https://better-scroll.github.io/docs-v1/doc/zh-hans/特点：安装better-scroll有两种方式：
2025-06-02 03:56:06
1006
原创 Vue——promise异步机制【promise的链式调用】
Promise 是 JavaScript 中用于处理异步操作的一种机制。它表示一个异步操作的最终完成（或失败）及其结果。Promise 提供了一种更清晰和更易于管理的异步编程方式，避免了传统的回调地狱（callback hell）。
2025-06-02 00:47:40
246
原创 VUE——Swiper滑动特效插件【主要就是做轮播图】
数据观测是Vue的 响应式系统核心。当你在data()中定义数据时，Vue会将其转换为响应式对象。
2025-05-31 20:13:02
1030
原创 VUE——fetch服务端通信【Get请求和Post请求】
调用res.json()会返回另一个Promise，该Promise解析为实际的数据。因此，第一个console.log(res)打印的是Response对象本身，而第二个.then中的res才是解析后的JSON数据。如果 res.json() 解析失败（如响应体不是合法的 JSON），第二个 .then 不会执行，而是触发 .catch。fetch的兼容性很差，大部分浏览器都不支持，幸运的是可以使用“whatwg-fetch”插件完美兼容IE8+。当使用fetch发送请求时，它会返回一个Promise，
2025-05-29 01:24:06
712
原创 VUE——封装Axios工作中开发项目用
params 虽然是一个对象，但它不是普通的 JavaScript 对象，而是 URLSearchParams 类的实例。这个类专门设计用来处理 URL 查询参数（即 key=value&key2=value2 格式的数据），因此它提供了一些特殊方法（如 append、get、set 等）来操作数据。
2025-05-28 20:09:50
797
原创 VUE——Axios【带进度条上传文件】
所有的事件处理函数都会接收到事件对象e，只要在方法中声明这个参数。比如，@click、@input、@keyup等等，这些事件的处理函数都可以访问到e对象。而不仅仅是@change事件。uploadfile方法接收了e参数，并在其中获取了e.target.files[0]，这是处理文件上传时常用的方式。这里的e是change事件的事件对象，当文件选择后触发change事件，e.target指向input元素，从而获取文件信息。
2025-05-27 20:42:38
582
原创 VUE——nextTick异步更新队列
当我们点击按钮修改this.name时，Vue会将DOM更新操作放入队列，但此时同步代码（console.log）会立即执行，此时DOM还未更新。因此，console.log读取的是更新前的DOM内容。而视图的更新是在下一个事件循环中进行的，所以用户看到的变化其实是在console.log之后发生的。Vue的数据变化是异步更新的，也就是说，当修改数据时，DOM不会立即更新，而是等到下一个事件循环才会进行。因此，如果在修改数据后立即访问DOM元素的内容，可能获取到的是旧的值。
2025-05-27 04:05:29
928
原创 VUE——Axios【拦截器】
HTTP请求和响应拦截器是一种在HTTP请求发送之前和响应接收之后，对请求和响应进行统一处理的方式。通过拦截器，可以在不修改每个请求处理逻辑的情况下，对所有HTTP请求和响应进行统一的处理。在Axios中，可以通过axios.interceptors.request和axios.interceptors.response来添加请求和响应拦截器。拦截器允许我们在请求发送前修改请求配置，或者在响应接收后修改响应数据，也可以在请求或响应出错时进行处理。
2025-05-26 19:37:55
903
原创 VUE——VUEX【module】
模块化允许将store分割成多个模块，每个模块拥有自己的state、mutations、actions、getters，甚至嵌套子模块。这对于大型应用来说非常有用，可以避免所有状态集中在一个对象中，导致store过于臃肿。命名空间的作用是让模块具有更高的封装性，避免不同模块之间的命名冲突。
2025-05-26 03:30:35
131
原创 VUE——VUEX【action】
/ src/main.js 中的 Vuex Store 配置actions: {// 提交名为 INC 的 mutationasyncInc ：自定义的 action 名称1. commit：提交 mutation2. dispatch：触发其他 action3. state：访问当前 state4. getters：访问 getters5. payload ：调用 action 时传递的参数（如 {amount: 10}）
2025-05-26 00:00:34
301
原创 VUE——Vuex【getter】
state.users 是 Vuex Store 中的一个数组，包含多个用户对象，每个用户对象有 id、name 和 age 属性。users 变量将包含所有 age 大于 18 的用户对象。filter 是 JavaScript 数组的一个方法，
2025-05-23 03:27:01
407
原创 VUE——VueX【state】
Vuex 要求将所有共享状态（数据）集中存放在一个全局唯一的 Store 对象中，这个对象就像一棵树（Tree），所有状态都是它的分支。
2025-05-23 01:19:24
637
原创 VUE——请求配置选项的定义
我们在为请求提供了配置选项时，发现如下2个路径http://vueshop.glbuys.com/api/home/category/menu?
2025-05-20 03:46:02
355
原创 VUE——组件new Vue()机制
导出的是选项对象：export default 导出的是一个包含组件配置信息的对象。Vue 框架在运行时读取这些选项对象，并自动创建 Vue 实例，使组件能够运行和交互。
2025-05-20 01:44:19
511
原创 VUE——Axios的基本用法
Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。常用于Vue、React等前端框架，底层是用Promise封装的Ajax，可以解决异步调用出现回调地狱的问题，可以编写出可读性高，维护性强的代码。Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。1. 从浏览器中创建 XMLHttpRequests2. 从 node.js 创建 http 请求3. 支持 Promise API4. 拦截请求和响应5. 转换请求数据和响应数据。
2025-05-20 01:06:42
630
原创 VUE——Ajax【请求方式】
XMLHttpRequest: 第三个参数 open(method, url, async)，建议永远用 true（异步）。Content-Type: 必须与发送的数据格式匹配（如 application/json）需服务器设置响应头（如 Access-Control-Allow-Origin: *）。XMLHttpRequest: 监听 onerror 和检查 status。涉及复杂请求（如自定义头）时，浏览器会先发送 OPTIONS 预检请求。一、XMLHttpRequest 示例。
2025-05-15 21:54:14
274
原创 Vue——Ajax【初识XMLHttpRequest对象】
一、Ajax 是什么？Ajax请求也是HTTP请求，是一种特殊的HTTP请求。由游览器或者Ajax发起的请求对于服务器来说是没有区别的，这个区别要体现在客户端游览器本身的主要功能是发起请求和接收响应并直接解析响应内容显示到页面，并伴随着网页的刷新的，界面就会改变Ajax通过Ajax引擎发起请求，对于Ajax的响应数据只会被传递到监听函数中，监听函数会自动调用，对于取回来的数据，不会对界面进行任何操作的，需要手动操作DOM，可以称为局部界面更新。
2025-05-15 20:15:01
896
原创 Vue——Ajax【HTTP的请求交互的基本过程】
1. DNS解析：把域名变成IP地址。2. TCP连接：确保数据可靠传输。3. HTTP角色：定义请求 和 响应的格式。4. 状态码：快速判断结果（成功/失败）。5. 渲染：浏览器把代码变成你看到的页面。举个真实例子1. 假设你访问 http://www.example.com/index.html：2. 浏览器通过DNS查到 www.example.com 的IP是 93.184.216.34。3. 和服务器建立TCP连接。4. 发送 GET /index.html 请求。
2025-05-15 06:55:27
141
原创 Vue——组件内的守卫beforeRouteLeave
isActive 表示用户是否点击了广告，默认值为 false。通过合理使用 beforeRouteLeave，可以有效控制用户的导航行为，确保页面状态的安全性和一致性。当用户尝试离开当前页面时，Vue Router 触发 beforeRouteLeave 守卫。如果 isActive 为 false，弹出提示框并调用 next(false) 阻止离开。如果 isActive 为 true，调用 next() 允许离开。如果未点击广告，弹出提示框：“必须单击广告才能离开”，确认用户是否可以离开当前页面。
2025-05-15 00:24:17
443
原创 VUE——组件内的守卫beforeRouteUpdate【用的非常多】
beforeRouteUpdate 是 Vue Router 提供的一个 组件内导航守卫，专门用于处理 路由参数变化 的场景。当用户在同一个路由组件中切换参数（如 query 或 params）时，Vue 不会销毁当前组件实例，而是复用它。此时，beforeRouteUpdate 守卫会被触发，允许我们在参数变化时执行特定逻辑。
2025-05-14 21:34:04
884
原创 Vue——组件内的守卫 ：beforeRouteEnter
调用 beforeRouteEnter 守卫：在导航过程中，调用 usecenter.vue 组件的 beforeRouteEnter 守卫。如果用户已经登录，localStorage中有lg键，守卫会调用next()，允许导航继续，加载usecenter.vue组件。总结一下，beforeRouteEnter是在导航被确认之前调用的，用于在进入组件之前执行某些逻辑，如权限验证、数据预加载等。但是，如果用户已经登录，beforeRouteEnter会调用next()，允许导航继续，组件会被加载和渲染。
2025-05-14 02:22:56
1058
原创 Vue—— beforeEach全局前置守卫
beforeEach全局前置守卫：它主要做，会员登陆验证的一个拦截，会员校验，比如说，有一个会员中心页面，或者订单页面，我们需要会员必须登录之后才能访问这个页面，这时我们可以用beforeEach来实现，beforeEach是什么。根据名字，它看起来像是一个在每次路由跳转前执行的钩子函数。也就是说，每当用户尝试从一个路由跳转到另一个路由时，beforeEach就会被触发，我可以在这个钩子函数中执行一些逻辑，比如检查用户是否已经登录，如果没有登录就跳转到登录页面。
2025-05-14 01:02:26
299
原创 Vue——路由嵌套（主子路由）
什么是嵌套路由，为什么需要它。比如，当应用有多个层级的结构时，比如主页下有子菜单，这时候就需要嵌套路由。可能需要举一个例子，比如用户中心页面下的不同子页面，如个人资料、订单等。作用：实现多层级的路由结构（如：主页 > 用户中心 > 个人资料）在UserCenter.vue中预留子路由出口。修改路由配置文件router/index.js。当访问父路由时重定向到默认子路由。push会返回上一级的记录。2.1 定义父路由组件。1.1 文件结构示例。2.2 配置嵌套路由。
2025-05-13 16:43:29
264
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人