Vuejs从数组中删除元素的示例代码
目录Vuejs从数组中删除元素补充:vue 删除数组中的某一条数据一、删除普通数组二、删除数组对象三、欢迎添加更多方法,以上是我觉得最简单的方法 Vuejs从数组中删除元素
使用方法:arr.splice(arr.indexOf(ele),length):表示先获取这个数组中这个元素的下标,然后...[2023/2/2]
解决vue.js not detected的问题
最近在看vue的时候,发现之前装过的vuedevtools提示vue.js is not detected。重装了一次后,发现对于没有应用vue框架的页面,的确是检测不到vue.js,所以报这个很正常;切换到有vue.js资源的页面,调试界面就会自动检测出vue插件(如果还是报错,具体...[2023/2/2]
Vue computed与watch用法区分
目录computed用法watch用法 computed用法
响应式缓存每一个计算属性都会被缓存起来,只要计算属性所依赖的属性发生变化,计算属性就会重新执行,视图也会更新computed方法里面的属性不能在Date中定义.具有缓存性,页面重新渲染值不变化,,计算属性会立即返回之前的计算结果,而不必...[2023/2/2]
一文带你了解Vue3中toRef和toRefs的用法
toRef 顾名思义,不是ref 响应式数据,给它转成ref 响应式数据
通俗易懂的理解:
<template>
<h3>姓名:{{ person.name }}</h3>
<h3>年龄:{{ person.age }...[2023/2/1]
解决Vue路由导航报错:NavigationDuplicated:?Avoided?redundant?navigation?to?current?location
目录一、描述问题二、报错原因三、解决方法1、安装vue-router3.0以下版本2、为每一个Promise添加一个回调函数3、修改VueRouter原型对象上的push/replace方法四、原理分析五、额外补充1、路由导航方式2、Promise函数?总结 点击vue路由跳转,控制台报错:Avoi...[2023/2/1]
Vue编译优化实现流程详解Vue编译优化实现流程详解
目录动态节点收集与补丁标志1.传统diff算法的问题2.Block和PatchFlags3.收集动态节点4.渲染器运行时支持5.Block树静态提升预字符化缓存内联事件处理函数v-once 动态节点收集与补丁标志
1.传统diff算法的问题
对于一个普通模板文件,如果只是标签中的内容发生了变...[2023/1/30]
Vue3跨域解决方案实例详解
vue项目配置代理
vue.config.js
const { defineConfig } = require(''@vue/cli-service'')
module.exports = defineConfig({
transpileDependencies: true,
...[2023/1/28]
Vue3父子通讯方式及Vue3插槽的使用方法详解
在Vue3中父子通讯方式
Vue3父传子(props)
父组件如下:
<template>
<div cla ="about">
<h1>This is an about page</h1>
<childre...[2023/1/28]
Vue3通过ref操作Dom元素及hooks的使用方法
Vue3 ref获取DOM元素
<div ref="divBox">Hello</div>
import {ref,onMounted} from ''vue''
setup() {
const divBox = ref(null);
o...[2023/1/28]
Vue3异步组件Suspense的使用方法详解
Suspense组件
官网中有提到他是属于实验性功能:<Suspense> 是一项实验性功能。它不一定会最终成为稳定功能,并且在稳定之前相关 API 也可能会发生变化。<Suspense> 是一个内置组件,用来在组件树中协调对异步依赖的处理。它让我们可...[2023/1/28]
Vue3+Vite项目使用mockjs随机模拟数据
在vite中使用mockjs进行模拟数据,需要借助新的依赖进行使用
一、安装mockjs
yarn add mockjs -S 或 npm i mockjs -D
二、安装vite-plugin-mock
npm i vite-plugin-mock -D
三、在src/mo...[2023/1/28]
Vue3+TS+Vant3+Pinia(H5端)配置教程详解
该模板将帮助您开始使用Vue 3、Vite3.0中的TypeScript以及Pinia、Vant3进行开发。该模板使用Vue3,请查看文档了解更多教程。
推荐的IDE设置
VS Code + Volar
键入支持。TS中的vue导入
因为TypeScript无法处理...[2023/1/28]
Vue+echart 展示后端获取的数据
最近在合作做一个前后端分离项目时,为了测试我写的后端部分获取数据的效果,自己也学了一下 vue 的知识,在获取 json 信息这里也踩了很多坑。
这里列举下我返回的 json 部分信息:
{
"house_basic": [
{
"HOUSE_ID": "00001"...[2023/1/18]
图文详解Vue3没有代码提示问题的解决办法
在上一篇笔记中提到了Vue3+vite+Ts写代码过程中,出现的代码自动补全失效功能,今天来谈谈如何解决这个问题。
首先,我们已经很明确的就是安装了volar插件之后,HTML标签片段补全已经失效,即在template中书写HTML标签时,不会再有代码补全,即输入“div&rdqu...[2023/1/18]
vue elementui表格获取某行数据(slot-scope和selection-change方法使用)
效果图:
1.当写后台管理页面时,使用element ui里的table表格时,表格中有操作按钮,获取当前行的数据时,我们可以使用 slot-scope="scope"来获取。
<el-table-column label="操作" align="cent...[2023/1/18]
vue3 element-plus二次封装组件系列之伸缩菜单制作
目录1、效果 2、主要逻辑代码 1、效果
折叠效果--只剩图标
展开效果--有图标有文字
2、主要逻辑代码
home.vue--主页代码
<template>
<div cla ="common-layout">
...[2023/1/18]
vue pdf二次封装解决无法显示中文问题方法详解
目录前言完整代码解决无法显示中文问题 前言
vue-pdf 可以实现PDF文件在线预览并且支持分页。安装方式:npm install --save vue-pdf
完整代码
<template>
<el-dialog :visible="visibl...[2023/1/18]
Vue 快速入门(一)Vue 快速入门(一)
1、介绍
Vue(读音/vju/,类似view),是中国的大神尤雨溪开发的,为数不多的国人开发的世界顶级开源软件。是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用。MVVM响应式编程模型,避免直接操作DOM,降低DOM操作的复杂性。
Vue官网地...[2023/1/16]
vue3中的伸缩菜单组件
目录vue3伸缩菜单组件效果图总结 vue3伸缩菜单组件
最近一直在学习分装组件,学到了一个伸缩菜单栏组件,浅浅的记录一下,想要封装菜单的,代码可以直接拿去用,稍作修改即可!
效果图
1.在components下面创建一个container的文件,在container文件下面创建一...[2023/1/16]
vue实现图片预览放大以及缩小问题
目录vue图片预览放大以及缩小关于 viewerjs的使用vue实现图片预览(放大缩小拖拽)纯手写滚轮放大缩小图片图片拖拽整体实现的功能总结 vue图片预览放大以及缩小
1.在vue的环境下实现图片放大缩小,可以使用viewerjs
效果图:
关于 viewer...[2023/1/16]
Vue按回车键进行搜索的实现方式
目录Vue按回车键进行搜索第一种方法第二种方法Vue使用回车键失效的解决Vue回车键事件栗子回车失效原因解决方法总结 Vue按回车键进行搜索
需求:
为了用户方便进行搜索数据的时候不想点击搜索按钮,想要在input输入框内输入完成之后直接按回车键进行搜索
第一种方法
在input标签...[2023/1/16]
Vue组件基础操作介绍
目录一、组件二、组件的创建三、组件中的data四、组件中的methods 一、组件
组件是vue的重要的特征之一,可以扩展html的功能,也可以封装代码实现重复使用。
二、组件的创建
1. 非脚手架方式下创建
? 第一步:使用Vue.extend创建组件
? 第二步:使用Vue....[2023/1/16]
Vue使用Vuex一步步封装并使用store全过程
目录一、安装Vuex依赖二、一步步封装store1. main.js中全局引入store仓库(下一步创建)2. this.$store3. this.$store.state4. this.$store.getters(this. $store.state的升级)5. this.$store.com...[2023/1/11]
在使用vuex的时候出现commit未定义错误的解决在使用vuex的时候出现commit未定义错误的解决
目录使用vuex的时候出现commit未定义错误出现的原因错误展现过程vuex模块化 commit()时报错 unknown mutation type:xxx废话不多说直接上问题总结 使用vuex的时候出现commit未定义错误
出现的原因
书写错误当然,这个错误不是你单词书写错误只要的原因...[2023/1/11]
Vue?+?Element?自定义上传封面组件功能
前一段时间做项目,频繁使用到上传图片组件,而且只上传一个封面,于是想着自定义一个图片封面上传组件。先来看一下效果:
第一张图片是上传之前,第二张图片是上传成功后,第3张图片是鼠标放上去之后的效果!首先整理需求,图片上传我们使用照片墙的方式,只能上传一张图片,图片上传成功后不能...[2023/1/11]
vue定义在computed的变量无法更新问题及解决
目录vue定义在computed的变量无法更新vue computed依赖收集与更新原理这里查源码后,对computed原理简述如下总结 vue定义在computed的变量无法更新
情境是这是线上商城的详情页面,商品详情是items数组,点击分类页面的商品,路由跳转到详情页面,路由参数是商品在i...[2023/1/11]
vue使用反向代理解决跨域问题方案
目录为什么要解决跨域问题在单文件组件中如何去解决跨域问题后端数据接口:猫眼验证中心配置反向代理配置模板文件及字段解释整个配置反向代理的思路解决接口重复问题 为什么要解决跨域问题
因为浏览器有限制,只有同域名同端口号下的数据才能拿来用;
那如果想拿到不同域名不同端口号下的数据就不行了;
...[2023/1/11]
Vuex给state中的对象新添加属性遇到的问题及解决
目录Vuex给state中的对象新添加属性遇到的坑向vuex对象中增加新的属性需要注意总结 Vuex给state中的对象新添加属性遇到的坑
state.js中有一个空对象obj:
export default {
? ...
? obj: {}
}
在App.vue中点击&ldqu...[2023/1/11]
Vue快速上门(2)-模板语法
VUE家族系列:
Vue快速上门(1)-基础知识
Vue快速上门(2)-模板语法
Vue快速上门(3)-组件与复用
01、模板语法
1.1、template模板
<template>是H5新增的模板元素,是一个用于HTML模板内容的包装元素,主要使用其内部的内容。在普通的H...[2022/12/12]
Vue快速上门(1)-基础知识图文版
VUE家族系列:
Vue快速上门(1)-基础知识
Vue快速上门(2)-模板语法
Vue快速上门(3)-组件与复用
01、基本概念
1.1、先了解下MVVM
VUE是基于MVVM思想实现的,?那什么是MVVM呢?—— MVVM,是Model-View-ViewModel的缩写,是一种软...[2022/12/12]
17个vue常用的数组方法总结与实例演示17个vue常用的数组方法总结与实例演示
1. join()
join(’参数‘)把数组的元素以传入的参数为分割符,转换成字符串。
let arr = [1,2,3,4,5];
let str = arr.join('','');
console.log(str) -> ''1,2,3,4,5'...[2022/12/12]
Type Script 在流程设计器的落地实践
流程设计器项目介绍
从事过BPM行业的大佬必然对流程建模工具非常熟悉,做为WFMC三大体系结构模型中的核心模块,它是工作流的能力模型,其他模块都围绕工作流定义来构建。
成熟的建模工具通过可视化的操作界面和行业BPMN规范描述用户容易理解的工作流的各种构成图元,例如圆圈表示事件,方框表示活动。
...[2022/12/5]
老板:你为什么要选择 Vue?
大家好,我是 Kagol,Vue DevUI 开源组件库和 EditorX 富文本编辑器创建者,专注于前端组件库建设和开源社区运营。
假如你是团队的前端负责人,现在老板要拓展新业务,需要开发一个 Web 应用,让你来做技术选型,你之前用 Vue 比较多,对 Vue 比较熟悉,希望能在团队内部推...[2022/12/5]
Blazor和Vue对比学习(进阶.路由导航一):基本使用Blazor和Vue对比学习(进阶.路由导航一):基本使用
Blazor和Vue都是单文件组件SPA,路由的实现逻辑非常相似,页面路径的改变都是组件的切换,但因为各自语言的特性,在实现方式上有较大差异。
一、安装
1、Vue:Router是Vue的一个插件。如果使用Vite脚手架初始化项目,需要手动安装和配置Router插件。如果使用...[2022/12/5]
antd vue 如何调整checkbox默认样式
目录antd vue 调整checkbox默认样式antd中table内添加checkbox踩坑总结 antd vue 调整checkbox默认样式
鼠标hover时候的颜色
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-ch...[2022/12/5]
Vite打包性能优化之开启Gzip压缩实践过程
目录前言Gzip开启 Gzip插件的其他配置总结 前言
在使用 vite 进行项目打包时,默认已经帮我们做了一些优化工作,比如代码的压缩,分包等等。除此之外,我们还有一些可选的优化策略,比如使用 CDN ,开启 Gzip 压缩等。本文会介绍在 vite 中使用插件来开启 Gzip 压缩。
G...[2022/12/5]
利用vue控制元素的显示与隐藏
目录 方法:
使用 v-if 指令,通过动态的向DOM树内添加或者删除DOM元素的方式来显示或隐藏元素;使用 v-show 指令,通过设置DOM元素的display样式属性来控制显隐。
v-if 指令与 v-show&nb...[2022/12/5]
vue实现点击某个div显示与隐藏内容功能实例
1.首先在所需要隐藏或显示的内容div加v-show,代表判断是否显示或隐藏
<div v-show="shopShow">内容</div>
2.我这里是在打开内容中有一个 × 号来关闭显示效果,在iconfont图标的div加入一个点击事件
...[2022/12/5]
Vue中的v-model,v-bind,v-on的区别解析
目录v-modelv-bind(缩写为 : )v-on(缩写为@)总结 v-model
v-model是进行动态双向绑定的(只能用在input, textarea, select上),以input为例,进行绑定后,vue对象中data的相应值会与input的输入同步变动。
HTML
&...[2022/12/5]
Vue3?setup添加name的方法步骤Vue3?setup添加name的方法步骤
目录Vue3中name有什么用呢?Vue3 定义 name1.自动生成2.在开启一个script用来定义name3.使用第三方插件 unplugin-vue-define-options4.个人想法 我想着直接在script 定义name 不好吗?Vue3 setup 支持 name 插件实现 思路...[2022/12/2]
Pinia入门学习之实现简单的用户状态管理
目录Store是什么?Store的应用场景?pinia是什么?其他优点应用示例定义Store使用Store获取store的响应式数据State初始化读取和写入state订阅state变化Getters定义getter访问getterActions定义action订阅action总结 Store是什么...[2022/12/2]
vue3和vue2 的区别,vue3和vu2到底哪个好呢?
vue3 正式发布有两年多了,之前也做过一些学习和研究。vue3 发布后给某培训机构开发了一套vue3课程课件,自己也开源了一套基于vue3的后台管理系统(因为个人懒的原因,半年后才上传到gitHub,且到目前为止一直没有更新过)。
附上网址:https: github.com/gegests...[2022/11/28]
vue3+vite中使用vuex的具体步骤vue3+vite中使用vuex的具体步骤
目录前言: 具体步骤: 前言:
在vue3+vite创建的项目中使用vuex,要注意的是vite有部分写法和之前的webpack是不同的,比如,他不支持 require,想把vue2的项目直接升级到vue3的时候,...[2022/11/28]
Vue.js实现文件上传压缩优化处理技巧
目录vue js实现文件上传压缩优化处理 借助canvas的封装的文件压缩上传1.新建imgUpload.js2.全局引入封装的方法3.页面中使用 使用compre orjs第三方插件实现1.compre orjs安装2.方法封装3.页面使用4.头像上传处理 vue js实现文件...[2022/11/28]
vue+element-ui前端使用print-js实现打印功能(可自定义样式)
目录下载依赖使用print-js实现打印功能需要打印的内容按钮调用打印函数打印函数调整打印字体大小参数总结 print-js官网链接: https: printjs.crabbly.com/
下载依赖
npm install print-js --save
在packag...[2022/11/28]
vue 中使用 this 更新数据的一次大坑
情景说明:
之前用 vue 做数据绑定更新时,发现一个莫名奇妙的问题。
我在 vue 实例中声明了一个数组属性如 books: [],在异步请求的回调函数中使用 this.books = res.data.data; 进行数据更新,更新步骤后面紧跟着打印了 console.log(this...[2022/11/23]
Vue3 企业级优雅实战 - 组件库框架 - 7 组件库文档的开发和构建
该系列已更新文章:
分享一个实用的 vite + vue3 组件库脚手架工具,提升开发效率
开箱即用 yyg-cli 脚手架:快速创建 vue3 组件库和vue3 全家桶项目
Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo
Vue3 企业级优雅实战 -...[2022/11/19]
uni-app多环境部署解决方案详解uni-app多环境部署解决方案详解
目录前言尝试几种方式解决方案部署方式获取接口部署路径命令行其他总结 前言
最近几周都在处理公司的移动业务,而为在后期能统一多端,解放自己,迎合公司的技术栈;选用了 uni-app 来开发。开发前期重新对公司移动业务做深入了解,重构大部分业务逻辑,也抽离出基础组件;但实际到部署的时候,出现来问题;...[2022/11/19]
Vue3 企业级优雅实战 - 组件库框架 - 5 组件库通用工具包
该系列已更新文章:
分享一个实用的 vite + vue3 组件库脚手架工具,提升开发效率
开箱即用 yyg-cli 脚手架:快速创建 vue3 组件库和vue3 全家桶项目
Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo
Vue3 企业级优雅实战 -...[2022/11/17]
Vue3 企业级优雅实战 - 组件库框架 - 6 搭建example环境
该系列已更新文章:
分享一个实用的 vite + vue3 组件库脚手架工具,提升开发效率
开箱即用 yyg-cli 脚手架:快速创建 vue3 组件库和vue3 全家桶项目
Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo
Vue3 企业级优雅实战 -...[2022/11/17]