vue3

vue3+ts 禁止文本框自动填充内容

如果 `<input>` 元素的 `autocomplete` 属性设置为 `"off"` 但并没有起作用,这可能是因为不同浏览器对此属性的实现方式存在一些差异。 为了更可靠地禁用自动填充功能,你可以尝试以下解决方案之一: 1. 添加 `autocomplete="new-password"` 属性 ......
文本 内容 vue3 vue ts

VIte+Vue3 打包在本地 双击 index.html 打开项目

npm i @vitejs/plugin-legacy npm i @babel/preset-env npm i terser import legacy from '@vitejs/plugin-legacy'; export default defineConfig({ base:"./", ......
项目 index VIte Vue3 html

vue3中关于pinia及其持久化插件的使用

pinia是一个vue中的插件,功能是一个仓库,用来存放数据。当我们的数据在多个组件中都需要用到的时候,如果一个个向后端获取就会很麻烦。数据获取一次存放在pinia仓库中,用起来就会非常方便还减轻服务器压力。pinia官网:https://pinia.vuejs.org/zh/ ,也可以在vue的生 ......
插件 pinia vue3 vue

问题:vue3 使用 vite 构建的项目打包后无法打开index.html文件,或者显示一片空白

一、问题描述 项目build之后,点击dist文件中的index.html文件,打开是空白,提示以下信息。 二、产生原因及解决方法 1.文件路径不对 vite默认根目录"/",file://…访问需要基于index.html的路径,需要再vit.config.js中进行以下配置 2.跨域问题 vit ......
空白 文件 项目 问题 index

vue3实现前端导出Excel,默认与自定义表头中文名

参考:https://blog.csdn.net/weixin_46112225/article/details/125302036 一、依赖安装 package.json文件中(版本号其实应该可以不限制,用最新的是OK的) "dependencies": { ... "xlsx": "^0.16. ......
表头 中文名 前端 Excel vue3

Vue3 模版常用语法

一、背景 二、实现 仅支持表达式 {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} {{ author.books.length > 0 ? 'Yes' : 'No' }} <div :id="`list-${id} ......
模版 语法 常用 Vue3 Vue

Vue3 computed 计算属性函数使用

Vue3 computed 计算属性函数使用 computed函数在vue2中我们都了解过,当我们需要一个值,这个值随着其他值变化而变化,我们就将其放进computed中,computed是用来定义计算属性的。 1. 基本使用:只读 <template> <div> <div>计算属性</div> ......
函数 computed 属性 Vue3 Vue

Vue3 子组件修改父组件传过来的值

Vue3 子组件修改父组件传过来的值 1、在父组件中,找到引用的子组件,在引用中加入v-model 例如:子组件是demo,需要穿的值为num 这个有个温馨提示,(v-model +冒号+需要穿的值)这个v-model可以写多个 <demo v-model:num="num"></demo> //例 ......
组件 Vue3 Vue

vue3项目创建

1. 确保npm指令能够运行 - 官网下载nodejs Download | Node.js (nodejs.org) 安装完成后重启intellij 2. 终端输入 npm install -g create-vue 3. 终端输入 create-vue 新建vue项目 根据需要设置功能, 例: ......
项目 vue3 vue

vue3 watch 用法

<script setup> import { ref,computed,watch } from 'vue' const num = ref(1) const name = ref('ming') const obj = ref({name:'小明',age:30}) //watch 简单类型 / ......
watch vue3 vue

vue3 elementplus table表格内添加checkbox和行号

1.仅添加复选框 <el-table-column type="selection" width="55"></el-table-column> 2.添加复选框和文字行号在一列 <el-table-column> <template #header> <el-checkbox v-model="se ......
elementplus 表格 checkbox table vue3

vue3 动态加载组件

<el-dropdown style="margin: 0px"> <el-button type="primary"> 视图 </el-button> <template #dropdown> <el-dropdown-menu> <el-dropdown-item v-for="dropItem ......
组件 动态 vue3 vue

记录--vue3实现excel文件预览和打印

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 在前端开发中,有时候一些业务场景中,我们有需求要去实现excel的预览和打印功能,本文在vue3中如何实现Excel文件的预览和打印。 预览excel 关于实现excel文档在线预览的做法,一种方式是通过讲文档里的数据处理成html ......
文件 excel vue3 vue

vue3 watch 多个值

1 watch([() => baTable.form.items!.userType, () => baTable.form.items!.totalUsage, () => baTable.form.items!.payCurr], (newValue, oldValue) => { 2 // ......
多个 watch vue3 vue

vue3 和 element-plus 实现指定单元格编辑

思路 1.获取到指定单元格的位置 2.通过状态来判断 是否展示编辑 步骤 1.定义变量去确定行和列 let tableRowEditId = ref(null), // 控制可编辑的每一行 let tableColumnEditIndex = ref(null), //控制可编辑的每一列 2.在el ......
element-plus 单元 element vue3 plus

vue3|知识点

双向绑定Proxy proxy只支持对象 ref创建的数据是空对象,绑定在其value属性上。 监听属性 监听对象 watch(msg,func(new,old)) 监听对象的属性 watch(()=>msg.name,func) watchEffect(func) 自动监听已经引用的值 ......
知识点 知识 vue3 vue

记录--vue3 + mark.js | 实现文字标注功能

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 页面效果 具体实现 新增 1、监听鼠标抬起事件,通过window.getSelection()方法获取鼠标用户选择的文本范围或光标的当前位置。 2、通过 选中的文字长度是否大于0或window.getSelection().isColla ......
文字 功能 vue3 mark vue

vue3 计算属性的使用

<script setup> import { ref,computed } from 'vue' const msg = ref(1) const clickMsg = () =>{ msg.value++; console.log('+++')} const clickMsgjj = () => ......
属性 vue3 vue

Vue.js框架:vue3版本父子组件之间的传值和事件触发

一、子组件 使用vue3官方提供的setup语法糖中给出的defineEmits、defineProps来定义父子间的传参值和关联方法(useContext在3.2版本之后已去除)。 <script setup lang="ts"> import { defineProps, defineEmits ......
父子 组件 框架 之间 版本

Vue.js框架:vue3版本引入使用element-ui

一、引入element-plus element-ui只支持vue2,vue3需要引入element-plus进行使用,两个分别对应vue2和3两个版本,各自独立,无法跨级兼容。 地址:https://element-plus.gitee.io/ 在vue3项目终端里使用以下命令引入该依赖: npm ......
element-ui 框架 element 版本 vue3

Vue3 typescript script setup获取范型组件的ref

原博客地址: https://juejin.cn/post/7247433208437850169?from=search-suggest 在typescript下,如果想获取带类型的组件模板引用,官方文档中说明了方式: https://cn.vuejs.org/guide/typescript/c ......
范型 typescript 组件 script setup

vue3解构defineProps失去响应式解决办法

先看下面的代码 const props = defineProps({ showName: { type: String, default: "123", }, }); const { showName } = props; 我们发现这个东西虽然可以展示到页面但是它失去了响应式。 那么正确的使用姿势 ......
defineProps 办法 vue3 vue

如何使用 GoGoCode 一键 Vue2 转换 Vue3

前言 从今年年初开始,项目开始升级优化,将之前的 Vue2 旧版本整体升级到 Vue3 版本。在重写了几个 Vue 文件后,我发现做的都是一些机械性的工作,效率低且重复性大。于是就试着搜索了一下有没有什么能够批量转换代码格式的工具,发现了阿里的这个基于 AST 的 JavaScript/Typesc ......
Vue GoGoCode Vue2 Vue3

vue3 hooks使用watch监听注意事项

当我们再vue3 写了一个通用hooks的里面使用watch来执行某些操作要注意!!! 一个页面只能再根路由去创建实例,也就是调用 对呀hooks,如果子路由也需要使用 则由根路由 provide() 子路由inject,如果子路由都创建实例,会造成多次执行监听例如 我们由一个useSearch,来 ......
注意事项 事项 hooks watch vue3

Vue.js框架:vue3版本里数据变化监听watch和watchEffect的使用

一、监听方法 vue3中定义的变量默认不是响应式的,所以只能监听用ref和reactive定义的数据和变量。 监听前要确保引入相关依赖ref、reactive、watch: <script setup lang="ts"> import { ref,watch,reactive } from 'vu ......
watchEffect 框架 版本 数据 watch

vue3实现一个通用的右键菜单组件

1、新建一个名为ContextMenu.vue的文件 <template> <div ref="containerRef"> <slot></slot> <Teleport to="body"> <Transition @beforeEnter="handleBeforeEnter" @enter= ......
组件 菜单 vue3 vue

基于vue3+ts5+vue-router4+pinia2的PC端项目搭建教程

导语:在日常开发中,有时候会在项目中引入 ts 来解决一些 js 的问题,下面就简单介绍一下如何使用 vue3+ts+router+pinia 来搭建一个项目。 目录 简介 创建 安装 配置 实战 简介 vue3 目前是常用的 vue 版本,提供了组合式 API 以及一些新的功能和特性;ts 这种类 ......
vue-router vue 项目 教程 router

vue3+elementplus实现侧边栏收缩折叠图标(SVG)显示异常

1.背景 没有使用elementPlus自带的icon图标,而是自己使用的全局svg图标组件。 2.目前情况 侧边栏的结构有一级菜单,二级菜单多样性。 3.目前问题 当侧边栏涉及到收缩的时候,svg图标就显示不正常。 展开: 折叠: 4.解决方法 自己的图标用<el-icon></el-icon>包 ......
侧边 elementplus 图标 vue3 vue

Vue3(开发前的准备 ,了解VUE项目的项目结构)

前提装好了NODE.JS 1.创建项目 创建项目文件目录 打开控制台找到项目文件目录地址 输入命令:npm init vue@latest 输入vue项目名 选择需要添加的文件完成创建 进入文件控制台输入:cd 文件名 到文件目录下接着控制台输入npm install 也可以cnpm install ......
项目 结构 Vue3 Vue VUE

vue2和vue3导出页面为PDF格式:jspdf和html2canvas

一、vue2导出PDF使用步骤 1、安装html2canvas,将页面html转换成图片 npm install --save html2canvas 卸载: npm uninstall html2canvas 指定版本安装: npm install --save html2canvas@1.0.0 ......
html2canvas vue 2canvas 页面 格式