Vuei18n 在数组中的使用方式Vuei18n 在数组中的使用方式
目录Vuei18n 在html页面表单和js数组中使用Vue使用i18n实现国际化如何实现国际化vue-i18n 数据渲染的模板语法Element UI组件库与vue-i18n的兼容问题路由与面包屑导航国际化的语法问题 Vuei18n 在html页面表单和js数组中使用
html的结构：
&...[2022/8/1]
Vue3项目中的hooks的使用教程
目录hooks 特点hooks 基本使用 今天我们稍微说一下 vue3 项目中的 hooks 的使用，其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的，学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉，就算没用过也一定了解过，也就是混入，通过 mixin 混入来分发 v...[2022/8/1]
vue父组件监听子组件数据更新方式(hook)
目录vue父组件监听子组件数据更新this.$on(‘hook : 生命周期钩子’, () => {})@hook:生命周期钩子=“触发的函数”监听子组件内数据变化,父组件绑定change事件子组件父组件大功告成 vue父组件监听子组件数据更新
...[2022/8/1]
vue?element-ui动态横向统计表格的实现
目录element-ui动态横向统计表格关于element-ui表格问题表格图片显示问题表格中多出一条线 element-ui动态横向统计表格
表格结构
<el-table
:data="AllData"
style="width: 100%">
...[2022/8/1]
vue引用public目录下文件的方式详解vue引用public目录下文件的方式详解
有时候我们在开发h5时候，会有需要绑卡授权操作，这个时候需要同意某些协议并且这些协议是可以点击打开的，这种该怎么做呢？其实这就是一个链接，前端能够打开链接并且常用的也就是a标签喝vue自带的router-link，当然其他还有，通常来说a标签就够了
关于协议的存储，这里简单说下，在实际开发中，...[2022/8/1]
vue中关于_ob_:observer的处理方式
目录关于_ob_:observer的处理vue中[__ob__: Observer]问题 关于_ob_:observer的处理
在使用this.list.push()后，会出现_ob_:oberver这样的对象。
网上很多地方说使用这个方法：
JSON.parse(JSON.string...[2022/8/1]
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实现简单的购物车功能
本文实例为大家分享了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 Design 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中的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 不定高展开动效原理详解
目录使用场景背景实现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中$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的异同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实现五子棋小游戏的具体代码，供大家参考，具体内容如下
<!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项目的超详细过程记录脚手架(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计算属性及函数的选择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实现日历组件，供大家参考，具体内容如下
年和月份是使用输入框来切换的，没有做成选择框，??和??切换月份，红色选取是选取的日期实现思路和网上的大多数一样，首先是把月份的天数存进一个数组，
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-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滚动条分页
本文实例为大家分享了vue web滚动条分页的具体代码，供大家参考，具体内容如下
1.在你的帮助类里面新建一个slidePagination.js文件
2.将下面的代码复制进去
import Vue from ''vue''
聚焦指令
注册一个全局自定义指令 `v...[2022/4/11]
vue组件代码分块和懒加载讲解vue组件代码分块和懒加载讲解
目录懒加载组件问题与解决方案加载中组件错误处理组件preload 和 prefetch总结 前端开发中，随着业务和页面增加，以组件为基本单位的结构下，组件数量会增长极快，为了优化我们会很显然地想要进行一些工作：
代码分块懒加载非必要资源文件
非必要资源，指的首次渲染出某页面所不必要的资源，如因...[2022/4/11]
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的双向绑定和单向数据流冲突吗
目录前言单向绑定 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]
经验首页