当前位置:首页 > 技术文章 > web前端 > Vue.js

  • Vue3组件异步更新和nextTick运行机制源码分析
    Vue3组件异步更新和nextTick运行机制源码分析
    组件的异步更新我们应该都知道或者听说过组件的更新是异步的,对于nextTick我们也知道它是利用promise将传入的回调函数放入微任务队列中,在函数更新完以后执行,那么既然都是异步更新,nextTick是怎么保证回调会在组件更新后执行,其插入队列的时机又是什么时候?带着这些问题我们去源码中寻找答案。先回顾一下组件更新的effect:consteffect=(instance.effect=newReactiveEffect(componentUpdateFn,()=>queueJob(u
    Vue.js . web前端 1473 2023-05-16 10:01:13
  • vue3图片懒加载IntersectionObserver和useIntersectionObserver怎么用
    vue3图片懒加载IntersectionObserver和useIntersectionObserver怎么用
    1、在src下创建helloworld.js内容如下//随便导入一张图片作为加载出错时的默认图片importdefaultImgfrom'@/assets/logo.svg'import{useIntersectionObserver}from"@vueuse/core";//图片加载失败时候用的图片exportdefault{install(app){defineDirective(app)//自定义指令}}//自定义指令constdefin
    Vue.js . web前端 1529 2023-05-15 23:31:04
  • vue3怎么实现微信扫码登录及获取个人信息
    vue3怎么实现微信扫码登录及获取个人信息
    一、流程:微信提供的扫码方式有两种,分别是:跳转二维码扫描页面内嵌式二维码根据文档我们可以知道关于扫码授权的模式整体流程为:1.第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;2.通过code参数加上AppID和AppSecret等,通过API换取access_token;3.通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。二、前置条件:微信开发官网申请:appid:&l
    Vue.js . web前端 4383 2023-05-15 23:04:04
  • 怎么使用vue3搭建后台系统
    怎么使用vue3搭建后台系统
    首先使用npm或者yarn创建一个vue项目//使用npm创建一个基于vite构建的vue项目npmcreatevite@latest//使用yarn创建一个基于vite构建的vue项目yarncreatevite@latest在创建的构成中选择vuevue-ts创建完之后将项目拖到编译器打开一、配置vite在vite.config.ts文件中配置项目的服务数据,配置如下://此处配置项目服务参数server:{host:"0.0.0.0",//项目运行地址,此处代表loca
    Vue.js . web前端 2379 2023-05-15 22:43:04
  • Vue3之getCurrentInstance与ts怎么结合使用
    Vue3之getCurrentInstance与ts怎么结合使用
    getCurrentInstance与ts结合使用vue3项目中,如果不用ts这样使用是没问题的const{proxy}=getCurrentInstance()在ts中使用会报错:报错:...类型“ComponentInternalInstance|null”我们在项目中一般会用到很多getCurrentInstance()方法,直接封装一下创建useCurrentInstance.ts文件:import{ComponentInternalInstance,getCurrentInstance
    Vue.js . web前端 2599 2023-05-15 22:37:04
  • vue3中的ref与reactive怎么使用
    vue3中的ref与reactive怎么使用
    一、refref是Vue3中的一个函数,它可以将一个普通的变量转化为一个响应式变量。使用ref的时候,我们需要传入一个初始值,ref会返回一个包含了这个初始值的对象。使用ref的语法如下所示:import{ref}from'vue';constcount=ref(0);在上面的代码中,我们创建了一个名为count的变量,它的初始值为0。通过调用ref函数,我们将count变量转化为了一个ref对象。在组件中使用count的时候,我们需要通过.value来访问它的值
    Vue.js . web前端 1841 2023-05-15 22:25:10
  • Vue3怎么获取地址栏参数
    Vue3怎么获取地址栏参数
    Vue3获取地址栏参数有两个方式:查询参数和路径参数。Vue3获取地址栏参数是从路由router中获取,查询参数和路径参数获取方式不一样。一、查询参数比如地址http://127.0.0.1:5173/?code=123123,我们要获取code参数可以路由router获取,注意是route.query首先需要在router/index.js中定义好路由import{createRouter,createWebHistory}from'vue-router'con
    Vue.js . web前端 7095 2023-05-15 22:25:04
  • vue3如何使用el-upload上传文件
    vue3如何使用el-upload上传文件
    el-upload上传文件在项目开发的过程中上传文件的需求是经常会遇到的,这篇文章我们就详细介绍使用elementplus中el-upload来上传文件了。我们先来看一下el-upload可以配置哪些属性和事件。属性action:请求urlheaders:设置上传的请求头部method:设置上传请求方法multiple:是否支持多选文件data:上传时附带的额外参数name:上传的文件字段名with-credentials:支持发送cookie凭证信息以上这些参数都是采用action的默认方式请
    Vue.js . web前端 5327 2023-05-15 21:31:04
  • vue3配置全局参数及组件的使用方法
    vue3配置全局参数及组件的使用方法
    vue2的方式1.全局挂载Vue.property.xxximportVuefrom"vue";importaxiosfrom"axios";Vue.prototype.$http=axios;newVue({router,store,render:(h)=>h(App),}).$mount("#app");2.组件使用this.$http.xxx();vue3的方式1.全局挂载app.config.globalPropertie
    Vue.js . web前端 4150 2023-05-15 18:58:04
  • Vue3中其他的Composition API有哪些
    Vue3中其他的Composition API有哪些
    1.shallowReactive与shallowRefshallowReactive:只处理对象最外层属性的响应式(浅响应式)。shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理。什么时候使用?如果有一个对象数据,结构比较深,但变化时只是外层属性变化===>shallowReactive。如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换===>shallowRef。2.readonly与shallowReadonlyreadonly:让
    Vue.js . web前端 1599 2023-05-15 17:37:06
  • Vue3+Element-plus项目自动导入报错怎么解决
    Vue3+Element-plus项目自动导入报错怎么解决
    前言在创建Vue3+Element-plus项目时,根据Element-plus文档,采用自动导入,安装unplugin-vue-components和unplugin-auto-import两款插件,但在按要求配置后运行项目,npm报错ERRORSyntaxError:Unexpectedtoken'?'...\node_modules\unimport\dist\chunks\vue-template.cjs:55constname=i.as??i.name;
    Vue.js . web前端 2597 2023-05-15 17:13:10
  • 如何用vue3实现打砖块小游戏
    如何用vue3实现打砖块小游戏
    游戏需求创建一个场景创建一个球,创建一堆被打击方块创建一个可以移动方块并可控制左右移动当球碰撞左右上边界及移动方块回弹挡球碰撞下边界游戏结束完整代码停止游戏开始score:{{scroce}}{{str}}import{onMounted,onUnmounted,reactive,toRefs}from"vue"constboxWidth=500,//场景宽度boxHeight=300,//场景高度ball=10,//小球的宽高moveBottomH=5,//移动方块高度mo
    Vue.js . web前端 1670 2023-05-15 16:22:06
  • vue3使用reactive赋值后页面不改变怎么解决
    vue3使用reactive赋值后页面不改变怎么解决
    场景原因我们需要在vue3中使用服务器的数据渲染到页面上,我使用的是reactive生成的响应式数据属性,但是在挂载后请求的数据并没有渲染显示到页面上。技术:vue3、element-ui-plus一、例子home.vue{{item.authName}}{{item2.authName}}//引入模块import{reactive,onMounted}from'vue'import{useRouter}from'vue-router&#3
    Vue.js . web前端 4096 2023-05-15 14:22:21
  • Vue3响应式系统怎么实现computed
    Vue3响应式系统怎么实现computed
    首先,我们简单回顾一下:响应式系统的核心就是一个WeakMap---Map---Set的数据结构。WeakMap的key是原对象,value是响应式的Map。这样当对象销毁的时候,对应的Map也会销毁。Map的key就是对象的每个属性,value是依赖这个对象属性的effect函数的集合Set。然后用Proxy代理对象的get方法,收集依赖该对象属性的effect函数到对应key的Set中。还要代理对象的set方法,修改对象属性的时候调用所有该key的effect函数。上篇文章我们按照这样的思路
    Vue.js . web前端 1907 2023-05-15 13:13:06
  • laravel怎么安装inertia vue3的版本
    laravel怎么安装inertia vue3的版本
    一、安装前要求1.1已安装laravel框架1.2已安装NodeJS1.3已安装Npm包管理工具二、服务端配置2.1第一步:composer安装inertia-laravel$composerrequireinertiajs/inertia-laravel2.2第二步:laravel目录resouces/views/新增app.blade.php文件,加入以下代码@inertia2.3第三步:执行artisan命令,添加中间件$phpartisaninertia:middleware文件生成后,
    Vue.js . web前端 1378 2023-05-15 10:31:05

PHP讨论组

组员:3305人话题:1500

PHP一种被广泛应用的开放源代码的多用途脚本语言,和其他技术相比,php本身开源免费; 可以将程序嵌入于HTML中去执行, 执行效率比完全生成htmL标记的CGI要高许多,它运行在服务器端,消耗的系统资源相当少,具有跨平台强、效率高的特性,而且php支持几乎所有流行的数据库以及操作系统,最重要的是

学习途径

工具推荐

jQuery企业留言表单联系代码

jQuery企业留言表单联系代码是一款简洁实用的企业留言表单和联系我们介绍页面代码。
表单按钮
2024-02-29

HTML5 MP3音乐盒播放特效

HTML5 MP3音乐盒播放特效是一款基于html5+css3制作可爱的音乐盒表情,点击开关按钮mp3音乐播放器。
播放器特效
2024-02-29

HTML5炫酷粒子动画导航菜单特效

HTML5炫酷粒子动画导航菜单特效是一款导航菜单采用鼠标悬停变色的特效。
菜单导航
2024-02-29

jQuery可视化表单拖拽编辑代码

jQuery可视化表单拖拽编辑代码是一款基于jQuery和bootstrap框架制作可视化表单。
表单按钮
2024-02-29

TLShop 网店系统

TLShop 网店系统是一套轻量级的网店系统,配置简单,容易上手,可以让您迅速拥有自己的网站,管理账号和密码 admin
电商源码
2025-11-22

骑士多商户企业版卡密寄售系统

企业版卡密寄售自动发货系统。前后端代码完全开源。 主要特性 技术栈:Webman + PHP8 + MYSQL8 + Vite +TypeScript + Vue3 + TDesign Starter 有详细的代码注释,有完整系统手册 Webman框架 使用最新的 Webman 框架开发 前端使用Vue CLI框架nodejs打包,页面加载更流畅,用户体验更好 标准接口、前后端分离,二次开发更方便 支持邮件发送 支持短信发送 支持事件机制
电商源码
2025-11-22

海霆企业网站系统(HT-EWCMS)1.1

HT-EWCMS 为 Hetty - Enterprise Web Content Management System 的英文缩写,即海霆企业网站内容管理系统,HT-EWCMS为您提供一个高效快速和强大的企业网站解决方案,兼容各种主流操作系统和浏览器。HT-EWCMS著作权已在中华人民共和国国家版权局注册,海霆科技为 HT-EWCMS 产品的开发商,依法独立拥有 HT-EWCMS 产品著作权,著作权受到法律和国际公约保护。 HT-EWCMS 产品特点 01、功能实用:集10年企业建站经验,取其精华,
企业站源码
2025-11-22

HiShop网店代理分销系统

Hishop.5.2.BETA2版主要更新: [修改] 进一步优化了首页打开速度 [修改] 美化了默认模板 [修改] 优化系统架构,程序标签及SQL查询效率,访问系统页面的速度大大提高 [修改] 采用了HTML模板机制,实现了前台模板可视化编辑,降低模板制作与修改的难度. [修改] 全新更换前后台AJAX技术框架,提升了用户操作体验. 店铺管理 [新增] 整合TQ在线客服 [修改] 后台广告位增加到30个 [修改] 投票调查改为同时只能在前台显示一个,优化首页打开速度 [新增] 添加友情链接时,支持添加
电商源码
2025-11-22

INS风格感恩节模板设计下载

INS风格感恩节模板设计适用于感恩节INS模板设计 本作品提供INS风格感恩节模板设计的图片会员免费下载,格式为PSD,文件大小为30.4M; 请使用软件Photoshop进行编辑,作品中文字及图均可以通过软件修改和编辑;
psd素材
2025-11-22

浪漫地中海小镇旅行矢量图片

浪漫地中海小镇旅行矢量图片适用于地中海旅行等相关视觉场景设计的AI格式素材。
矢量素材
2025-11-21

手绘返校季开学季矢量素材

手绘返校季开学季矢量素材适用于开学季等相关视觉场景设计的AI格式素材。
矢量素材
2025-11-21

万圣节南瓜堆合集矢量素材

万圣节南瓜堆合集矢量素材适用于等相关视觉场景设计由AI生成的Ai格式素材。
矢量素材
2025-11-21

驾照考试驾校HTML5网站模板

驾照考试驾校HTML5网站模板是一款适合提供驾驶培训和组织驾照考试服务机构宣传网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
前端模板
2025-06-10

驾照培训服务机构宣传网站模板

驾照培训服务机构宣传网站模板是一款适合提供一般驾驶和计划培训的驾校宣传网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
前端模板
2025-01-07

新鲜有机肉类宣传网站模板

新鲜有机肉类宣传网站模板是一款适合提供各种新鲜有机肉类食材宣传网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
前端模板
2025-01-06

HTML5房地产公司宣传网站模板

HTML5房地产公司宣传网站模板是一款适合从事房地产服务行业宣传网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
前端模板
2025-01-06
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号