编程开发 - 教程之家

400浏览

0评论

vue深度优先遍历多层数组对象方式(相当于多棵树、三级树)

目录深度优先遍历多层数组对象比如树结构是这样的vue遍历包含数组的对象请求来拿到后数据格式是下面这种最终在html中这样遍历深度优先遍历多层数组对象这个方法如果是对于...

2022-12-31 22:43:02

161浏览

0评论

Vue中实现v-for循环遍历图片的方法

目录v-for循环遍历图片的方法解决方法如下vue循环显示多个图片小扩展（require 和 import）v-for循环遍历图片的方法写项目时，遇到后台无法提供背景图片，需要自己在本地循环遍历到...

2022-12-31 22:43:00

129浏览

0评论

Vue extend使用示例深入分析

目录一、使用场景二、补充组件注册三、深度解析Vue.extend()虽然已近用过很多次了，但都没有深入思考过这个东西，仔细想了想，有点意思一、使用场景按需使用组件，也叫懒加载，性能蹭...

2022-12-31 22:42:57

226浏览

0评论

vue使用vue-video-player无法播放本地视频的问题及解决

目录使用vue-video-player无法播放本地视频方法使用vue-video-player播放视频及遇到的问题安装引入使用vue-video-player无法播放本地视频方法因为引入的是本地资源，要把资源...

2022-12-31 22:42:55

136浏览

0评论

vue 数组添加数据方式

目录vue 数组添加数据数据添加分为三种方法动态向数组中添加对象（关于v-for，input和push）核心：深拷贝vue 数组添加数据数据添加分为三种方法1.unshift()2.push()3.splice()<temp...

2022-12-31 22:42:53

138浏览

0评论

Vue--keep-alive使用实例详解

目录简介公共代码动态组件实例不加keep-alive加keep-aliverouter-view实例不加keep-alive加keep-alive（加到App.vue里）加keep-alive（加到Parent.vue里）简介说明本文用示例介绍Vu...

2022-12-31 22:42:52

132浏览

0评论

Vue Computed底层原理深入探究

今天面了家小公司，上来直接问 computed 底层原理，面试官是这样问的，data 中定义了 a 和 b 变量。computed 里面定义了 c 属性，c 的结果依赖与 a 和 b，模板中使用了变量 c。假设改...

2022-12-31 22:42:48

132浏览

0评论

vue3 Vite 进阶rollup命令行使用详解

目录rollup介绍以命令行方式打包Tree ShakingRollup 的命令行使用命令行format 格式rollup.config.js设置/获取环境变量插件 pluginsrollup介绍开源类库优先选择以 ESM 标准...

2022-12-31 22:42:46

159浏览

0评论

Vue2和Vue3的10种组件通信方式梳理

目录propsemitattrs和listenersprovide/injectparent/childrenexpose&refEventBus/mitt写在最后Vue中组件通信方式有很多，其中Vue2和Vue3实现起来也会有很多差异；本文将通过选...

2022-12-31 22:42:45

149浏览

0评论

vue 如何删除数组中的某一条数据

目录删除数组中的某一条数据删除普通数组删除数组对象使用splice()删除数组中的一个数据删除数组中的某一条数据删除普通数组let arr = [1,2,3,4,5];//方法一let index = ar...

2022-12-31 22:42:43

191浏览

0评论

Vue中对数组和对象进行遍历和修改方式

目录对数组和对象进行遍历和修改1、对数组进行循环2、修改数组的时候，不能直接通过下标去增加修改删除3、对对象进行循环4、增加对象的时候修改数组和对象的特殊情况以及修...

2022-12-31 22:42:41

170浏览

0评论

Vue3中插槽(slot)用法汇总(推荐)

目录什么是插槽默认内容具名插槽动态插槽名作用域插槽作用域插槽具名作用域插槽写在最后Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过，但是你是否了解它全部用法呢？本篇...

2022-12-31 22:42:39

128浏览

0评论

Vue el-menu 左侧菜单导航功能的实现

目录引言一级菜单实现最简单的一级菜单设置菜单背景颜色和文字颜色设置选中后菜单文字颜色在菜单中加入图标二级菜单实现二级菜单修改分析【其实很简单】：三级菜单实现三级菜...

2022-12-31 22:42:37

146浏览

0评论

el-table点击某一行高亮并显示小圆点的实现代码

<el-table height="93%" :header-cell-style="{background:'#E5EBF1',color:'#517085'}"...

2022-12-31 22:42:30

150浏览

0评论

Vue实现未登录跳转到登录页的示例代码

1、登录页登录成功时将服务端返回的标识存放起来2、在router中给不需要登录的页面设置 meta : { auth : false }，如首页 3、使用路由前置守卫beforEach，由于给路由设置了meta...

2022-12-31 22:42:28

147浏览

0评论

vue跨域proxy代理配置详解

目录引言例一例二总结引言相信很多人都用过proxy，这里就不多说proxy的基本使用，这里要说一下很多人使用proxy的一个误区，大家一般都是直接将管官方的例子拿过来，修改一下代理目...

2022-12-31 22:42:25

155浏览

0评论

vue原生input输入框原理剖析

目录正文v-model正文首先我们来看一段代码：<input value="value">这里是一个原生的input输入框，每一个原生的输入框都会有一个value的属性来用于存储用于输入的最新的数据。如...

2022-12-31 22:42:22

148浏览

0评论

vue 如何引入本地某个文件 require

目录vue 引入本地某个文件 require1.使用require.context判断某个文件是否存在2.使用 try……catch……vue 引入本地文件无效解决方法vue 引入本地...

2022-12-31 22:42:21

169浏览

0评论

Vue 项目性能优化方案分享

目录前言一、代码层面的优化1.1、v-if 和 v-show 区分使用场景1.2、computed 和 watch 区分使用场景1.3、v-for遍历必须为item添加key,且避免同时使用v-if1.4、长列表性能...

2022-12-31 22:42:18

137浏览

0评论

Vue子组件内的props对象参数配置方法

目录一、简单数据类型1、布尔类型 Boolean正确写法：2、数字类型 Number正确写法：3、字符串类型 String正确写法：二、复杂数据类型1、数组 Array错误写法：Eslint 语法报错：正...

2022-12-31 22:42:16

128浏览

0评论

关于vue3 vuex4 store的响应式取值问题解决

场景：在页面中点击按钮，数量增加，值是存在store中的，点击事件，值没变。<script setup lang="ts">import { useStore } from '@/vuex';const store = useStore()const onSubmit =...

2022-12-31 22:42:13

108浏览

0评论

Vue图片裁剪功能实现代码

目录一、效果展示：1、表单的图片上传项：2、裁剪框页面二、代码部分1、首先安装Vue-Cropper，基于此组件的基础上开发的裁剪页面2、裁剪弹窗的组件编写：3、【图片上传表单项】组件...

2022-12-31 22:42:12

112浏览

0评论

Vue 2阅读理解之initRender与callHook组件详解

目录initRender 组件渲染初始化callHook('beforeCreate')initRender 组件渲染初始化在 initEvents 事件系统初始化完成之后，紧接着的就是组件实例的渲染部分的初始化...

2022-12-31 22:42:09

99浏览

0评论

vue.js动态修改background-image问题

目录vue.js动态修改background-imagevue中background-image问题解决方案小结vue.js动态修改background-image网上搜罗了一圈都没找到vue.js动态修改background-image的相关...

2022-12-31 22:42:07

102浏览

0评论

vue弹窗父子组件调用问题示例详解

目录一、vue弹窗父子组件 emit 传图片二、vue父组件调用子组件里的不同方法一、vue弹窗父子组件 emit 传图片1、:modal-append-to-body="false"为了解决element ui中引入d...

2022-12-31 22:42:05

95浏览

0评论

vue项目打包优化的方法实战记录

目录1.按需加载第三方库2.移除console.log3. Close SourceMap4. Externals && CDN5.路由懒加载的方式总结1.按需加载第三方库例如 ElementUI、lodash 等a, 装包npm install...

2022-12-31 22:42:04

103浏览

0评论

Element UI中table单元格合并的解决过程

目录引言解决思路：1、格式化后台返回的数据（根据实际数据格式处理）2、在 data 中定义数据，需要合并几列就定义几个数组和索引3、定义合并函数4、table 组件属性 span-method 的...

2022-12-31 22:42:01

115浏览

0评论

Vue3+Vite实现动态路由的详细实例代码

项目基本目录1.首先定义初始默认的路由routes(router.js文件),vue文件使用import引入可以按需加载import { createRouter, createWebHashHistory} from "vue-router";...

2022-12-31 22:41:59

118浏览

0评论

vue长列表优化之虚拟列表实现过程详解

目录前言实现原理实现代码总结前言应用场景:后台一次性发送上千条或更多数据给前台场景模拟:用户发起一个请求,后台发送了10w条数据使用虚拟列表之前:前台需要生成10w个dom...

2022-12-31 22:41:57

129浏览

0评论

vue项目依赖升级报错处理方式

目录vue项目依赖升级报错处理当启动vue项目安装依赖时报错vue项目依赖升级报错处理1.Vue Router 升级到3.5.1报错：Navigation cancelled from "/login" to "/" with a new na...

2022-12-31 22:41:54

106浏览

0评论

Vue cli及Vue router实例详解

目录前言:1. 安装1.1 npm安装1.2 vue-cli安装2. 初始化项目2.1vue init命令讲解2.2 项目初始化3. 运行项目4. 成功页面5. 项目结构5.1 总体框架5.2 配置目录文件详解5.3src...

2022-12-31 22:41:52

426浏览

0评论

vue中的inject用法及说明

目录vue inject用法作用：刷新vue组件使用prvide inject的超级的一个大坑解决的办法vue inject用法作用：刷新vue组件使用方法：在APP.vue中 provide(){ return...

2022-12-31 22:41:49

139浏览

0评论

Vue Router解决多路由复用同一组件页面不刷新问题(场景分析)

目录简介问题复现代码测试解决方案方案1：导航守卫方案2：watch监听$route方案3：父组件router-view指定key其他网址简介说明本文介绍如何解决Vue的多路由复用同一组件页面不刷新...

2022-12-31 22:41:46

377浏览

0评论

vue中img或元素背景图片无法显示或路径错误的解决

目录img或元素背景图片无法显示或路径错误背景图片打包后出现的路径引用错误问题img或元素背景图片无法显示或路径错误1.在给vue中img元素动态绑定图片路径时会显示不出来图...

2022-12-31 22:41:38

118浏览

0评论

vue子组件通过.sync修饰符修改props属性方式

目录子组件通过.sync修饰符修改props属性子组件修改父组件prop的几种方式常用方式取巧方式子组件通过.sync修饰符修改props属性在vue子组件中，如果我们直接修改props中的属性...

2022-12-31 22:41:36

133浏览

0评论

Vue3+Element Plus使用svg加载iconfont的处理方法

目录安装依赖将iconfont封装成svg如何使用设置”hover“样式为什么图标颜色无法修改？总结安装依赖由于我们是Vue3项目，可以使用vite来快速创建一个Vu3项目：npm insta...

2022-12-31 22:41:26

107浏览

0评论

Vue 实现新国标红绿灯效果实例详解

目录引言1 组件分析1.1 lamp1.2 lamp-group1.3 traffic-lamp2 全局文件定义2.1 样式变量2.2 常量定义2.3 导入资源3 组件开发3.1 实现 lamp 组件3.2 实现 lamp-group 组件3....

2022-12-31 22:41:24

95浏览

0评论

vue3:setup语法糖使用教程

目录1.setup语法糖简介2.setup语法糖中新增的api2.1defineProps2.2defineEmits2.3defineExpose补充：与普通的script一起使用总结1.setup语法糖简介直接在script标签中添加set...

2022-12-31 22:41:22

116浏览

0评论

Vue 2源码阅读 Provide Inject 依赖注入详解

目录Provide/Inject 初始化1. initInjections 依赖初始化2. initProvide 注入数据初始化总结Provide/Inject 初始化1. initInjections 依赖初始化该步骤其实发生在 initStat...

2022-12-31 22:41:20

496浏览

0评论

vue-i18n的9以上版本中@被用作特殊字符处理,直接用会报错问题

目录vue-i18n的9以上版本中@被用作特殊字符处理解决方法vue@2.6.14安装vue-i18n报错peer vue@“^3.0.0“ from vue-i18n@9.1.9vue-i18n的9以上版本中@被用作特殊...

2022-12-31 22:41:18

118浏览

0评论

vue安装less-loader依赖失败问题及解决方案

目录vue安装less-loader依赖失败安装less-loader报错 unable to resolve dependency tree降低 less-loader 版本vue安装less-loader依赖失败vue可视化面板中提供的less-load...

2022-12-31 22:41:17

114浏览

0评论

详解vue route介绍、基本使用、嵌套路由

目录前言一、介绍、安装1.定义2.安装二、基本使用（代码后赋）三、嵌套路由1.布局逻辑2.效果展示3.代码四、注意前言想要学习完整内容请关注主页的专栏———&md...

2022-12-31 22:41:14

109浏览

0评论

vue3项目新用户引导组件driver.js示例详解

好用的用户引导插件有 intro.js 和 driver.js 两个，对比了一下，最终还是使用了driver.js
主要有以下原因：用法简单可以商用总要选一个吧项目使用的是vue3+ts
因为多个地方需要...

2022-12-31 22:41:10

113浏览

0评论

Vue使用provide各种传值后inject获取undefined的问题及解决

目录使用provide各种传值后inject获取undefined不如直接让爷爷组件传thisinject接收不到provide中的值一、question？？？二、Why三、Answer使用provide各种传值后inject获取undef...

2022-12-31 22:41:08

126浏览

0评论

vue.js引用背景图background无效的3种解决方案

目录效果图预览1. 正确的代码，示例如下2. 错误的代码，截图对比vue添加背景图没反应＃vue.js项目中，出现css调用background背景图无效？如何解决？或者调用<img>标签，也无效果？直接上代...

2022-12-31 22:41:05

108浏览

0评论

详解Vue 2中的 initState 状态初始化

目录initState 状态初始化1. initProps2. initSetup3. initMethods4. initData5. initComputed 与 initWatchinitState 状态初始化在配置标准化合并以及声明周期初始化完成...

2022-12-31 22:41:03

120浏览

0评论

一文秒懂vue-property-decorator

目录我们来看下页面上代码展示:1.@Component(options:ComponentOptions = {})2.@Prop(options: (PropOptions | Constructor[] | Constructor) = {})3，@PropSync(propName: s...

2022-12-31 22:41:01

103浏览

0评论

vue 3.0 使用ref获取dom元素的示例

前言附上vue3.0文档：Vue3中文文档 - vuejsVue 2.x获取DOM<div ref="myRef"></div>this.$refs.myRefVue 3.0获取单个DOM<template> <div ref="myRef">获取单个DOM元素</div><...

2022-12-31 22:40:59

117浏览

0评论

Vue中transition标签的基本使用教程

目录transition 标签配合 animation配合 transitiontransition-group 标签动画库 animate.css总结transition 标签transition 标签：Vue 的内置动画标签作用：在 [插入] / [更新...

2022-12-31 22:40:56

105浏览

0评论

vue项目中安装less依赖的过程

目录vue安装less依赖一、安装less依赖二、修改webpack.base.conf.js文件vue中less知识点总结安装变量（Variables）混合（Mixins）嵌套（Nesting）运算（Operations）转义（Escaping）函数（Functi...

2022-12-31 22:40:54

热门文章