- 博客(111)
- 收藏
- 关注
RSS订阅原创 swiper使用方法？
每个 Swiper.Item 代表一张轮播卡片，可以通过。这里的 swiper 标签上 5000 是间隔时间。组件 首先 recat -vant组件。带小点点的 可以实现跳转的一个效果。属性设置自动轮播的间隔。
2024-04-28 16:37:56
141
原创 Vue3.0组件—banner轮播图（渐入渐隐效果）
最近遇到一个需求，项目首页banner轮播，开始是直接使用element3.0的el-carousel走马灯效果，但是产品觉得切换太快，给用户的体验效果不好，经过多次修改产品给出切换的具体描述前一张图渐隐一个效果，后一张图渐显一个效果，然后停留几秒，于是单独写了一个banner轮播组件。②子组件props的属性：listBanner（播放的图片源）、interval（图片播放的间隔时间）、 autoSwitc（是否自动播放banner）、 setHeight（banner的高度）；
2024-04-27 00:42:18
214
原创 Recat学习
命令最后的react-app是项目的名称，可以自行更改。安装完成后，可以使用npm或者yarn启动项目。进入项目目录，并启动项目。也可以使用cnpm，根据喜好自行选择。创建react项目，nodejs版本最好选择14以上。
2024-04-25 21:21:40
374
原创 recat如何循环？
这是一个recat-vant组件的 轮播图 走马灯 的循环 使用map 很简单 不错。声明前要导入import React, { useState } from 'react';声明格式 ： const 【inp，setinpt】= usestate（）第一点 声明 声明第一个值 当前值 后面的是方法 需要set开头。当然 我们可以去打印 inp就可以打印出我们所进行赋值的值。使用去赋值 循环代码。
2024-04-25 21:15:13
190
原创 一次性让你懂async/await
而 async 函数的 await 命令后面则可以是 Promise 或者 原始类型的值（Number，string，boolean，但这时等同于同步操作）使用 关键字 async 来表示，在函数内部使用 await 来表示异步。async定义的函数内部会默认返回一个promise对象，如果函数内部抛出异常或者是返回reject，都会使函数的promise状态为失败reject。上面的执行结果是先打印出'我先执行'，虽然是上面asyncFn()先执行，但是已经被定义异步函数了，不会影响后续函数的执行。
2024-04-20 09:00:00
296
原创 什么是promise？
第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都接受Promise对象传出的值作为参数。promise有三种状态：pending（进行中），resolved（完成），rejected（失败），只有异步返回的结构可以改变其状态。所以，promise的过程一般只有两种：pending->resolved或者pending到rejected。从字面上理解，promise是承诺、许诺的意思。
2024-04-19 16:21:34
160
原创 from表单的作用、组成和用法
文本框 <input type="text" /> 属性： name:定义控件名称 value：指定控件初始值 密码框 <input type="password" /> 属性： name:定义控件名称 value：指定控件初始值 单选按钮 <input type="radio" /> 属性： name:定义控件名称 value：指定控件初始值 checked：设置控件初始状态是否被选中 一定要相同的name属性达到单选的效果。2.表单的组成表单标签、表单域、表单按钮。
2024-04-19 10:59:00
295
原创 vue3表单参数校验+正则表达式
邮箱就用目前用的邮箱正则表达式，要求一个或多个字母、数字或下划线，接着是 @ 符号，然后是一个或多个字母、数字或下划线，接着是一个句点，最后是一个或多个字母、数字或下划线。电话号码就用目前用的电话号码正则表达式，要求手机号码以 1 开头，第二位为 3 到 9 之间的数字，后面跟着任意 9 个数字，总共是 11 位数字。我们要写在表单的上面，在<script setup></script>里面生效。我们的表单中有用户名、密码、电话号码、邮箱这四个项。我们设置用户名为3到20位的非空字符。
2024-04-18 20:50:04
504
原创 Vue的生命周期的详解
Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识，以此作为记录。Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。
2024-04-17 23:06:46
425
1
原创 vue3+element plus图片预览点击按钮直接显示图片的预览形式
ok，经过上面简单几句代码，就实现了“点击按钮直接显示图片的预览形式”啦 ~我想要直接点击下面这个“预览”按钮，然后呈现出预览图片的形式。ok，需求知道了，下面让我们来看看如何实现吧 ~
2024-04-13 21:32:35
208
1
原创 table表格和下拉组件中data为什么必须是一个函数？
2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。3.当我们将组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。且每个组件实例都应该拥有各自独立的状态。
2024-04-13 21:29:42
177
原创 去重的方法有那些？
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。item是当前元素的值，index是当前元素的索引值。indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。利用indexOf() 查询到数组的下标，看是否等于当前的下标，相等的话就返回，否则不返回值，里面，利用es6的延展运算符。还有一种就是indexof。
2024-04-13 19:56:21
178
原创 vue如何实现组件table表格插槽 好处是什么？
如果是for in 循环 item 第一个参数是每一项 ，而这个组件不一样 她传入的是data 大数据 所以我们以 row每一行进行传参接参。插槽就是可以进行判断三元了，还可以加点击事件，传入某一行 的每一项的东西。图片了还有switch开关都是使用插槽实现 非常好的好哦。
2024-04-13 14:12:55
271
原创 如何实现vue点击按钮进行图片浏览 ？
以下是官方的写法，并不能达到我们的要求，官方实现的功能是点击图片达到预览大图的效果。如果你的按钮就是图片，也可以达到目前的功能。
2024-04-12 20:44:24
264
原创 element用户上传头像组件带大图预览，和删除功能
element 用户上传组件不支持大图预览，拿组件的简单修改一些，发表上来主要是记一下，以后可以用。
2024-04-10 20:33:11
198
原创 vue 的状态库管理
Vuex 和 Pinia 均是 Vue.js 的状态管理库，它们为 Vue 应用程序提供了一种集中式的、可预测的状态管理解决方案。Vuex 是 Vue.js 官方推荐的状态管理库之一。它的核心概念包括 state、mutation、action 和 getter。
2024-04-07 07:50:57
290
原创 vue中绑定
在vue当中，要给元素绑定事件需要用到vue指令，指令一般以v-开头，例如绑定单击事件的指令是v-on:click = “函数名”，简写为@click = “函数名”在button属性里面，使用v-on:click绑定了一个单击事件，当点击此对象时，就执行showInfo函数。vm.$mount(".btn")指定了可供vue操作的元素，与el关键字的作用类似，但比el更加灵活。methods记录了所有的方法，凡事与vue所操作元素有关的方法都应该写在method里面，否则无效。默认参数为event。
2024-04-07 07:45:10
212
原创 vue强制刷新组件的3种方法
(如果要在组件内部中进行强制刷新，则可以调用this.$forceUpdate()强制重新渲染组件)(当某个组件的key变化后，组件都会被重新渲染一遍)(当v-if的值发生变化时，组件都会被重新渲染一遍)通过this $forceUpdate强制重新渲染。通过组件的key值来刷新。
2024-04-06 08:53:37
397
原创 vue如何搭建项目？
outer，less / scss，pinia，axios， element / Ant Design Vue，Echarts 以及如何配置@别名，自定义组件。一开始 app.vue是默认呈现页面所有，如果在其他路由写东西不会呈现出来，除非app.vue引入标签 创建引入路由。在src下创建一个 routes 文件夹，再创建一个 index.ts 文件。路由等 main.js。
2024-04-05 12:26:50
367
原创 v-text 和v-html
v-text和v-html起了插值表达式{{}}作用，将msg中的信息显示在视图中。那它们之间有什么不同？我们可以清晰的知道，在v-html的运行中，它解析了HTML代码。而v-text并没有解析，它将msg原样输出。接下来，我讲介绍一下v-text和v-html的使用方式以及它们之间的区别。
2024-04-03 23:02:07
457
原创 Vue的双向绑定v-model详细介绍
v-model指令可以在表单 input、textarea以及select元素上创建双向绑定；它会根据控件类型自动选取正确的方法来更新元素；比如用户创建，更新时，需要提交一些数据；时需要提交账号密码；
2024-04-03 22:59:36
305
原创 vue v-for 同时遍历两个组数
v-for 利用item 遍历一个数组 利用index 遍历另外一个数组:我这里利用item遍历了articleList数组，利用index遍历newIconIsShow数组。两个数组要求长度相同。
2024-03-31 09:26:44
283
原创 Vue 中使用 Canvas 绘制二维码
在上面的代码中，我们使用 QRCode 库的 toDataURL 方法生成二维码图片的 base64 编码，并将其转换为 Image 对象，最后在 Canvas 上绘制。在 Vue 组件的生命周期钩子函数 mounted 中编写 Canvas 绘制二维码的代码。完整的 Vue 组件代码 注意 注意 你们的二维码 码 和我不一样 记得转一下 再弄。在 Vue 组件中导入 qrcode 库。创建 Canvas 元素。
2024-03-31 09:18:14
324
原创 Vue 表单数据双向绑定 v-mode
每一个Vue项目，每一个系统，肯定涉及到表单的双向数据绑定问题，这一部分是 vue 的重中之重，不是因为知识点复杂，而是因为只要参与 vue 项目的开发，那么就必不可少。单项绑定 ：数据变，视图变；视图变（浏览器控制台上更新html），数据不变；这样的都是单向绑定。双向 ：数据变，视图变；视图变（在输入框更新），数据变。testarea 多行文本。checkbox 复选框。select 下拉框。
2024-03-29 23:52:20
306
原创 vue 如何实现点击复制？
js用 copyvue呢？使用navigator.clipboard.writeText()。如果用户授予了相应的权限，就能提供系统的读写访问。在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。Clipboard API方法是异步的，返回一个promise对象。这里需要给一个元素绑定事件。
2024-03-29 23:47:14
182
原创 如何创建仓库？
第四 在自己项目的文件夹中 打开项目 再进行推送 推送完毕就可以了。再点击键盘中 windon加r 输入自己创建好的仓库邮箱。第三步 下载gitee 下载。
2024-03-27 23:20:28
140
1
原创 vue组件如何使用？
在minn.js 引入 import { createApp } from 'vue';引入后直接把这些的组件标签放到响应的地方 然后拿返回的数据进行循环 v-for=“”再二阶段都是手写 或网上搜 在修改 真心不爽。现在学了vue 哈哈 直接组件上。今天我随便试两个组件。minm.js引入即可。
2024-03-27 23:08:45
334
原创 vue3项目的创建
1>对于 Vue 3，你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。3.x 和 vue-cli 2.x 使用了相同的 vue 命令，如果你之前已经安装了 vue-cli 2.x，它会被替换为 Vue-cli 3.x。2>选择Default (Vue 3) ([Vue 3] babel, eslint)，也可以选择第三个自定义创建。1> vue create 项目名字(或者vue init webpack 项目名字)2.vue3环境搭建好以后配置。
2024-03-24 11:04:47
163
原创 vue中图片替换 遇到问题
里动态绑定路径：<img v-bind:src="imgSrc" />data里这样写是错误的：imgSrc:'xx/xx.png'这样渲染的路径会有问题，导致出不来图片。
2024-03-24 11:00:35
208
原创 vue v-for指令
item指的是被遍历的数组（对象）的每一个值，item的命名不是规定的，可以自定义命名。key是用来给每一项值加元素标识，作用是为了区分元素，为了实现最小量的更新。和数组内容不同的是index此时代表的是对象的key。的循环指令，作用是遍历数组（对象）的每一个值。index指的是每一项被遍历的值的下标索引值。v-for还有index和key属性。v-for还可以用来遍历对象。
2024-03-24 10:54:39
172
原创 Vue项目的打包方式（生成dist文件）
如果咱是用 vue-cli 创建的项目，则项目目录中没有 config 文件夹，所以我们需要自建一个配置文件；，将打包后的dist文件夹部署服务器上即可，配置网站的反向代理。如果是在d 那么要转换 成 vue --projiect。显示这样就是打包成功了。
2024-03-24 10:44:56
750
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人