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

vue3 快速入门系列 —— vue3 路由

vue3 快速入门系列 - vue3 路由 在vue3 基础上加入路由。 vue3 需要使用 vue-router V4,相对于 v3,大部分的 Vue Router API 都没有变化。 Tip:不了解路由的同学可以看一下笔者之前的文章:vue2 路由 参考:vue2 路由官网、vue3...[2024/4/10]

父组件明明使用了v-model,子组件竟然可以不用定义props和emit抛出事件,快来看看吧

父组件明明使用了v-model,子组件竟然可以不用定义props和emit抛出事件,快来看看吧

前言 vue3.4增加了defineModel宏函数,在子组件内修改了defineModel的返回值,父组件上v-model绑定的变量就会被更新。大家都知道v-model是:modelValue和@update:modelValue的语法糖,但是你知道为什么我们在子组件内没有写任何关于props...[2024/4/8]

基于vue3的Crontab组件

网上找的没有满意的,决定从若依前后端分离其前端vue2中的crontab进行转换,先上效果 若依v2版:  改v3后:     v2转v3没什么难度,其中有大量的将 this.*** 替换为 ***.value,笔者写了个正则替换,希望可以帮助...[2024/4/8]

Ant Design Vue Tree 选中子节点同时半选中父级节点

需要实现的效果: 1、子菜单如果不是全部选中,一级菜单半选。 2、子菜单全选,一级菜单选中。 3、一级菜单选择,二级菜单全选。 4、没有二级菜单,则只控制一级菜单。 主要用到的属性是checked和halfCheckedKeys,通过手动控制那些菜单选中,那些半选中实现功能。 **页面截...[2024/3/29]

面试官:只知道v-model是:modelValue和@onUpdate语法糖,那你可以走了

前言 我们每天都在用v-model,并且大家都知道在vue3中v-model是:modelValue和@update:modelValue的语法糖。那你知道v-model指令是如何变成组件上的modelValue属性和@update:modelValue事件呢?将v-model指令转换为mode...[2024/3/26]

第143篇:手写vue-router,实现router-view

好家伙,   今天来手写我们的老伙计vue-router,   1.替换router 新开一个项目,并使用我们手写的router   2.大致结构 let Vue; 保存vue的构造函数 cla VueRouter { constru...[2024/3/13]

为什么defineProps宏函数不需要从vue中import导入?

为什么defineProps宏函数不需要从vue中import导入?

前言 我们每天写vue代码时都在用defineProps,但是你有没有思考过下面这些问题。为什么defineProps不需要import导入?为什么不能在非setup顶层使用defineProps?defineProps是如何将声明的 props 自动暴露给模板? 举几个例子 我们来看几个例子...[2024/3/13]

通过debug搞清楚.vue文件怎么变成.js文件

前言 我们每天写的vue代码都是写在vue文件中,但是浏览器却只认识html、c 、js等文件类型。所以这个时候就需要一个工具将vue文件转换为浏览器能够认识的js文件,想必你第一时间就想到了webpack或者vite。但是webpack和vite本身是没有能力处理vue文件的,其实实际背后生效...[2024/3/7]

答应我,在vue中不要滥用watch好吗?

前言 上周五晚上8点,开开心心的等着产品验收完毕后就可以顺利上线。结果产品突然找到我说要加需求,并且维护这一块业务的同事已经下班走了,所以只有我来做。虽然内心一万头草泥马在狂奔,但是嘴里还是一口答应没问题。由于这一块业务很复杂并且我也不熟悉,加上还饿着肚子,在梳理代码逻辑的时候我差点崩溃了。需要...[2024/3/1]

优雅使用前端枚举Enum,符合国标的那种!

01、什么是枚举Enum? 枚举Enum是在多种语言中都有的一种数据类型,用于表示一组特定相关的常量数据集合,如性别(男、女)、数据状态(可用、禁用)、垂直对齐(顶端、居中、底部)、星期等。特点是数据值固定,不会变,存储和显示的内容不同。 然而在JavaScript中并没有枚举Enum类型...[2024/2/28]

Vue 3 的 setup语法糖到底是什么东西?

前言 我们每天写vue3项目的时候都会使用setup语法糖,但是你有没有思考过下面几个问题。setup语法糖经过编译后是什么样子的?为什么在setup顶层定义的变量可以在template中可以直接使用?为什么import一个组件后就可以直接使用,无需使用components 选项来显式...[2024/2/26]

测试也能开发 - 点击二级分类实现自动筛选功能

写在前面 怎么来诠释下现在的心情呢? 算是比较复杂吧,我也想过关于自己个人问题的事,始终是无解的状态。 35岁,变成了一个没有胆量、小心翼翼的年纪,甚至说慎重到说话都要反复思考的程度,先不说内耗问题了,真的就是负能量爆棚了,我有那么一阵极度怀疑自己丧失了和人沟通的能力。 今天,我cod...[2024/2/23]

vue3的宏到底是什么东西?

前言 从vue3开始vue引入了宏,比如defineProps、defineEmits等。我们每天写vue代码时都会使用到这些宏,但是你有没有思考过vue中的宏到底是什么?为什么这些宏不需要手动从vue中import?为什么只能在setup顶层中使用这些宏? vue 文件如何渲染到浏览器上 要...[2024/2/21]

玩转 CMS2

玩转 CMS2

玩转 CMS2 上篇研究了样式、请求、evn、mock,感觉对效率的提升没有太明显作用。 比如某个工作需要2天,现在1天可以干完,这就是很大的提升。 提高效率的方法有代码复用、模块化、低代码工具。 目前可以考虑从代码复用方面下手,即使最低级的代码复制也可以。 要快速提高效率,需要对本地项...[2024/2/21]

零基础入门Vue之影分身之术——列表渲染&渲染原理浅析

听我说 从 条件渲染 那一篇,我学习到了如何用Vue对dom节点根据条件显示 但单单有条件还不够啊,有时候数据是一大坨一大坨的数据,如果Vue不提供咱要么使用“v-html” 要么就没办法实现 v-html又感觉太low了,Vue提供了另外的指令更好的实现,那便是:列表渲染 列表渲染:v...[2024/2/7]

零基础入门Vue之画龙点睛——再探监测数据

零基础入门Vue之画龙点睛——再探监测数据

追忆 上一节:零基础入门Vue之影分身之术——列表渲染&渲染原理浅析 虽然我深知,大佬告诉我”先学应用层在了解底层,以应用层去理解底层“,但Vue的数据如何检测的我不得不去学 否则,在写代码的时候,可能会出现我难以解释的bug 对此,本篇文章,将记录我对Vue检测数据的理解 ...[2024/2/7]

一文搞懂 Vue3 defineModel 双向绑定:告别繁琐代码!

前言 随着vue3.4版本的发布,defineModel也正式转正了。它可以简化父子组件之间的双向绑定,是目前官方推荐的双向绑定实现方式。 vue3.4以前如何实现双向绑定 大家应该都知道v-model只是一个语法糖,实际就是给组件定义了modelValue属性和监听update:modelV...[2024/2/5]

零基础入门Vue之To be or not to be——条件渲染

零基础入门Vue之To be or not to be——条件渲染

温故 上一节:零基础入门Vue之皇帝的新衣——样式绑定 在前面的内容能了解到,Vue不仅仅能进行数据渲染还可以对样式进行绑定 并且他能随意的切换样式,但Vue的初衷就是尽量少让使用者操作dom节点 加入你要让指定dom显示或者不显示,该怎么办呢?以目前的东西来说,不拿到dom节点还是做不到...[2024/2/5]

uni-app+vue3会遇到哪些问题

已经用 uni-app+vue3+ts 开发了一段时间,记录一下日常遇见的问题和解决办法 uni-app 中的单端代码 uni-app 是支持多端,如果你想让你的代码,只在部分平台使用,那么就需要用的它的单端处理语法 #ifdef 和 #ifndef 等。 1. #ifdef xxx...[2024/2/2]

没有虚拟DOM版本的vue(Vue Vapor)

前言 随着Svelte和SolidJS的流行,无虚拟DOM模式逐渐开始火了起来。vue也推出了无虚拟DOM模式的版本,就是我们今天要讲的Vue Vapor。 什么是Vue Vapor Vue Vapor是一个无虚拟DOM模式版本的vue。这个仓库是2023年11月9日基于vuej core仓库...[2024/1/26]

Vue3 Diff算法之最长递增子序列,学不会来砍我!

专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核??推荐?? 欢迎各位ITer关注点赞收藏?????? Vue2 Diff算法可以参考【Vue2.x源码系列08】Diff算法原理 Vue3 Diff算法可以参考【Vue3.x源码系列06】D...[2024/1/19]

Vue.js 原理分析

Vue.js 原理分析

  本文内容提炼于《Vue.js设计与实现》,全书共 501 页,对 Vue.js 的设计原理从 0 到 1,循序渐进的讲解。   篇幅比较长,需要花些时间慢慢阅读,在合适的位置会给出在线示例以供调试。 一、概览   Vue.js 是一款声明式框架,注重结果;早年间流行的 jQuery 是典...[2024/1/10]

uni-app+vue3+ts项目搭建完整流程

项目代码同步更新至码云 uni-vue3-ts-template 开发前准备 利用 uni-app 开发,有两种方法: 通过 HBuilderX 创建(需安装 HBuilderX 编辑器) 通过命令行创建(需安装 NodeJS 环境),推荐使用 vscode 编辑器 这里我们使用第2...[2024/1/10]

扩展 jQurey.i18n.properties 的能力来向 vue-i18n 靠齐

扩展 jQurey.i18n.properties 的能力来向 vue-i18n 靠齐

jQuery.i18n.properties 是 jQuery 老项目的国际化框架,其实国际化方案本质上都大同小异,都是需要用翻译函数包裹词条,然后根据词条文件来进行翻译 就是使用上与其他框架不太一样而已 但由于我们已经基于 vue 框架实现了一个国际化自动处理脚本,脚本会自动用全局函数包裹...[2024/1/8]

uniapp的app苹果应用商店上架最简教程

除了测试版本之外,uniapp打包好的ipa文件是无法直接安装在普通用户的手机上面,这是苹果的证书和描述文件的机制的原因。 因此我们需要将打包好的ipa文件上架到苹果应用商店,也就是app store。 下面我整理了一篇全程不需要mac os电脑参与的上架苹果应用商店的教程。 教程的第一步...[2024/1/5]

项目国际化的难点痛点是什么

如果有做过项目国际化的应该了解, 国际化的工作项大概包括以下几项: 【词条相关工作】 文本包裹翻译函数,如 $t 提取翻译词条到 json 文件里 翻译并更新 json 文件 【三方库相关工作】 组件库的国际化配置,如 element-ui 组件库 其他有词条场景的三方库的国际化配置 ...[2024/1/5]

【源码系列#05】Vue3响应式原理(Ref)

Ref & ShallowRef ref:接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value 可以将 ref 看成 reactive 的一个变形版本,这是由于 reactive 内部采用 Proxy 来实现,而 ...[2024/1/5]

Layui treeTable 使用【数据不显示、子级不显示】

返回JSON数据类 public cla LeaveMe ageTreeTable { public LeaveMe ageTreeTable() { this.children = new List<LeaveMe ageTreeTable>(...[2023/12/29]

【UniApp】-uni-app-打包成网页

前言 经过上一篇文章的介绍,已经将这个计算器的计算功能实现了,接下来就是我们项目当中的一个发包上线阶段,我模拟一下,目的就是为了给大家介绍一下,uni-app是如何打包成网页的。 除了可以打包成网页,uni-app还可以打包成小程序、App、H5、快应用等等,后面在单独开文章详细介绍。 正...[2023/12/29]

【UniApp】-uni-app-打包成小程序

【UniApp】-uni-app-打包成小程序

前言 大家好,我是 BNTang, 在上一节文章中,我给大家详细的介绍了如何将我开发好的项目打包为网页。 趁热打铁,在来一篇文章,给大家详细的介绍如何将项目打包为小程序。 正文 打开微信小程序呢,其实还是需要进行一些相关的配置的 首先打开微信小程序的配置页面找到 manifest.jso...[2023/12/29]

【UniApp】-uni-app-项目实战页面布局(苹果计算器)

前言 经过前面的文章介绍,基本上 UniApp 的内容就介绍完毕了 那么从本文开始,我们就开始进行一个项目的实战 这次做的项目是苹果计算器,这个项目的难度不是很大,但是也不是很简单,适合练手 创建项目 打开 HBuilderX,点击左上角 文件 -> 新建 -> 项目: ...[2023/12/26]

【UniApp】-uni-app-动态计算字体大小(苹果计算器)

前言 本文主要介绍uni-app中动态计算字体大小的方法 原因呢就是在上一篇文章当中我发现输入的内容已经超过了展示区域 于是我就想到了动态计算字体大小的方法,这样就可以保证输入的内容不会超过展示区域 正文 首先要改造的是 style="font-size: 180rpx;" ...[2023/12/26]

【UniApp】-uni-app-CompositionAPI应用生命周期和页面生命周期

【UniApp】-uni-app-CompositionAPI应用生命周期和页面生命周期

前言 好,经过上个章节的介绍完毕之后,了解了一下 uni-app-OptionAPI应用生命周期和页面生命周期 那么了解完了uni-app-OptionAPI应用生命周期和页面生命周期之后,这篇文章来给大家介绍一下 uni-app-CompositionAPI应用生命周期和页面生命周期 Co...[2023/12/11]

Vue3+Vite+ElementPlus管理系统常见问题

本文本记录了使用 Vue3+Vite+ElementPlus 从0开始搭建一个前端工程会面临的常见问题,没有技术深度,但全都是解决实际问题的干货,可以当作是问题手册以备后用。本人日常工作偏后端开发,因此,文中的一些前端术语描述可能不严谨,敬请谅解。重点是:这里记录的解决方案都是行之有效果的,拿来...[2023/12/8]

【UniApp】-uni-app概述

前言 好,经过我们前面文章的编写,大家可以了解到微信小程序开发相关的知识,了解完了这个微信小程序开发和云开发之后,从这篇文章开始,我再来给大家写一下关于 Uniapp 的知识。 好,开始,那什么是 Uniapp 呢?这个时候我们不管三七二十一,先打开我们 Uniapp 官方文档,它官方地址...[2023/12/8]

OpenTiny Vue 3.12.0 发布:文档大优化!增加水印和二维码两个新组件&#127880;

OpenTiny Vue 3.12.0 发布:文档大优化!增加水印和二维码两个新组件&#127880;

你好,我是 Kagol。 非常高兴跟大家宣布,2023年11月30日,OpenTiny Vue 发布了 v3.12.0 ??。 OpenTiny 每次大版本发布,都会给大家带来一些实用的新特性,10.24 我们发布了 v3.11.0 版本,增加了富文本、ColorPicker 等4个新组件,...[2023/12/8]

【UniApp】-uni-app-全局数据和局部数据

前言 好,经过上个章节的介绍完毕之后,了解了一下 uni-app-全局样式和局部样式 那么了解完了全局样式和局部样式之后,这篇文章我再来给大家介绍一下 UniApp 中全局数据和局部数据 搭建演示环境 创建一个全新的项目: 然后在配置一下,微信小程序的 AppId,直接去之前的项目...[2023/12/8]

Vue公共loading升级版(处理并发异步差时响应)

公共loading是项目系统中很常见的场景,处理方式也不外乎三个步骤: 1.通过全局状态管理定义状态值(vuex、pinia等)。 2.在程序主入口监听状态值变化,从而展示/隐藏laoding动画。 3.在请求和相应拦截器中变更状态值。 第一二步骤处理大同小异,但在第三步中,网上很多博文...[2023/11/22]

一个简单案例的Vue2.0源码

本文学习vue2.0源码,主要从new Vue()时发生了什么和页面的响应式更新2个维度了解Vue.js的原理。以一个简单的vue代码为例,介绍了这个代码编译运行的流程,在流程中原始DOM的信息会被解析转换,存在不同的对象中。其中关键的对象有el、template、ast、code、render...[2023/11/20]

在Vue3中使用Element-Plus分页(Pagination )组件

在Vue3中使用Element-Plus分页(Pagination )组件 开发过程中数据展示会经常使用到,同时分页功能也会添加到页面中。 记:在Vue3中使用Element-Plus分页组件与表格数据实现分页交互。 开始实现 引入表格和分页组件的H5标签。 <strong>...[2023/11/20]

手撕Vuex-提取模块信息

手撕Vuex-提取模块信息

前言 在上一篇【手撕Vuex-模块化共享数据】文章中,已经了解了模块化,与共享数据的注意点。 那么接下来就要在我们自己的 Nuex 中实现共享数据模块化的功能。那么怎么在我们自己的 Nuex 中实现共享数据模块化的功能呢? 处理数据 也非常的简单,是不是就是处理一下子模块的数据,处理一下子模...[2023/11/8]

【Vue3响应式原理#02】Proxy and Reflect

专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核??推荐?? 欢迎各位ITer关注点赞收藏?????? 背景 以下是柏成根据Vue3官方课程整理的响应式书面文档 - 第二节,课程链接在此:Proxy and Reflect - Vue 3 R...[2023/11/6]

手撕Vuex-实现mutations方法

经过上一篇章介绍,完成了实现 getters 的功能,那么接下来本篇将会实现 mutations 的功能。 在实现之前我们先来回顾一下 mutations 的使用。 将官方的 Vuex 导入进来,因为我们的还没有实现,现用一下官方的,来演示一下 mutations 的使用。 mutat...[2023/11/1]

Vue:watch的多种使用方法

Vue:watch的多种使用方法

好家伙,   补了一下watch的多种用法   1.属性: 方法(最常用) 使用最广泛的方式是将watch选项设置为一个对象,对象的属性是要观测的数据属性,值是一个回调函数,该回调函数会在属性变化时触发。例如: watch: { firstName: func...[2023/10/25]

手撕Vue-实现事件相关指令

经过上一篇文章的学习,实现了界面驱动数据更新,接下来实现一下其它相关的指令,比如事件相关的指令,v-on 这个指令的使用频率还是很高的,所以我们先来实现这个指令。 v-on 的作用是什么,是不是可以给某一个元素绑定一个事件。 紧接着了解了 v-on 的作用之后,我在 example.html...[2023/10/23]

使用 Ant Design Vue 你可能会遇到的14个问题 - xingba-coder

公司有一个新需求,在原来项目基础上开发,项目中使用 Ant Design Vue,版本是 1.X ,在此记录下遇到的问题;对于没有使用过或者使用程度不深的同学来说,希望可以帮助你在开发中遇到问题时有个参考。对于已经熟练使用的同学,可能这些问题都遇到过,欢迎大家在评论区补充。 1、实现对下拉框显示...[2023/10/23]

Vue源码学习(十三):nextTick()方法

Vue源码学习(十三):nextTick()方法

好家伙,nextTick, (...这玩意,不太常用)   1.什么是nextTick 在Vue中,nextTick是一个用于异步执行回调函数的方法。 它在Vue更新DOM后被调用,以确保在下一次DOM更新渲染完成后执行回调函数。 而事实上,我们把队列处理的操作封装到了nex...[2023/10/23]

Vue源码学习(十二):列队处理(防抖优化,多次调用,只处理一次)

好家伙,   本篇讲的是数据更新请求列队处理   1.一些性能问题 数据更新的核心方法是watcher.updata方法 实际上也就是vm._updata()方法, vm._updata()方法中的patch()方法用于将新的虚拟DOM树与旧的虚拟DOM树进行比较...[2023/10/20]

手撕Vue-数据驱动界面改变下

手撕Vue-数据驱动界面改变下

经过上一篇的介绍,数据驱动界面改变 v-model 的双向绑定已告一段落, 剩余的就以这篇文章来完成。 首先完成我们的 v-html,v-text, 其实很简单,就是将我们之前的 v-model 创建观察者的方法,在 v-html 和 v-text 中再写一次即可,创建属于 v-html 和 ...[2023/10/20]

[MAUI]深入了解.NET MAUI Blazor与Vue的混合开发

@目录Vue在混合开发中的特点创建MAUI项目创建Vue应用使用element-ui组件库JavaScript和原生代码的交互传递根组件参数从设备调用Javascript代码从Vue页面调用原生代码读取设备信息项目地址 .NET MAUI结合Vue的混合开发可以使用更加熟悉的Vue的语法代替B...[2023/10/19]

373
2
记录数:1074 页数:1/2212345678910下一页尾页
 友情链接:直通硅谷  直通硅谷 怎么样 mac软件下载
加载更多