经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 Vue.js

vue.js基于ElementUI封装了CRUD的弹框组件

目录前言开始封装json对象如下所示table表头作为列表传入,数据结构如下在子组件中循环渲染出表头在父组件中调用 前言 代码写得不好,为什么不封装一下呢,如果用的是ElementUI框架,也可以在此基础上进行二次封装。譬如说,这个用来对列表数据进行增删改查的弹框。 开始封装 原本...[2022/7/4]

代号为Naruto的Vue2.7正式发布功能详解

目录 引言 向后移植的功能 注意事项 与 Vue 3 的行为差异 升级指南 Vue CLI / webpack Vite Volar 兼容性 Devtools 支持 2.7 版本的影响 额外细节 引言 Vue 正式发布了 2.7 版本, 版本名称为 Naruto,即火影忍者。 尽管现在 Vue 3 ...[2022/7/4]

详解Vue3中setup函数的使用教程

目录vue2 和 vue3 开发的区别使用 setup 原因setup 用法setup 可以接受哪些参数setup 详解setup 函数自动执行setup 函数定义变量setup 创建方法动态更新数据 vue2 和 vue3 开发的区别 首先,目前来说 vue3 发布已经有一段时间了,但是呢,由...[2022/7/4]

vue实现简单的购物车功能

本文实例为大家分享了vue实现简单购物车功能的具体代码,供大家参考,具体内容如下 1.实现效果: 2.涉及到的知识点: toFixed函数、过滤器、reduce高阶函数、v-bind:disabled、v-if 3.代码: <!DOCTYPE html> &...[2022/7/4]

vue不用import直接调用实现接口api文件封装

目录引言解决每次import问题:封装代码,在index.js多层级怎么处理呢?src / api / index.jssrc / api / monitor / index.jssrc / main.js页面接口.js文件内容如下 引言 开发时习惯将调用后端接口的方法写在接口文件里统一管理,这...[2022/6/27]

ElementUI时间选择器限制选择范围disabledData的使用

关于结束时间不能大于开始时间的问题,在elementui里我们用官方提供的 disabledDate 选项来解决。HTML:给选择器加上:picker-options属性 开始时间 <el-date-picker v-model="startDate"></el-date...[2022/6/27]

浅谈Vue+Ant&nbsp;Design&nbsp;form表单的一些坑

目录设置默认值的坑自定义 v-decorator 组件的坑 最近在用 vue + ant 写项目发现 from 组件的坑还是比较多的 设置默认值的坑 控制台报 Warning: You cannot set a form field before rendering a field a oc...[2022/6/21]

VUE中的mapState和mapActions的使用详解

最近在开发一套系统,前端使用VUE开发,由于本人是后端开发,前端也会一点,但是VUE接触不多,在VUE项目开发遇到的一些坑记录一下,不是专业前端写好的不好,大家不要唝。。。 在VUE项目中经常会用到mapState和mapActions,mapState主要用于同步全局的变量或者对象,mapA...[2022/6/20]

vue3动态添加路由

目录前言一、初始化项目二、添加“vip”路由三、总结 前言 有的时候我们需要根据不同的用户身份生成不同的路由规则,例如: vip用户应该有自己的vip页面所对应的专用路由。 一、初始化项目 初始化vite + vue + ts项目,引入vue-router。目...[2022/6/20]

vue3生成随机密码的示例代码

目录实现效果实现思路完成布局完成生成随机数的方法完成生成随机密码的方法部分代码总结 实现效果 实现思路 完成布局完成生成随机数的方法完成生成随机密码的方法 完成布局 布局直接用element-plus组件库里的el-from+checkbox完成一个简单的表单布局即可。 完成...[2022/6/20]

Vue&nbsp;不定高展开动效原理详解

目录使用场景背景实现transition 组件过渡效果原理解决 使用场景 在大多数 APP 中,都有问答模块,类似于下面这种(bilibili 为例): 问答模块的静态页面开发并不复杂,也没有特殊的交互。唯一有一点难度应该是回答部分的展开特效。 展开时,需要从上往下将回答部分的 di...[2022/6/20]

v-show和v-if的区别?及应用场景

目录一、v-show与v-if的共同点二、v-show与v-if的区别三、v-show与v-if原理分析v-show原理v-if原理四、v-show与v-if的使用场景 一、v-show与v-if的共同点 我们都知道在 vue 中 v-show 与&...[2022/6/20]

Vue中$on和$emit的实现原理分析

目录Vue中发布订阅模式$emit和$on用法深挖首先剖析一下$on的原理实现有一点要记住先定义的先触发分析$emit先打个断点 Vue中发布订阅模式 在Vue中采用了发布订阅模式,典型的兄弟组件间的通信$on和$emit 发布订阅模式:(订阅者、发布者、信号中心) 一个发布者$emit...[2022/5/30]

v-for中动态校验el-form表单项的实践

目录问题描述效果图代码思路完整代码 问题描述 在项目开发中,我们经常会遇到表单保存的功能,在表单保存前,常常需要做表单必填项的校验,校验通过以后才去发请求保存表单数据。 但是,这个表单如果是动态的,即:可以新增相同的表单。比如这个表单有输入框和下拉框需要校验,点击添加表格按钮,再新增一个相同...[2022/5/30]

vue中el-autocomplete与el-select的异同

目录前言异同el-autocompleteel-select总结 前言 最近项目里面需要使用到下拉框的远程搜索,我这边使用的是el-select,其实查看文档我们可以得知,还可以使用el-autocomplete来实现远程搜索。 那么它们具体有何异同呢?今天我们来看看。 异同 el-...[2022/5/30]

Vue?组件上的v-model双向绑定原理解析

目录组件上的v-model原理v-model编译阶段组件生成阶段 之前我们分析了Vue中v-model指令在普通表单元素上的使用原理(点击这里跳转),这一节我们继续分析v-model指令在组件上的原理。 组件上的v-model原理 v-model指令在组件上的编译过程的parse阶段与在表单...[2022/5/18]

Vue实现五子棋小游戏

Vue实现五子棋小游戏

本文实例为大家分享了Vue实现五子棋小游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> ?? ?<meta charset="utf-8"> ?? ?<title>五子棋...[2022/5/9]

vue3实现国际化的过程与遇到的问题详解

目录前言安装引入使用遇到的问题总结 前言 开发了一个国际化的项目,技术栈是vue3 + TS + vite + vant + pinia, 需要设置多语言,采用的是vue-i18n这一个国际化插件,貌似只看到英文文档,而且网上找的其他教程大部分是针对vue2的,对应vue3的比较少,所以自己整理...[2022/5/9]

脚手架(vue-cli)创建Vue项目的超详细过程记录

目录cli3.x/4.x创建Vue项目1.创建项目2.项目手动配置3.选择vue版本4.路由模式5.配置文件的存放位置6.配置保存项目创建成功总结  cli3.x/4.x创建Vue项目 1.创建项目 vue create vue_project(项目名) 敲击回车,出现以下页面...[2022/5/9]

Vue实现飞机大战小游戏

目录使用 Vue 开发一个简略版的飞机大战小游戏一、实现思路二、所需知识点三、实现步骤 使用 Vue 开发一个简略版的飞机大战小游戏 如题,假设你为了向更多访问你博客的人展示你的技术,你决定小试身手开发一个飞机大战小游戏。功能: 开始游戏前用户名必填,玩家可以发射子弹,敌军与行星随机出现,鼠标可...[2022/5/9]

vue计算属性及函数的选择

目录一、计算属性使用场景定义格式普通写法使用格式示例 —— 数组求和computed有缓存二、总结 一、计算属性 使用场景 从已有的数据A中计算等到的新的数据B,使用计算属性。 如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据。...[2022/5/9]

vue3使用自定义hooks获取dom元素的问题说明

目录使用自定义hooks获取dom元素问题分享下楼主自己的观点vue获取/操作组件的dom元素下面是我的代码内容(非全部内容)最后总结 使用自定义hooks获取dom元素问题 在自定义hooks的onMounted事件里面 获取ref元素,组件调用hooks的时候必须要传递响应式对象。 分享...[2022/4/18]

vue3中的hook简单封装

目录vue3的hook封装vue3的hooks总结下面总结一下如何去书写hooks计数器的hook vue3的hook封装 vue3最新鲜的就是组合式API了,通过组合式API我们可以把一些复杂的逻辑或一些常用的逻辑封装成一个个hook来进行调用,这样的方式也更易于维护。 使用 impo...[2022/4/18]

vue实现日历组件

vue实现日历组件

基于VUE实现日历组件,供大家参考,具体内容如下 年和月份是使用输入框来切换的,没有做成选择框,??和??切换月份,红色选取是选取的日期实现思路和网上的大多数一样,首先是把月份的天数存进一个数组, monthDay:[31,'''',31,30,31,30,31,31,30,31,3...[2022/4/18]

基于Vue3实现的图片散落效果实例

目录背景做啥好呢出现问题原理HTML结构准备5张图片创建div切换背景图片div存在间隙的问题代码详情总结 背景 今天又是美好的摸鱼一天,刚刚进入职场,觉得一切都很新鲜,导师给的任务也不多(要是每天都是这样就好了),于是开始带薪学习。 做啥好呢 没事在网上乱逛的时候,偶然间看到一个动画效...[2022/4/18]

Vue使用vue-drag-resize生成悬浮拖拽小球

Vue使用vue-drag-resize生成悬浮拖拽小球

本文实例为大家分享了使用vue-drag-resize生成悬浮拖拽小球的具体代码,供大家参考,具体内容如下 一、下载依赖 cnpm install ?vue-drag-resize 二、main.js引用 import VueDragResize from ''vue-drag-res...[2022/4/18]

vue新手入门出现function () { [native code] }错误的解决方案

目录 出现function () { [native code] }错误的解决 vue使用过程中遇到的bug及解决 1.用event.target操作当前元素出现bug 2.data数据更新之后渲染页面是异步的 3.v-cloak解决网络不好时页面显示双花括号{{}}问题 4.v-pre跳过组件和子...[2022/4/11]

vue使用动画实现滚动表格效果

本文实例为大家分享了vue使用动画实现滚动表格效果的具体代码,供大家参考,具体内容如下 需求 在一些大屏项目中,需要使用到表格行数据滚动。本文介绍在vue项目中使用动画实现滚动表格。 vue代码如下 <template> ? <div style="curs...[2022/4/11]

vue使用fengMap速度慢的原因分析

目录使用fengMap速度慢原因vue在使用中的一些小技巧1. 多图表resize事件去中心化2. 全局过滤器注册3. 全局组件注册4. 不同路由的组件复用5. 高阶组件6. 路由根据开发状态懒加载7 vue-loader小技巧8. render 函数 使用fengMap速度慢原因 fengMa...[2022/4/11]

Vue实现列表跑马灯效果

本文实例为大家分享了Vue实现列表跑马灯效果的具体代码,供大家参考,具体内容如下 Vue文件中: <ul cla ="GZDT_list clearfix active" @mouseover="stopScroll" @mouseout="startScroll"> ? ?...[2022/4/11]

Vue实现动态控制表格列的显示和隐藏

本文实例为大家分享了Vue实现动态控制表格列的显示和隐藏的具体代码,供大家参考,具体内容如下 效果如图: 表头标题是重复的、为了能看到滚动效果 v-if=“lists[0].ispa ” 来判断表格列的状态每一列是否显示或隐藏 勾选则展示、取消勾选隐藏、默...[2022/4/11]

vue实现纯前端表格滚动分页加载

本文实例为大家分享了vue实现表格滚动分页加载的具体代码,供大家参考,具体内容如下 实现效果 实现过程 <div ? ? style="width: 100%; overflow: hidden; position: relative" ? ? id="containe...[2022/4/11]

Vue如何实现分批加载数据

目录分批加载数据滚动加载数据 分批加载数据 最近在写vue的项目,因为后台返回的数据量太大,在调用了高德地图渲染"polygon"覆盖物的时候处理不过来,直接蹦掉了,然后后台小哥哥和我讲可以分批处理~没想到真的是快了很多很多,眼过千变不如手过一遍~,在此记录一下!!! 首...[2022/4/11]

vue实现web滚动条分页

本文实例为大家分享了vue web滚动条分页的具体代码,供大家参考,具体内容如下 1.在你的帮助类里面新建一个slidePagination.js文件 2.将下面的代码复制进去 import Vue from ''vue'' 聚焦指令 注册一个全局自定义指令 `v...[2022/4/11]

vue组件代码分块和懒加载讲解

目录懒加载组件问题与解决方案加载中组件错误处理组件preload 和 prefetch总结 前端开发中,随着业务和页面增加,以组件为基本单位的结构下,组件数量会增长极快,为了优化我们会很显然地想要进行一些工作: 代码分块懒加载非必要资源文件 非必要资源,指的首次渲染出某页面所不必要的资源,如因...[2022/4/11]

vue实现记事本案例

vue实现记事本案例

本文实例为大家分享了vue实现记事本案例的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> ? <head> ? ? <meta charset="UTF-8"> ? ? <me...[2022/4/11]

vue实现选项卡小案例

本文实例为大家分享了vue实现选项卡小案例的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> ? <head> ? ? <meta charset="UTF-8"> ? ? <m...[2022/4/11]

vue实现消息向上无缝滚动效果

本文实例为大家分享了vue实现消息向上无缝滚动效果的具体代码,供大家参考,具体内容如下 代码: <ul cla ="new-list" :cla ="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()"> ? &...[2022/4/11]

浅谈Vue的双向绑定和单向数据流冲突吗

浅谈Vue的双向绑定和单向数据流冲突吗

目录前言单向绑定 vs 双向绑定单向数据流 vs 双向数据流为什么说v-model只是语法糖总结参考资料 前言 众所周知,Vue中更加推荐单向数据流的状态管理模式(比如Vuex),但Vue同时支持通过v-model实现双向数据绑定。那么问题来了,单项数据流和双向数据绑定的概念,这两种不是相互冲突...[2022/4/11]

vue之prop与$emit的用法说明

目录prop与$emit的用法1.vue组件Prop传递数据2.子组件可以使用$emit触发父组件的自定义事件今天遇到的坑--this.$emit我的实现方法效果问题来了,问题解决 prop与$emit的用法 1.vue组件Prop传递数据  组件实例的作用域是孤立的,这意味着不能...[2022/4/11]

使用vue导出excel遇到的坑及解决

目录vue导出excel遇到的坑需求准备工作vue导出excel表报错处理 vue导出excel遇到的坑 需求 Vue+element UI el-table下的导出当前所有数据到一个excel文件里。 先按照网上的方法,看看有哪些坑 准备工作 1、安装依赖:yarn add x...[2022/4/7]

vue+F2生成折线图的方法

本文实例为大家分享了vue+F2生成折线图的具体代码,供大家参考,具体内容如下 1、效果图 2、打开命令窗口,通过 npm 安装F2 npm install @antv/f2 --save 3、使用 import 或 require 引入F2 const F2 = req...[2022/4/7]

Vue使用MD5对前后端进行加密的实现

目录前端后端 前后端分离的项目,遇到了对密码进行加密的情况,在前端或者是在后端加密都是可以的。但是从用户数据的安全性来讲,前后端是都需要进行加密的。后端不加密的话,数据库中存储明文密码,就可以从数据库窃取用户密码。前端不加密的话,在异步传输的过程中,就可以获取传输的明文密码,就会导致密码泄露。当然,...[2022/4/7]

Vue中使用jsencrypt进行RSA非对称加密的操作方法

在线生成生成RSA密钥对:http: web.chacuo.net/netrsakeypair 下载jsencrypt cnpm i -S jsencrypt 引入 import { JSEncrypt } from "jsencrypt"; 基本使用 注意:要加密的数据必...[2022/4/7]

vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决

目录vue-cli3.0修改打包后的文件地址和文件名问题描述修改文件名报错解决vue文件夹名称修改导致错误 vue-cli3.0修改打包后的文件地址和文件名 问题描述 最近开发一个web端vue项目时使用了vue-cli3.0搭建项目目录,开发过程中一切顺利,没有遇到什么问题,开发完毕打包上...[2022/4/7]

Vue&nbsp;简单配置公用接口地址方式

目录简单配置公用接口地址首先配置package.json 文件下的配置.env.build 和 .env.test 文件vue.config.js 文件配置vue接口路径配置创建文件axios获取json文件内容 简单配置公用接口地址 有时候需要本地和线上需要不同的接口地址, 这个时候可以根据 ...[2022/3/29]

vue-cli3.0项目打包后如何修改访问后端地址

vue-cli3.0项目打包后如何修改访问后端地址

目录打包修改访问后端地址问题解决项目打包后直接修改ip地址实现方案1. 方案一2. 方案二3. 方案三 打包修改访问后端地址 问题 原本是将访问后台的地址写在代码里面,但是这样的话打包之后就不能修改了,只能在代码里面修改,然后重新打包 解决 在vue-cli3.0之前的版本,项目目录...[2022/3/29]

vue3动态加载对话框的方法实例

vue3动态加载对话框的方法实例

目录简介常规方式使用对话框异步动态加载使用方式TestModal.vue使用结果动态操作对话框的实现DzModalService.tsmain.ts总结 简介 介绍使用vue3的异步组件动态管理对话框组件,简化对话框组件使用方式。本文使用的是vue3、typescript、element_plu...[2022/3/29]

vue&nbsp;cli4.0&nbsp;如何配置环境变量

vue&nbsp;cli4.0&nbsp;如何配置环境变量

目录1.创建不同环境变量文件2.给.env文件添加内容3.在package.json中添加不同环境对应的执行语句4.使用 温馨提示:本文只适用于vue-cli 3.0及以上的版本哦~ ------------------正文开始------------------ 开发项目时,经常会需要在不...[2022/3/29]

Vue组件公用方法提取mixin实现

Vue组件公用方法提取mixin实现

目录一.应用场景二.实现方法1.提取js共用方法文件2.引入三.注意事项 一.应用场景 多个组件共用一个方法时可以用 mixin 抽取到一个js文件中,作为共用方法 二.实现方法 1.提取js共用方法文件 export const common = { ?? ? ?? ? ...[2022/3/29]

373
2
记录数:768 页数:1/1612345678910下一页尾页
 友情链接: NPS
加载更多