vue3中的ref()详解

目录ref()1. ref在模板中自动解包2. ref 在响应式对象中的解包3. 数组和集合类型的 ref 解包总结ref()接受一个值,返回一个响应式的,可以修改的ref对象,这个对象只有一个.vaule...

Vue项目中实现ElementUI按需引入过程解析

目录前言按需引入一、误区二、正确手法1、安装插件2、更改.babelrc配置3、 新建auto-import-elementUI.js文件,注册需要用到的组件4、main.js引入前言为了减小项目打包体积,提...

Vue自定义组件中v-model的使用方法示例

目录Vue2中使用Vue3中使用v-model 使用 modelValue自定义 v-model 的使用的参数多个 v-model 绑定自定义v-model 的修饰符参考:总结Vue2中使用2.2.0+ 新增一个组件上的 v-mod...

Vue3学习笔记之依赖注入Provide/Inject

Provide / Inject通常,当我们需要从父组件向子组件传递数据时,我们使用 props。想象一下这样的结构:有一些深度嵌套的组件,而深层的子组件只需要父组件的部分内容。在这种情况下...

vue中使用echarts的方法实例详解

1、安装npm install echarts --save2、在vue中引入(全局引入)// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts3、在vue中的使用需要用到echart...

Vue自定义指令学习及应用详解

目录一、自定义指令v-mycolor二、使用钩子函数的自定义指令三、Vue实现简单的学生信息管理系统除了核心功能默认内置的指令,Vue.js允许注册自定义指令。添加一个自定义指令,有...

vue的路由动画切换页面无法读取meta值的bug记录

目录vue路由动画切换页面无法读取meta值的bug问题原因解决方法vue路由元信息meta路由元信息设置title权限校验(例:登录校验)总结vue路由动画切换页面无法读取meta值的bug在vue...

示例解析Ant Design Vue组件slots作用

正文在 Ant Design Vue 中,slots 是用来定义组件内容的一种方式。它允许你在组件内部插入一些额外的内容或者修改组件的一部分内容。在 Ant Design Vue 中,有两种类型的 slots...

vue使用动态组件实现TAB切换效果完整实例

目录一、方法1:使用Vant组件库的tab组件二、 方法2:手动创建tab切换效果三、完整代码总结一、方法1:使用Vant组件库的tab组件Vant 2 - Mobile UI Components built on Vue二、...

Vue中如何实现动态路由的示例代码

目录前言实现效果使用的技术栈实现思路具体实现首先我们来设计数据封装一下axios函数使用vuex实现全局数据共享将数据转化为树形化结构基础路由模块实现动态路由在main.js中...

vue3页面跳转的两种方式

目录1、标签内 router-link跳转2、编程式路由导航vue3的页面跳转有两种方式,第一种是标签内跳转,第二种是编程式路由导航1、<router-link to='/testDemo'> <button>点击跳转1<...

解析使用useDark(),发现transition 动画失效

目录先上个示例如果把代码改一下过渡效果先上个示例<template> <div class="theme-change"> <button class="switch" @click="toggleTheme" rol...

vue中定义全局声明vscode插件提示找不到问题解决

正文我在学习使用vue3和ts,但是当我写完全局声明文件的时候,在ts文件或者.vue文件使用该类型时都提示没有该类型,为什么?具体信息:我在src文件夹下的types文件夹定义全局声明文...

vue项目打包部署跨域的实现步骤

目录1.前端工程解决办法1.1开发时候解决办法1.2打包部署后解决办法2.后端工程解决办法跨源资源共享(CORS,或通俗地译为跨域资源共享)是一种基于 HTTP 头的机制,该机制通过允许服...

Vue滑块验证码组件anji-captcha的使用案例详解

目录说明快速开始前端后端测试说明最近需要改一下首页界面,将之前的字符验证码改成滑块验证码(这样更好用一些),找了一下发现了anji-captcha这个组件,效果如下快速开始前端首先将...

一文总结Vue和React的异同

目录相同点不同点1. 核心思想不同1.1 核心思想不同导致写法差异1.2 核心思想不同导致api差异1.3 核心思想不同导致社区差异1.4 核心思想不同导致未来升级方向不同2. 组件实...

vue中关于checkbox使用的问题

目录vue中checkbox使用问题checkbox在vue中的用法小结checkbox禁用在vue中checkbox用法vue中checkbox禁用jQuery特效setTimeout异步自定义checkbox样式原理总结vue中checkbo...

前端设置cookie之vue-cookies使用及说明

目录前端设置cookie之vue-cookies安装vue-cookies引入vue-cookiesApivue的cookies:vue-cookies设置,获取及删除指定的cookiesvue-cookie使用总结前端设置cookie之vue-cookie...

WebSocket使用以及在vue如何使用问题

目录WebSocketWebSocket 实例socket.io 简介客户端 api总结WebSocketWebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服...

moment转化时间戳出现Invalid Date的问题及解决

目录moment转化时间戳出现Invalid Date使用Moment.js处理时间戳转化为时间年月优点使用步骤总结moment转化时间戳出现Invalid Date项目用在使用moment转换时间戳的时候出现I...

vue项目中echarts自适应问题的高级解决过程

目录一、问题描述1.1 页面布局1.2 问题复现 二、解决过程2.1 增加图表resize2.2 解决canvas画布大小和容器大小不一致的问题2.3 动手添加延时2.4 监听浏览器onresize事件三...

vue等框架对Tabs、Moda等设置固定高度后没有滚动条问题

vue等框架对Tabs、Moda等设置固定高度后没有滚动条当弹窗不设置高度时,界面会根据内容自动扩充高度,内容过长时会非常难看,需要设置固定高度,当超出这个高度后悔出现滚动条。效...

Vue中created和mounted使用场景分析

目录一、生命周期概念二、浏览器渲染过程三、生命周期中的浏览器渲染beforeCreate阶段created阶段beforeMount阶段mounted阶段四、使用场景五、常见相关问题一、生命周期概...

解决vue3 defineProps 引入定义的接口报错

问题遇到的现象在setup语法糖使用了defineProps,然而在定义类型的时候一旦将接口暴露出去引用就发生了报错问题相关代码interface Props { /* ... */}export { type Pr...

关于Vue中的计算属性和监听属性详解

目录一、computed计算属性(1)计算属性的缓存(2)计算属性的setter二、watch监听属性一、computed计算属性Vue.js模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模...

Vue多布局模式实现方法详细讲解

目录1、目标效果2、原理分析1、目标效果源码地址:multipal-layout-demo: vue2实现多布局+暗黑模式默认布局:头部宽度100%,侧边栏、内容区顶部布局:头部宽度100%,内容区侧边栏布局...

vue 行为验证码之滑动验证AJ-Captcha使用详解

目录AJ-Captcha使用过程及源由验证码功能包括两种如何使用验证码参数兼容性AJ-Captcha行为验证码采用嵌入式集成方式,接入方便,安全,高效。抛弃了传统字符型验证码展示-填写字...

vue中同步方法的实现

目录vue同步方法实现有三种实现方式vue中的同步和异步问题同步异步总结vue同步方法实现有三种实现方式1、axios本身属于Promise利用函数式的then获取请求返回结果,也是最常用...

mint-ui如何自定义messageBox样式

目录mint-ui自定义messageBox样式mint UI messagebox用法总结mint-ui自定义messageBox样式mint-ui MessageBox官网文档:http://mint-ui.github.io/docs/#/zh-cn2/message-box...

vue 动态路由component 传递变量报错问题解决

目录menuList 后台数据返回格式路由里面componentmenuList 后台数据返回格式{ // 统计分析 path: '/statistics', name: 'Statistics', meta:{title: '数据统计...

vue3+ts+elementPLus实现v-preview指令

目录引文目录文件内容previewImage.vuepreview.ts使用开发中可能遇到的问题总结引文最近在用 vue3+ts 开发公司的后台系统,因为后台多处需要图片放大预览的功能,就想着封装一...

vue在install时node-sass@4.14.1 postinstall:node scripts/build.js错误解决

目录报错如下:解决方式1:解决方式2:总结今天重装了node和Vue脚手架,在install的时候报了下面的错误报错如下:Build failed with error code: 1
[npminstall:runscript:error] nod...

vue页面设置滚动失败的完美解决方案(scrollTop一直为0)

目录vue页面设置滚动失败的解决方案(scrollTop一直为0)背景误区:什么时候存在滚动条?Why scrollTop==0?如何判断页面的滚动条是哪个div产生的?vue页面设置滚动失败的解决方案(...

vue-electron中修改表格内容并修改样式

目录需求技术xlsx-style全部代码需求将表格导入并向其添加内容,然后导出表格,且表格样式(一般是值宽高合并颜色等)不能改变。技术electronxlsxxlsx-stylenode-xlsxyarn add xlsx...

vue使用Swiper踩坑解决避坑

目录我的Swiper定义:报错信息:保留默认名class:swiper-container查看GitHub我的Swiper定义:Failed to execute &#39;getComputedStyle&#39; on &#39;Window&#39;: parameter 1 i...

Vue实现电梯样式锚点导航效果流程详解

目录1、目标效果2、原理3、源代码1、目标效果最近喝了不少的咖啡、奶茶,有一个效果我倒是挺好奇怎么实现的:(1)点击左侧分类菜单,右侧滚动到该分类区域(2)右侧滑动屏幕,左侧显示当前...

Vue 实现轮播图功能的示例代码

目录1. 安装 Element UI2. 创建轮播图组件3. 组件属性和事件4. 编写样式和动画效果本文将介绍如何使用 Vue 和第三方组件库 Element UI 实现轮播图功能。我们将从以下几个方...

Vue3.2中setup语法糖的使用教程分享

目录1、如何使用setup语法糖2、data数据的使用3、method方法的使用4、watchEffect的使用5、watch的使用6、computed计算属性的使用7 、props父子传值的使用8 、emit子父传值...

Vue中修改Mint UI的Toast默认样式之字体大小调整方式

目录vue修改Mint UI的Toast默认样式之字体大小调整给Toast添加className添加样式vue修改mint-ui默认样式(默认风格) 加入my-mint.css总结vue修改Mint UI的Toast默认样式之字体...

Vuex localStorage的具体使用

目录状态管理的必要性localStorage储存和获取数据生命周期VuexVuex的概念Vuex的工作流程Vuex和localStorage的区别总结前端开发中,状态管理是一个很重要的话题。在Vue.js中, V...

vue父子组件传值不能实时更新的解决方法

最近做项目,遇到个大坑,这会爬出来了,写个总结,避免下次掉坑。vue父子组件传值不能实时更新问题,父组件将值传给了子组件,但子组件显示的值还是原来的初始值,并没有实时更新,为什么...

vue实现三级页面跳转功能

问题描述:在二级页面点击按钮,打开新的标签页实现:在router目录下的index.js文件添加对应组件{ path: '/offices', component: <strong>'Layout'</strong><strong>,</str...

一文掌握在Vue3中书写TSX的使用方法

目录插件安装与文件配置tsx语法格式tsx语法注意事项在vue2的时候就已经可以使用 jsx 语法,但是不是很友好,写起来是一件很痛苦的事情,所以你很少见到有人会在vue2中书写 jsx 语...

vue封装tree组件实现搜索功能

我使用的是 vue2 + antd, 那么 antd 的 tree 组件中没有给我们封装搜索,其官网提供的搜索也不是封装好的,而且限制比较大,因为我的树形进来要默认展开,官方的代码是进行了响应式,...

Vue实现动态显示表单项填写进度功能

目录一、序言1、业务需求2、目标效果二、原理三、全部代码一、序言1、业务需求表单项填写了,进度条就增加相应的比例,表单项未填写,进度条就 减少相应的比例2、目标效果二、原...

vue DatePicker日期选择器时差8小时问题

目录vue DatePicker日期选择器时差8小时vue中moment时间戳问题(时区问题)总结vue DatePicker日期选择器时差8小时vue中使用element-ui中的日期选择器组件时,会造成时区差。在...

javascript关闭计时器

在JavaScript中,计时器是一种常见的技术,用于定时执行某些代码。计时器常用于实现轮播图、定时获取数据、动态更新页面等功能。但是有时候开发者需要关闭计时器,本文将介绍几种...

javascript http方法

JavaScript是前端开发中的一门重要编程语言,用于处理网页中的各种交互操作。其中,http方法是一种常用的请求方式,它可以向服务器发送请求并获取响应结果。本文将探讨JavaScript...

javascript 修改django

JavaScript如何修改DjangoJavaScript是一门强大的编程语言,广泛用于前端开发。但是,它同样可以用于修改Django框架中的内容。 在本文中,我们将探讨如何在JavaScript中修改Djang...

Vue3.0在组件外使用VueI18n的情况是什么

vue3.0在组件外使用VueI18n通常将写在setup里面的代码写在外面会报错Must be called at the top of a `setup`意思是必须写在setup里面要将 i18n 与 Vue 3 的组合 API 一起...

返回顶部
顶部