经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 Vue.js

vue3和vue2 的区别,vue3和vu2到底哪个好呢?

vue3 正式发布有两年多了,之前也做过一些学习和研究。vue3 发布后给某培训机构开发了一套vue3课程课件,自己也开源了一套基于vue3的后台管理系统(因为个人懒的原因,半年后才上传到gitHub,且到目前为止一直没有更新过)。 附上网址:https: github.com/gegests...[2022/11/28]

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实现打印功能(可自定义样式)

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 来开发。开发前期重新对公司移动业务做深入了解,重构大部分业务逻辑,也抽离出基础组件;但实际到部署的时候,出现来问题;...[2022/11/19]

Vue3 企业级优雅实战 - 组件库框架 - 5 组件库通用工具包

Vue3 企业级优雅实战 - 组件库框架 - 5 组件库通用工具包

该系列已更新文章: 分享一个实用的 vite + vue3 组件库脚手架工具,提升开发效率 开箱即用 yyg-cli 脚手架:快速创建 vue3 组件库和vue3 全家桶项目 Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo Vue3 企业级优雅实战 -...[2022/11/17]

Vue3 企业级优雅实战 - 组件库框架 - 6 搭建example环境

Vue3 企业级优雅实战 - 组件库框架 - 6 搭建example环境

该系列已更新文章: 分享一个实用的 vite + vue3 组件库脚手架工具,提升开发效率 开箱即用 yyg-cli 脚手架:快速创建 vue3 组件库和vue3 全家桶项目 Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo Vue3 企业级优雅实战 -...[2022/11/17]

uniapp组件uni-file-picker中对上传的图片进行压缩至1兆以内(推荐)

目录解决方法:一、先开启uni-file-picker组件里对于压缩图片的配置项 sizeType,默认是有两个选项的:二、将图片再次进行压缩,压缩至1兆以下,再传至服务器中: 我在做uniapp项目时,用的uni-file-picker组件,这是我做的一个项目实例,主要是将图片通过接口传至后台服务...[2022/11/17]

uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

在写uniapp项目中,对于上传图片有时会有这样的需求:只可使用照相机拍摄上传,不可使用相册。 在uniapp中,我们通常会使用uni-file-picker这个组件,但是这个组件中,有点缺陷,就是没有对这个功能的传值设置,这里就要给组件进行修改了。 1、在uni-file-picker组...[2022/11/17]

element-ui修改el-form-item样式的详细示例

目录form结构修改el-form-item所有样式只修改label只修改content只修改input只修改button总结 form结构 <el-form :model="formData" label-width="80px"> <el-form-item labe...[2022/11/17]

vue项目打包后部署到服务器的详细步骤

耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作 一 ,打包项目 vscode下载链接: 链接: https: pan.baidu.com 1PD-Sts-e...[2022/9/20]

分享Vue组件传值的几种常用方式(一)

目录前言第一种:父向子传值新建文件导入结构引入 注册 使用子组件子组件内部代码完善父组件内部代码完善操作main.js文件思路总结 前言 大家好,这个系列我们来讲解一下vue组件传值的几种常见方法和逻辑链路。最常见的vue组件传值分为三种,第一种是父向子传值,第二种是子向父传值,第三种是兄弟组件...[2022/9/15]

Vue.js?前端路由和异步组件介绍

目录文章目标P6P6+ ~ P7一、背景二、前端路由特性三、面试!!!四、Hash 原理及实现1、特性2、如何更改 hash3、手动实现一个基于 hash 的路由五、History 原理及实现1、HTML5 History 常用的 API2、pushState/replaceState 的参数3、H...[2022/9/15]

Vue.js?状态管理及?SSR解析

目录前端状态管理出现的意义及解决的问题Vuex 源码解读Vuex 公共方法Vuex 介绍及深入使用Vuex 使用(官网)1、基本框架2、基本使用3、State3.1 mapState 辅助函数4、Getter4.1 通过属性访问4.2 通过方法访问4.3 mapGetters 辅助函数5、Mutat...[2022/9/15]

Vuex如何获取getter对象中的值(包括module中的getter)

目录Vuex获取getter对象中的值1.直接从根实例获取2.使用mapGetters取值3.使用module中的getter计算属性获取的getter值需要刷新才能更新描述解决 Vuex获取getter对象中的值 getter取值与state取值具有相似性 1.直接从根实例获取 m...[2022/8/31]

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

目录使用vue-video-player无法播放本地视频方法使用vue-video-player播放视频及遇到的问题安装引入 使用vue-video-player无法播放本地视频 方法 因为引入的是本地资源,要把资源写在“require”方法里 ? sources...[2022/8/23]

Vue&nbsp;extend使用示例深入分析

目录一、使用场景二、补充组件注册三、深度解析 Vue.extend()虽然已近用过很多次了,但都没有深入思考过这个东西,仔细想了想,有点意思 一、使用场景 按需使用组件,也叫懒加载,性能蹭蹭往上走 扩展的组件,其自由度高到你无法想象 二、补充组件注册 平日里,我们使用组件: ...[2022/8/23]

Vue子组件props从父组件接收数据并存入data

Vue子组件props从父组件接收数据并存入data

目录1.不允许直接修改2.存在异步的情况解决思路 经过测试父组件中传递过来的数据有以下特点: 1.不允许直接修改 如果直接使用 this.xxx = action 操作的话 控制台会报下面这个错误 大概的意思是 你小子不要随便劈我瓜,我父组件的瓜岂是你能变的,父组件重新渲染时,这个...[2022/8/23]

vue实现二级弹框案例

本文实例为大家分享了vue实现二级弹框的具体代码,供大家参考,具体内容如下 二级弹框案例,如下图所示 <template> ? ? <div cla ="zw-dialog"> ? ? ? ? <div cla ="zw-top"> ?...[2022/8/23]

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

目录深度优先遍历多层数组对象比如树结构是这样的vue遍历包含数组的对象请求来拿到后数据格式是下面这种最终在html中这样遍历 深度优先遍历多层数组对象 这个方法如果是对于下面的三级树的话可以拿到爷爷Id,自己Id,父亲Id;其实如果想要拿到label的话就把data.id换成data.label...[2022/8/23]

Vue计算属性与监视属性实现方法详解

目录一、计算属性1、插值语法实现2、通过方法实现3、通过计算属性二、监视属性三、深度监视 一、计算属性 在开发中,可以有这样的需求,在属性(date)中,有fistName和lastName两个属性,需要将两个属性拼接起来,这种需求也很简单,有以下实现方式 1、插值语法实现 直接在bod...[2022/8/23]

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

目录对数组和对象进行遍历和修改1、对数组进行循环2、 修改数组的时候,不能直接通过下标去增加修改删除3、对对象进行循环4、增加对象的时候修改数组和对象的特殊情况以及修改方法修改数组的两个特殊情况修补方法 对数组和对象进行遍历和修改 1、对数组进行循环 v-for进行循环,有两个参数(item...[2022/8/23]

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

目录v-for循环遍历图片的方法解决方法如下vue循环显示多个图片小扩展(require 和 import) v-for循环遍历图片的方法 写项目时,遇到后台无法提供背景图片,需要自己在本地循环遍历到页面上,并和后台数据一起展示的需求 解决方法如下 resourceList是后台传...[2022/8/23]

Vue3中插槽(slot)的全部使用方法

目录什么是插槽默认内容具名插槽动态插槽名作用域插槽作用域插槽具名作用域插槽写在最后 Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是它的所有用法你是否全部理解呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。 什么是插槽 简单来说就是子组件中的提供给父组件...[2022/8/23]

一文详解Pinia和Vuex与两个Vue状态管理模式

目录前言安装挂载VuexPinia修改状态vuexPiniaPinia解构(storeToRefs)gettersPiniaVuexmodulesPiniaVuex写在最后 前言 Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用...[2022/8/23]

使用vue3搭建后台系统的详细步骤

目录一、配置vite二、router路由1、安装router路由2、配置router路由3、注册router路由4、使用router路由三、安装element plus等其他依赖1、注册element plus并配置图标四、pinia使用     &...[2022/8/22]

Vue实例初始化为渲染函数设置检查源码剖析

目录引言_renderProxy是干什么的initProxy方法总结 引言 之前的文章提到,Vue实例化时_init方法做了很多处理,其中就有这么一段: if (__DEV__) { initProxy(vm) } else { vm._renderProxy = vm } ...[2022/8/22]

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

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

目录rollup介绍以命令行方式打包Tree ShakingRollup 的命令行使用命令行format 格式rollup.config.js设置/获取环境变量插件 plugins rollup介绍 开源类库优先选择以 ESM 标准为目标的构建工具Tree Shaking 以命令行方式打包 ...[2022/8/22]

vue原生input输入框原理剖析

目录正文v-model 正文 首先我们来看一段代码: <input value="value"> 这里是一个原生的input输入框,每一个原生的输入框都会有一个value的属性来用于存储用于输入的最新的数据。 如果我们想要获取到这个值我们可以通过input.targe...[2022/8/22]

Vue&nbsp;Computed底层原理深入探究

Vue&nbsp;Computed底层原理深入探究

今天面了家小公司,上来直接问 computed 底层原理,面试官是这样问的,data 中定义了 a 和 b 变量。computed 里面定义了 c 属性,c 的结果依赖与 a 和 b,模板中使用了变量 c。假设改变了 a,请问底层是如何收集依赖,如何触发更新的? <div>{<...[2022/8/22]

vue跨域proxy代理配置详解

目录引言例一例二总结 引言 相信很多人都用过proxy,这里就不多说proxy的基本使用,这里要说一下很多人使用proxy的一个误区,大家一般都是直接将管官方的例子拿过来,修改一下代理目标直接就是用了,但是代理的路径匹配你真的会用么? 如果你能够认证看完那么我保证你下次再配置代理的时候就能一...[2022/8/22]

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

1、登录页登录成功时将服务端返回的标识存放起来 2、在router中给不需要登录的页面设置 meta : { auth : false },如首页  3、使用路由前置守卫beforEach,由于给路由设置了meta : { auth : false },如果是符合该属...[2022/8/22]

关于vue.js中this.$emit的理解使用

关于vue.js中this.$emit的理解使用

目录一、每个 Vue 实例都实现了事件接口二、注意事项三、例子及说明 四、总说明 一、每个 Vue 实例都实现了事件接口 即: 1、使用 $on(eventName) 监听事件 2、使用 $emit(eventName, optionalPayload) 触发事件 二、注意...[2022/8/22]

vue中关于redirect(重定向)初学者的坑

目录关于redirect(重定向)初学者的坑vue-router路由重定向redirect的使用事项 关于redirect(重定向)初学者的坑 第一个对象里是配置路由重定向path:’/'为项目的根目录,redirect重定向为渲染的路径(这里我是指向了第二个对象里的p...[2022/8/16]

关于Vue-extend和VueComponent问题小结

在一个非单文件组件中(一个文件中包含n个组件,最常见的就是单个html文件中存在多个组件),如果我们需要在这个文件中创建n个组件,然后再页面上展示,这时候我们就需要先定义组件,然后注册组件,最后使用组件。在定义组件这一步,我们就需要使用到 extend 这个方法。当然,也可以在一个html文件中使...[2022/8/16]

Vue状态管理库Pinia详细介绍

目录什么是 Pinia如何使用 Pinia认识 Store定义一个store使用 store操作 StateGetters1. 认识和定义 Getters2. 访问 Getters认识和定义 Action 什么是 Pinia Pinia (西班牙语中的菠萝),本质上依然是一个状态管理的库,用于跨...[2022/8/16]

vue中环境变量的使用与配置讲解

目录为什么需要配置环境变量和模式呢?环境变量1)环境变量文件分类2)环境变量配置3)环境变量访问模式1)模式分类2)模式定义与使用结合实际应用 为什么需要配置环境变量和模式呢? 所有方法肯定是来源于现实的需求。在一个产品的前端开发过程中,一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上...[2022/8/16]

vue中使用ts配置的具体步骤

vue中使用ts配置的具体步骤

目录vue老项目引入TypeScripe从零开始创建vue+TypeScripe项目vue3加ts的配置与基本语法格式下面是我写的一个小demo 通过前端各个框架的发展,例如vue3.0,react和angular等框架的源码都是用ts(TypeScripe)进行编写的,因此我感觉未来的中大型项目的...[2022/8/16]

Vue如何根据id在数组中取出数据

目录如何根据id在数组中取出数据Vue获取数组的数组数据 如何根据id在数组中取出数据 这是一个非常实用的操作,尤其是编辑数据的时候。点击编辑数据,通常会将编辑的这条数据发送给后端,然后后端在根据这个编号查询出相应的数据在返回给前端。 那么请问,后端都将数据给你了,你直接在数组中取出来不是很...[2022/8/15]

vue中如何使用jest单元测试

目录文档推荐组件挂载相关方法jest-api为什么要使用单测总结 当我初次听到单元测试时,心里的第一感觉就两个字nb,然后就是疑惑,这是啥,干啥用,对代码又有什么帮助?接下来我会细细说一说我在学习以及应用单元测试的一些心得。(安装教程不再叙述,按照文档教程自行学习) 文档推荐 学习新知识,有...[2022/8/15]

vue中的el-tree&nbsp;@node-click传自定义参数

目录el-tree @node-click传自定义参数给el-tree添加自定义图标 el-tree @node-click传自定义参数 <el-tree node-click="(data, node, item) => nodeClick(data, node, item, pa...[2022/8/15]

vue?实现动态设置元素的高度

目录vue动态设置元素的高度获取元素高度总是不准确的问题解决办法 vue动态设置元素的高度 1. 添加样式绑定 <div cla ="container" :style="{height: scrollerHeight}"> </div> 2. 添加属性计算 ...[2022/8/15]

Vue中的&nbsp;DOM与Diff详情

目录DOM Diff整体思路处理简单情况比对优化尾部新增元素头部新增元素开始元素移动到末尾末尾元素移动到开头乱序比对写在最后 DOM Diff Vue创建视图分为俩种情况: 首次渲染,会用组件template转换成的真实DOM来替换应用中的根元素当数据更新后,视图重新渲染,此时并不会重新通过组...[2022/8/15]

Vue自定义指令中无法获取this的问题及解决

目录自定义指令中无法获取this解决方法Vue使用this的这几个坑你都知道吗一、普通函数二、Vue中的this 自定义指令中无法获取this 问题 最近在使用自定义指令时遇到一个问题,我想在指令里通过this直接去访问vue实例数据,但是显示未定义,经大佬提醒,里面的this很可能不是指向...[2022/8/15]

vue前端实现打印下载示例详解

目录html2canvas介绍jspdf介绍printjs介绍 html2canvas介绍 分享一下几个后台管理系统比较常用的插件:下载、打印 html2canvas是在浏览器上对网页进行截图操作,实际上是操作DOM,这个插件也有好长时间了,比较稳定,目前使用还没有遇到什么bug ...[2022/8/15]

VUE中的自定义指令钩子函数讲解

目录自定义指令钩子函数自定义指令先上官方解释小贴士钩子函数运行顺序 自定义指令钩子函数 自定义指令 除了VUE 内置指令外,VUE也支持我们自定义注册指令,分为局部和全局注册 但这些想必大家都不陌生,其中官方API也是写的明明白白 官方API点这里 而且自定义指令也会极大程度上帮助我们日...[2022/8/15]

vue如何使用cookie、localStorage和sessionStorage进行储存数据

目录一、cookie的使用 1. 首先加载模块2. 在使用cookie的页面上进行引入3. 使用方法二、localStorage的使用1. 储存2. 获取3. 删除4. localStorage可以储存JSON对象5. localStorage.setItem()6. 用localStor...[2022/8/3]

Vue中判断语句与循环语句基础用法及v-if和v-for的注意事项详解

目录一、判断语句v-if、v-else、v-else-ifv-show案例二、循环语句遍历数组遍历对象三、v-if和v-for的注意事项总结 一、判断语句 v-if、v-else、v-else-if v-if是判断是否将DOM元素显示出来 不满足条件的元素,会直接删除,不会存在浏览器上面...[2022/8/3]

373
2
记录数:833 页数:1/1712345678910下一页尾页
 友情链接: NPS
加载更多