vue3随手记

随手记

单一的工作已经好几年了，角落里的位置也坐了挺久了，重复的工作总会让人心生倦怠，每隔一段时间总会有消极悲观的感觉，再加上阴冷潮湿的气候状况，“我工作的意义是什么”，“未来的生活要怎么办”，“我做什么都不行”，类似这样的想法就全都会出现，这些糟糕的想法没有让我变得更好，解决不了我的困难，这些问题是新的问题，和日常生活中累积的问题一起让我困扰，感到没有希望，未来空白，这些情绪很多时候都无法排解，比如今天
hjkj·2024-02-03 19:38

::v-deep和/deep/和＞＞＞ 区别

某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如.conBox/deep/.el-input__inner{padding:010px;}注意，/deep/在vue3.0
Musclewl·2024-02-03 19:51

Vue3学习记录（一）--- 组合式API之基础概念和变量声明

一、组合式API基础1、简介组合式API(CompositionAPI)是Vue3和Vue2的v2.7之后版本中的全新特性，是一系列API的的集合（响应式API、生命周期钩子、依赖注入等等），其风格是基于函数的组合
努力的小朱同学·2024-02-03 19:42

【Vue】3-1、Vue 3 简介

一、Vue3的优势Vue2OptionsAPI的缺陷：一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，需求简单还好，清晰明了；但是需求复杂之后，就会多出watch，computed，inject
QX_Java_Learner·2024-02-03 19:11

【Vue】3-2、组合式 API

最后return，才能在模板中使用*4、可以通过setup语法糖简化代码*/setup(){//console.log('setupfunction',this)//数据constmsg='HelloVue3
QX_Java_Learner·2024-02-03 19:11

【Vue】3-3、Vue 3.3 新特性 & Pinia

一、Vue3.3新特性1、defineOptions有之前，如果要定义props，emits可以轻而易举地添加一个与setup平级的属性但是用了后，就没法这么干了，setup属性已经没有了，自然没法添加与其平级的属性为了解决这一问题
QX_Java_Learner·2024-02-03 19:11

Vue3学习记录（二）--- 组合式API之计算属性和侦听器

一、计算属性1、简介计算属性computed()，用于根据依赖的响应式变量的变化，进行自动的计算，并返回计算后的结果。当依赖的响应式变量发生变化时，computed()会自动进行重新计算，并返回最新的计算结果。如果依赖的响应式变量没有发生变化，则computed()会将计算的结果进行缓存，后续再调用时，将会返回缓存的计算结果，而不会重新计算。2、使用基础用法：computed()方法期望接收一个g
努力的小朱同学·2024-02-03 19:08

【vue3.0】26.0 某东到家（ 廿六）——不同设备适配和项目上线

不同设备适配目前是针对普通手机的屏幕尺寸设计，如果需要适配比如平板电脑，等比例放大，需要进行设备配置。修改public\index.html只需要在title后面增加如下代码：//设备屏幕的宽度varwidth=document.documentElement.clientWidth||document.body.clientWidthvarratio=width/375varfontSize=1
bobokaka·2024-02-03 18:15

vue3.0项目启动“npm run dev”报错：error when starting dev server:Error: Cannot find module ‘node:path‘ .....

vue3.0项目，必须安装node版本等于或者大于15.0.0版本；#安装依赖npminstall--registry=https://registry.npmmirror.com#启动服务npmrundev
至尊宝♬·2024-02-03 17:45

初识vue3

文章目录1.Vue3的好处2.create-vue搭建vue3项目3.项目目录和关键文件4.组合式API-setup选项5.组合式API-reactive和ref函数①reactive②ref()6.组合式
W`hite·2024-02-03 15:54

#10外部网页跳转vue3+SpringMVC解码GBK编码的参数

目录1、背景2、失败尝试之iconv-lite2.1、安装和使用2.2、遇到的问题2.3、解决方案(vite-plugin-node-polyfills)2.4、测试3、成功尝试3.1、前端参数读取方式3.2、后端解码1、背景外部jsp页面中编码方式为GBK，跳转到vue页面时如果使用decodeURIComponent或者decodeURI均不可成功解码，因为这两个方法解码时使用的是UTF-8。
wbzybfa·2024-02-03 15:28

Vue3入门到实战笔记02

9.watch作用：监视数据的变化（和Vue2中的watch作用一致）特点：Vue3中的watch只能监视以下四种数据：ref定义的数据。reactive定义的数据。
jxncxgx·2024-02-03 14:30

Vue3入门到实战笔记01

基于Vite创建Vue3工程一、创建Vue3工程npmcreatevite@latest按照提示创建项目cdvue3study进入所创建的项目目录npminstall安装项目需要的依赖包npmrundev
jxncxgx·2024-02-03 14:00

Vite与Vue-cli的区别和特点

目录前言1.如何使用Vite和Vue-cli创建vue3.0项目2.Vite与Vue-cli的特点3.Vite与Vue-cli之间的区别总结前言Vite是创建vue3.0时的一个基本项目脚手架和开发服务器的构建工具
程序员--韩同学·2024-02-03 12:40

七.Vue3.x中使用Axios请求远程真实Api接口数据

https://github.com/axios/axios1、安装npminstallaxios--save或者yarnaddaxios或者cnpminstallaxios--save2、引入使用importAxiosfrom"axios";axios.get('/user?ID=12345').then(function(response){//handlesuccessconsole.log
小柠有点萌·2024-02-03 11:45

Electron+Vue3+Vite的产品级模板项目

1.electron-vue3-template基于Vue3+Electron+TypeScript的客户端程序模板，使用Vite和ElectronForge构建和打包。
china_jeffery·2024-02-03 10:52

vue3 markdown编辑器推荐（maven-editor & vditor & tiptap ）

最近项目需要用到markdown编辑器，使用了三种maven-editor(http://www.mavoneditor.com/?spm=a2c6h.12873639.article-detail.9.aaad62affAKmTV)vditor(https://b3log.org/vditor/demo/index.html?utm_source=ld246.com)tiptap(https:/
yggjdle·2024-02-03 10:33

Element Plus修改表格行、单元格样式

(Vue3)consttableData=[{name:"clz",age:21,job:"Coder",},{name:"czh",age:21,job:"Coder",},{name:"赤蓝紫",age
梅花十三儿·2024-02-03 10:59

【Vue3】vue组件生命周期总结

vue3官网生命周期生命周期vue组件实例的生命周期一般是从创建、挂载到卸载销毁；在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。图示：图片来自于vue3官网。
ZSK6·2024-02-03 09:03

【vue3】vue3源码探索之旅：compiler-core（一）

简言compiler-core包是vue3源码代码编译的核心代码包，且与平台无关，这个包主要功能是将代码解析成ast、然后转换成codegenNode对象、再编译生成可执行代码（render渲染函数）。
ZSK6·2024-02-03 09:33

【Vue3】组件props的使用

简言Props是一种特别的attributes，你需要在组件上声明注册，然后才能识别成props,而不是普通的attributes。本篇主要讲解props的用法，以及传递后的porps值如何保持其响应性。Propsprops声明如果一个prop的名字很长，应使用camelCase形式，因为它们是合法的JavaScript标识符，可以直接在模板的表达式中使用，也可以避免在作为属性key名时必须加上引
ZSK6·2024-02-03 09:03

【Vue3】源码探索之旅：compiler-core之parseChildren函数（二）

简言parseChildren函数是在baseParse函数中作为createRoot函数的子节点参数传入的，今天来探索下parseChildren函数。parseChildren在compiler-core/src/parse.ts文件内。parseChildren这个函数就是用来解析模板字符串内容的，里面有个while循环以栈的形式不断读取模板字符串进行解析，直到解析完毕，然后进行空白处理并返
ZSK6·2024-02-03 09:26

vue3 vuedraggable draggable element must have an item slot

vue3+vite看官网使用这种{{element.name}}实战可看这篇
Roottt_·2024-02-03 09:54

从零开始使用Konva，画图并绑定节点。

实战可行，vue3+vite+ts实现实现电子地图，左侧列表可拖拽绑定地图可绑定点设备坐标安装npminstallkonva插件引入importKonvafrom'konva'importKonvafrom'konva'import
Roottt_·2024-02-03 09:53

vue-3d-loader vue实现3d模型展示（vue2）

官方文档:快速上手|Vue3dloader(king2088.github.io)（注意：看清版本vue3跟2使用版本不同）1.下载npmivue3[email protected].引入1.全局引入importvue3dLoaderfrom"vue
只玩辅助啊·2024-02-03 09:08

vue-3d-loader

VueJSandthreeJS3dviewer是对vue-3d-model的改进，降低Threejs使用难度#默认安装"vue-3d-loader":"^1.3.4",只支持vue2npmivue-3d-loader#vue3
dragonzoebai·2024-02-03 09:04

vue3.0 Composition API上手体验

vue3.0CompositionAPI上手体验vue3.0对比vue2.0优势vue3.0相比vue2.0性能提升了近50%，框架内部做了大量性能优化，包括：虚拟dom，编译模板，Proxy的新数据监听
廊坊吴彦祖·2024-02-03 08:57

Vue3.0（一）：Vue的引入-options api-模板语法

Vue的引入方式CDN方式进行引入将以下script标签引入即可Document//使用Vueconstapp=Vue.createApp({template:`hello`,});//挂载app.mount("#app");本地引入可以将CDN中地址中的代码，拷贝到一个vue.js文件中之后引入该js文件即可命令式编程和声明式编程的区别以上案例是实现了一个计数器的功能左边是Vue实现右边是原生实
前端大菜鸟_·2024-02-03 08:55

Vue3中ref和reactive的用法和区别

目录两者的区别：原理角度对比：使⽤角度对⽐：用法实例：实例：Vue2中我们通常将响应式数据放在data中，再Vue3中提供了组合式API的写法，即数据和方法写在一起，便于维护。
浮生若梦777·2024-02-03 08:14

nvm-windows的安装和配置

下载安装nvm-setup.zip用于切换node版本，旧项目用的是14版本，vue3需要的node版本要高些,所以运行vue3项目前需要用nvm切换node的版本先。
www666_·2024-02-03 07:04

vite+vue3发布自己的npm组件+工具函数

记录一下个人最近一次发布npm组件的过程：一、创建组件和工具函数执行命令创建一个空项目：npmcreatevite创建过程稍微有些慢，不知何故？其中选择vue,个人暂时使用的JS。在src目录下面创建一个文件package存放组件和公共的JS方法案例中table是放组件的，utils是放方法的。table组件里面的主要内容就是个人业务组件，随便写点结果：{{MyValue}}测试按钮import{
well2049·2024-02-03 07:34

npm WARN deprecated [email protected]: Please upgrade to version 7 or higher

当使用npm下载vue3-lazy时出现一下错误时的解决方案报错：[email protected]:Pleaseupgradetoversion7orhigher尝试使用过一下命令更新
黎明寄波澜*·2024-02-03 06:30

vue3 微信扫码登录及获取个人信息实现的三种方法

一、流程：微信提供的扫码方式有两种,分别是:跳转二维码扫描页面内嵌式二维码根据文档我们可以知道关于扫码授权的模式整体流程为:1.第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；2.通过code参数加上AppID和AppSecret等，通过API换取access_token；3.通过access_token进行接口调用，
@卓越俊逸_角立杰出@·2024-02-03 06:15

Vue3+TS+Vite+Pinia学习总结

VUE3介绍vue2和vue3之间的区别因为需要遍历data对象上所有属性，所以如果data对象属性结构嵌套很深，就会存在性能问题。
天生我材必有用_吴用·2024-02-03 06:07

【Vue3+Vite】Vue3视图渲染技术 快速学习 第二期

文章目录一、模版语法1.1插值表达式和文本渲染1.1.1插值表达式语法1.1.2文本渲染语法1.2Attribute属性渲染1.3事件的绑定二、响应式基础2.1响应式需求案例2.2响应式实现关键字ref2.3响应式实现关键字reactive2.4扩展响应式关键字toRefs和toRef三、条件和列表渲染3.1条件渲染3.2列表渲染四、双向绑定五、数据监听器一、模版语法Vue使用一种基于HTML的模
道格维克·2024-02-03 06:16

vue3+vite+vue-router4.x实现动态添加路由

实现内容：1.根据后台返回的菜单，前端实现动态添加路由；2.解决刷新页面时，路由消失/页面空白的问题；第一步：请求后台，返回菜单数据【内容如下】//后台返回的菜单数据this.menuList=[{id:1,path:'/home',name:'首页',icon:true,children:[],component:'/home/home'},{id:12,path:'/pinia',name:'
listener_life·2024-02-03 06:46

【Vue3+Vite】路由机制router 快速学习 第四期

文章目录路由简介路由是什么路由的作用一、路由入门案例1.创建项目导入路由依赖2.准备页面和组件3.准备路由配置4.main.js引入router配置二、路由重定向三、编程式路由(useRouter)四、路由传参(useRoute)五、路由守卫总结路由简介路由是什么路由就是根据不同的URL地址展示不同的内容或页面。页面切换路由的作用单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升
道格维克·2024-02-03 06:43

Vue3快速上手

一、创建Vue3.0工程1.使用vue-cli创建官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create##查看@vue
吃一口你的梦。·2024-02-03 05:53

vue3项目中数字滚动效果

前言：目前大多数新的vue项目都采用了vue3去写，在最近的项目中，需要展示数字滚动的效果，我就想到了之前用多的vue-count-to数字滚动插件，发现这个插件只使用于vue2项目，在vue3项目中并不试用
张不大了·2024-02-03 05:17

利用VUE3生成二维码（两种方式）

vue有两种生成二维码的方式，qrcode、vue-qr（有icon）1、qrcodenpm``install``--saveqrcodejs2//所需页面导入importQRCodefrom'qrcodejs2'import{onMounted,ref}from'vueimportQRCodefrom'qrcodejs2'constqrCodeUrl=ref(null)constcreatQrC
小猫瘦瘦·2024-02-03 04:21

VUE3+TS使用OpenSeadragon学习之旅，实现多图片切换效果

1.官方网站：OpenSeadragon2.使用npm下载插件：npminstallopenseadragon3.在index.html文件引入资源4.组件使用（一张图片显示效果）1.引入OpenSeadragonimportOpenSeadragonfrom"openseadragon"2.存放图片的标签3.初始化实例constviewer=OpenSeadragon({id:"opensead
小猫瘦瘦·2024-02-03 04:51

随手记2

开心今天早上八点多还在床上呼呼大睡的我被一通电话吵醒，电话中有个姐姐通知我九点去面试，于是睡梦中猛然惊醒。（果然能叫醒你的从来都不是闹钟）。接下来的半个小时一通手忙脚乱（连妆都没来得及化），下楼骑上我心爱的小电驴，一路风驰电掣……哒哒哒……面试了一个小时，结果还比较满意哦！不过老板说需要财务总监出差之后才能定上班时间，于是还有好几天的玩耍时间呢！面试的公司回家的路上一直都下着大雨，不过我的心情还是
汪鹿w·2024-02-03 03:27

vue3项目创建权限问题解决以及淘宝镜像过期解决

设备是：MacBook并非Windows环境近期使用vite创建vue3项目，发现要么一直卡着要么失败。用命令行创建也是一直卡着。
伊昂呀·2024-02-02 23:00

基于VUE3+Nodejs+MySQL实现的新闻搜索引擎系统源码+数据库

毕业设计基于VUE3+Nodejs+MySQL实现的新闻搜索引擎系统源码+数据库前端：VUE3+Vite
梦の落花·2024-02-02 23:36

Vue3 vant4 底部tabbar图标如何修改为自定义图片

1、引入静态图并作为变量使用2、制作数据结构用于v-for遍历记得每个tabbar准备两个图片，默认和选中。3、safe-area-inset-bottom是vant4移动端底部安全区适配，如果不需要则去掉。4、tabbar的详细参数请看官方文档https://vant-ui.github.io/vant/#/zh-CN/tabbarimport{ref}from'vue'//1、引入项目静态图，
HaushoLin·2024-02-02 22:59

Vue3如何深度修改vant4 css样式

1、当前页面只用一次某个组件vue2是::v-deep.vant-button{}vu3则是::v-deep(.vant-button){}页面示例回到顶部::v-deep(.van-button){background-color:orange;}}2、页面多次使用同个组件，如何修改其中一个，而不改变其他组件原本的样式。例如下面我们只修改productBox下的button，在它外层包裹一个di
HaushoLin·2024-02-02 22:58

Vue3 vant4 解决引入的Toast和dialog样式丢失的bug

情景再现：正确做法：在main.ts中单独引入import'vant/es/toast/style'import'vant/es/dialog/style'import{Toast,Dialog}from'vant'app.use(Toast)app.use(Dialog)效果如下轻松拿下。
HaushoLin·2024-02-02 22:56

vue3项目element-plus，树组件el-tree修改下拉图标，增加引导线

vue3项目element-plus，树组件el-tree修改下拉图标，增加引导线组件库的el-tree样式由于基础版的样式不满足当前的ui设计，所以对el-tree做一下样式改造参考的博客并做了一部分优化
Thurmanwang·2024-02-02 22:08

一只菜鸟的前端实习记录（碎碎念）

可能因为是第二段实习吧，我感觉和之前相比，真的心态有了质的变化，开个文章，在有些无聊的时候随手记录一些想法，将来回过头来看，会觉得一切都有迹可循。二、开始碎碎念感觉适应能力还可以耶！
小白探索世界欧耶！~·2024-02-02 21:31

菜鸡后端的前端学习记录-2

忘了记一下看的视频了，有兴趣的可以去看一看，目前感觉讲的还不错，但是需要有一定基础：【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通】（学习记录第二部分，都写到一个博客里太长了，不利于阅读复习
无名一小卒·2024-02-02 21:30
上一页 16 17 18 19 20 21 22 23 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他