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

  • Vue3父子组件间通信、组件间双向绑定的方法
    Vue3父子组件间通信、组件间双向绑定的方法
    本文内容提要父子组件可通过事件进行通信携带参数的事件发送和监听回调使用组件的emits板块整理组件事件使用组件emits板块的Object形式校验外传的参数值结合$emit、v-bind与v-model实现父子组件通信(数据双向绑定)结合$emit、v-bind与v-model实现父子组件通信(多个字段的应用案例)自己设置修饰符试验this.modelModifiers的作用下面在子组件的点击回调handleClick()中,通过this.modelModifiers.[自己设置修饰符名]实现自
    Vue.js . web前端 3810 2023-05-15 09:28:05
  • Vue3组件间传值避坑方法有哪些
    Vue3组件间传值避坑方法有哪些
    实例填坑坑一1.发现天坑我们通过一个计数器组件来演示这个坑,当想对父组件传递过来的值做操作时,发现操作无效,先看代码:组件间传值constapp=Vue.createApp({data(){return{num:0}},template:``});//定义一个test组件app.component('counter',{props:['count'],template:`{{count}}`});constvm=app.mount(
    Vue.js . web前端 1349 2023-05-15 08:34:05
  • vite+vue3中怎么使用mock模拟数据问题
    vite+vue3中怎么使用mock模拟数据问题
    1.安装mockjs和vite-plugin-mocknpmimockjsvite-plugin-mock--save-dev2.在vite.config.ts文件中配置vite-plugin-mock使用方式import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{viteMockServe}from'vite-plugin-mock
    Vue.js . web前端 2693 2023-05-15 08:07:05
  • Vue3需要避免的错误有哪些
    Vue3需要避免的错误有哪些
    使用Reactive声明原始值数据声明在过去都是非常直接的,但是现在有很多帮助函数供我们使用。目前的规则是:使用reactive声明Object,Array,Map,Set使用ref声明String,Number,Boolean为一个原始值使用reactive会返回一个警告,并且该值不会成为可响应式数据。/*DOESNOTWORKASEXPECTED*/import{reactive}from"vue";constcount=reactive(0);矛盾的是,另一种方式是可行
    Vue.js . web前端 1470 2023-05-14 23:58:04
  • Vue3 style中新增的特性有哪些及怎么用
    Vue3 style中新增的特性有哪些及怎么用
    style新特性Vue3.2版本对单文件组件的style样式进行了很多升级,如局部样式、css变量以及样式暴露给模板使用等。(学习视频分享:vue视频教程)一、局部样式当标签带有scopedattribute的时候,它的CSS只会应用到当前组件的元素上:hi.example{color:red;}二、深度选择器处于scoped样式中的选择器如果想要做更“深度”的选择,也即:影响到子组件,可以使用:deep()这个伪类:.a:deep(.b){/*...*/}通过v-html创建的DOM内容不会被
    Vue.js . web前端 1960 2023-05-14 22:52:04
  • Vue3通用API功能怎么使用
    Vue3通用API功能怎么使用
    通用APIversion(暴漏当前使用的Vue版本)importVuefrom'vue';exportdefault{setup(props,context){console.log(Vue.version);return{};}};nextTick(Dom更新完成后触发,用于获取更新后的Dom)当我们更改响应式state时,Vue更新DOM并不是同步实时更新的,而是将同步执行的所有state更新缓存起来,同步代码执行完后再去执行Dom更新操作,很大程度的优化了r
    Vue.js . web前端 1326 2023-05-14 22:31:04
  • Vue3中Vuex怎么使用
    Vue3中Vuex怎么使用
    Vuex是做什么的?Vue官方:状态管理工具状态管理是什么?需要在多个组件中共享的状态、且是响应式的、一个变,全都改变。例如一些全局要用的的状态信息:用户登录状态、用户名称、地理位置信息、购物车中商品、等等这时候我们就需要这么一个工具来进行全局的状态管理,Vuex就是这样的一个工具。单页面的状态管理View–>Actions—>State视图层(view)触发操作(action)更改状态(state)响应回视图层(view)vuex(Vue3.
    Vue.js . web前端 2615 2023-05-14 20:28:04
  • Vue3中怎么引入Pinia存储库并使用
    Vue3中怎么引入Pinia存储库并使用
    1.用自己最喜欢的方式安装yarnaddpinia#或者使用npmnpminstallpinia2.main.js引入import{createApp}from'vue'importAppfrom'./App.vue'constapp=createApp(App)import{createPinia}from'pinia'//引入piniaapp.use(createPinia())app.mount
    Vue.js . web前端 2010 2023-05-14 19:13:04
  • Vue3没有代码提示问题如何解决
    Vue3没有代码提示问题如何解决
    首先,我们已经很明确的就是安装了volar插件之后,HTML标签片段补全已经失效,即在template中书写HTML标签时,不会再有代码补全,即输入“div”,就是“div”,而不再是“”,为了解决这个问题,我们需要在不删除volar插件的同时,对Vscode做一些配置。打开设置,进入到如下界面:选择文本编辑器->文本->,点击右面第一个,添加项,项输入:“*.vue”,值输入:"html",点击保存后回到vue文件中,任何输入HTML标签,发现已经可以自动补全代
    Vue.js . web前端 5392 2023-05-14 19:07:04
  • 怎么使用vue3+ts+vite+electron搭建桌面应用
    怎么使用vue3+ts+vite+electron搭建桌面应用
    一、版本背景介绍vite:^4.2.0vue:^3.2.47ts:^4.9.3electron:^23.2.1二、过程1.搭建vite+vue-ts的项目yarncreatevite@vuets_electron--templatevue-tscd./vuets_electronyarninstall&&yarndev2.接入electron为了保证electron能够正常安装,在vuets_electron的根目录下创建.npmrc,设置一下electron的镜像源#/.npm
    Vue.js . web前端 2625 2023-05-14 18:46:06
  • Vue3全局组件通信之provide/inject源码分析
    Vue3全局组件通信之provide/inject源码分析
    1、前言顾名思义,爷孙组件是比父子组件通信要更深层次的引用关系(也有称之为“隔代组件”):C组件引入到B组件里,B组件引入到A组件里渲染,此时A是C的爷爷级别(可能还有更多层级关系),如果你用props,只能一级一级传递下去,那就太繁琐了,因此我们需要更直接的通信方式。他们之间的关系如下,Grandson.vue并非直接挂载在Grandfather.vue下面,他们之间还隔着至少一个Son.vue(可能有多个):Grandfather.vue└─Son.vue└─Grandson.vue因为上下
    Vue.js . web前端 1262 2023-05-14 17:58:06
  • Vue3中的setup与自定义指令怎么使用
    Vue3中的setup与自定义指令怎么使用
    setup语法糖最大好处就是所有声明部分皆可直接使用,无需return出去注意:部分功能还不完善,如:name、render还需要单独加入script标签按compositionAPI方式编写//setup下还可以附加setup语法糖独有import{ref,reactive,toRefs}from'vue'consta=1;constnum=ref(99)//基本数据类型constuser=reactive({//引用数据类型age:11})//解构能获取响应式
    Vue.js . web前端 1819 2023-05-14 17:01:18
  • Vue3 setup的注意点及watch监视属性的情况有哪些
    Vue3 setup的注意点及watch监视属性的情况有哪些
    一,setup须知1.1setup的执行时间1.setup的执行时间要比beforCreate执行要早exportdefault{name:"Demo",beforeCreate(){console.log('beforeCreate已执行');},setup(){console.log('setup已执行');letperson=reactive({name:"小明",age:20,});r
    Vue.js . web前端 1220 2023-05-14 15:31:06
  • Vue3 Element-plus和el-menu无限级菜单组件怎么封装
    Vue3 Element-plus和el-menu无限级菜单组件怎么封装
    对于element中提供给我们的el-menu组件最多可以实现三层嵌套,如果多一层数据只能自己通过变量去加一层,如果加了两层、三层这种往往是行不通的,所以只能进行封装效果图一、定义数据MenuData.tsexportdefault[{id:"1",name:"第一级菜单",level:'1',child:[{id:"11",name:"第二级菜单",level:'1-
    Vue.js . web前端 1633 2023-05-14 14:49:11
  • Vue3之元素和组件的动画怎么切换
    Vue3之元素和组件的动画怎么切换
    实例解析元素间的动画切换元素之间的动画切换指的是两个dom元素之间的切换,比如一个div消失,另一个div显示,消失对应着渐出的效果,显示对应渐入的效果,本例我们以两个div,一个显示helloworld,另一个显示byeworld,然后使用一个按钮控制动画的切换,代码如下:元素切换动画的实现.v-enter-from{opacity:0;}.v-enter-active{transition:opacity1sease-in;}.v-enter-to{opacity:1;}.v-leave-f
    Vue.js . web前端 1176 2023-05-14 14:16:11

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号