Vue基础

最新推荐文章于 2026-06-17 16:39:54 发布
原创 最新推荐文章于 2026-06-17 16:39:54 发布 · 1.3k 阅读 · 24 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js #前端 #javascript
本文详细介绍了Vue.js中的列表渲染、字典渲染、事件处理（包括事件触发、修饰符和组件间通信）、组件数据和Props的传递、状态管理（Vuex）、事件与v-model配合、插槽、组件生命周期、动态组件与依赖注入、网络请求（Axios）以及路由相关知识，适合深入学习Vue开发者参考。

文章目录

列表渲染

在这里插入图片描述

字典渲染

在这里插入图片描述

通过key管理状态

在这里插入图片描述

事件处理

内联事件

在这里插入图片描述

方法事件处理器

在这里插入图片描述

事件传参

event 获取对象

在这里插入图片描述

传递事件对象

在这里插入图片描述

事件修饰符

阻止默认事件

在这里插入图片描述

组织事件冒泡

在这里插入图片描述

数组变化监听

变更法

在这里插入图片描述

替换一个数组

在这里插入图片描述

计算属性

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

class绑定

在这里插入图片描述

绑定对象

在这里插入图片描述

多对象绑定

在这里插入图片描述

数组绑定

在这里插入图片描述
在这里插入图片描述

数组和对象对class绑定，一般不用

在这里插入图片描述

style

绑定对象

在这里插入图片描述

监听器

在这里插入图片描述
在这里插入图片描述

表单输入绑定

在这里插入图片描述

复选框

在这里插入图片描述
在这里插入图片描述

模板引用

在这里插入图片描述

组件

在这里插入图片描述
在这里插入图片描述

组件导入

在这里插入图片描述

组件style scoped 样式生效作用域

在这里插入图片描述

组件嵌套关系

在这里插入图片描述

在这里插入图片描述

组件注册

在这里插入图片描述

全局注册

在这里插入图片描述

局部注册

在这里插入图片描述

组件传递数据_Props

在这里插入图片描述

在这里插入图片描述

父级传给子级

父级写法

在这里插入图片描述

父级动态传递

在这里插入图片描述

子级写法

在这里插入图片描述

组件传递数据

在这里插入图片描述

组件传递Props校验

子组件中校验

在这里插入图片描述
在这里插入图片描述

子组件中设置默认值

在这里插入图片描述

数组和对象用函数返回

在这里插入图片描述

必选项

在这里插入图片描述

props是只读的，不能修改父元素的数据

在这里插入图片描述

组件事件传递

在这里插入图片描述

父级写法

在这里插入图片描述

子级写法

在这里插入图片描述

组件事件配合v-model使用

组件数据传递

在这里插入图片描述

利用函数

透传属性

在这里插入图片描述

禁用透传属性

子组件中

在这里插入图片描述

插槽

在这里插入图片描述

父组件写法

在这里插入图片描述

子组件写法

在这里插入图片描述

插槽渲染作用域是父组件的

在这里插入图片描述

具名插槽

父级写法

在这里插入图片描述

简写

在这里插入图片描述

子级写法

在这里插入图片描述

同时使用父级和子级的作用域的数据

在这里插入图片描述

父级写法

子级写法

组件生命周期

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

组件生命周期应用

在这里插入图片描述

通过ref读取元素结构

在这里插入图片描述

动态组件

在这里插入图片描述

在这里插入图片描述

组件保持存活

在这里插入图片描述

在这里插入图片描述

异步组件

在这里插入图片描述

在这里插入图片描述

依赖注入

在这里插入图片描述
在这里插入图片描述

祖宗级写法使用provide

在这里插入图片描述

子孙级写法 inject

在这里插入图片描述

全局读取

在这里插入图片描述

在这里插入图片描述

应用

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

引入第三方

在这里插入图片描述

https://swiperjs.com/vue

npm install --save swiper@8.1.6

例子

在这里插入图片描述

在这里插入图片描述

Axios网络请求

npm install --save axios

在这里插入图片描述

get

在这里插入图片描述

在这里插入图片描述

post

需要装一个querystring

在这里插入图片描述
在这里插入图片描述

挂载到全局

在这里插入图片描述

封装axios

构建instance

在这里插入图片描述

发送请求之前

在这里插入图片描述

获取数据之前

在这里插入图片描述

错误状态码

在这里插入图片描述

跨域

在这里插入图片描述

解决方案

在这里插入图片描述
在这里插入图片描述

路由

在这里插入图片描述

异步加载

在这里插入图片描述

路由传递参数

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二级导航

在这里插入图片描述
在这里插入图片描述

vuex store

在这里插入图片描述
在这里插入图片描述

状态管理核心

在这里插入图片描述

Getter

在这里插入图片描述

mutation

在这里插入图片描述
在这里插入图片描述

action

在这里插入图片描述
在这里插入图片描述

element-plus

element-plus图标

Mystery_zero
关注
Vue开发工具vuejs-devtools超级详细安装教程以及常见问题解决
热门推荐
goog_man的博客
01-13 6万+
这绝对是最详细的Vue开发工具vuejs-devtools安装教程，相信你只需要5分钟即可解决所有问题 所需的所有文件，链接：https://pan.baidu.com/s/19GWDS_7GodIdFBUO0eTDAg 提取码：2yvc 一、vue.js插件下载 下载地址：vue.js插件下载； 点击进入Vue官网即可下载，共有两种版本的插件（开发版本：vue.js，生产版本：vue.main.js），建议使用开发版本。开发版本有更多的错误信息提示和调试，文件较大，生产办文件小但是很多提示不全，解决开发
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
ranran0306的博客
06-27 8802
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
【零基础入门VUE】VueJS - 概述
共同学习、强我国家
12-26 1125
不会对 DOM 进行更改，而是创建 DOM 的副本，该副本以 JavaScript 数据结构的形式存在。最终的更改会更新到真实的 DOM，用户将看到它的变化。随后，对两个 JavaScript 对象进行比较，并在真实 DOM 中更新最终的更改。Ember 添加了 glimmer 渲染引擎，旨在提高重新渲染性能，这与使用虚拟 DOM 的 VueJS 和 React 是类似的概念。随着时间的推移，淘汰赛的发展速度已经放缓。VueJS 继承了 Angular 和 React 的优点，并构建了一个强大的库。
vue和vuejs区别_D3vue-VueJS的D3插件
cuk5340的博客
07-24 2909
vue和vuejs区别 D3vue (D3vue) D3 integration with Vue.js. 与Vue.js的D3集成。 View demo 查看演示 Download Source 下载源 d3vue is a plugin for VueJS 2 that allows you to take data from your Vue instance and bind ...
VueJS WebPack separating javascript from vue
suiusoar
11-19 855
VueJS 与 Webpack：将 JavaScript 从 Vue 文件中分离
web应用技术作业06
2403_89185994的博客
06-17 76
把员工信息列表展示的页面的表格样式，从“带斑马纹表格”，改成“基础表格”样式，并且只占窗口的60%在pom.xml文件中引入dom4j的依赖用于解析XML文件emp.xml。stripe属性可以创建带斑马纹的表格。margin: 0 auto居中。border显示边框。
vue3项目引用vue-office组件
荔枝吖阿
06-17 68
1. 安装 （vue-demi 0.14.10版本的比较稳定）2. Vite 配置优化。
Vue学习笔记
wanger61的博客
06-15 274
【代码】Vue学习笔记。
135 Vue 卡片标签溢出处理：如何用真实 DOM 宽度实现“显示部分标签 +N
samllucky的博客
06-17 212
本文介绍了在Vue中实现卡片标签溢出处理的精确方案。当标签过多时，不是简单截断，而是完整显示能放下的标签并用"+N"表示剩余数量。核心思路是通过隐藏的DOM测量标签实际宽度，动态计算容器能容纳的标签数。具体实现包括： 准备两套DOM：显示的标签区域和隐藏的测量区域 使用visibility:hidden而非display:none确保能获取真实宽度 计算容器可用宽度（需减去padding） 考虑flex布局的gap间距 实现从多到少的尝试算法，确定最多能完整显示的标签数 使用nextTick确保DOM更新完
Jenkins自动化部署Vue前端和.NET后端项目到Windows服务器
cgs的博客
06-16 283
目标：想要将仓库中的前后端项目通过自动化部署到指定的服务器，前端项目使用的是，后端项目使用的是。jenkins 服务器是，windows 服务器是。
vue el-pagination实现分页
enthan809882的博客
06-15 286
vue el-pagination实现分页
药店管理|基于springboot + vue药店管理系统(源码+数据库+文档)
本人在Java毕业设计领域有十多年的经验，目前专注于大学生项目实战开发,讲解,毕业答疑辅导等。
06-13 459
本文介绍了一个基于SpringBoot+Vue的美食分享系统，主要内容包括： 系统概述：博主作为大厂开发人员提供的实战项目，包含小程序、Web前后端完整方案。 技术架构： 后端采用SpringBoot框架，简化配置并内置Tomcat 前端使用Vue.js实现组件化开发 MySQL作为关系型数据库 设计特点： 遵循用户友好的界面设计原则 包含导航条、操作一致性等用户体验优化 采用分层架构设计 项目保障： 提供完整功能演示 附有代码示例和测试案例 可获取完整源码 扩展服务： 配套毕业设计选题推荐 提供专业技术支
Vue3自定义插件：封装一个全局消息提示插件，所有组件都能直接用
阿猫故乡的博客
06-15 508
本文详细介绍了如何从零开始开发一个Vue3全局消息提示插件，主要内容包括： 插件基础概念：Vue插件是一个包含install方法的对象，通过app.use()注册后可在整个应用中使用。 实现步骤： 创建基础插件框架，挂载全局$toast方法 开发ToastMessage组件，支持不同类型消息和动画效果 使用createApp动态创建组件实例并挂载到DOM 封装useToast工具函数简化调用 实现单例模式防止消息叠加 核心技术点： 动态组件挂载与卸载 Transition过渡动画 全局方法注册 单例模式应用
TypeScript 基础入门：在 Vue/uni-app 项目中理解常见类型
最新发布
前端开发努力中！
06-17 254
TypeScript 基础类型在 Vue/uni-app 中的应用 本文介绍了 TypeScript 在 Vue/uni-app 项目中的基础类型用法，包括： 类型推断：自动推断变量类型 函数类型：参数和返回值类型约束 字面量类型：限制变量为固定值 联合类型：变量可为多种类型之一 any与unknown：处理不确定类型，unknown更安全 类型断言：强制指定类型 void与never：函数返回值类型 Vue中ref的泛型写法：明确响应式数据类型 文章通过实际代码示例，对比了不同类型的特点和使用场景，特别强
【Spring Boot + Vue + DeepSeek】从零打造一个AI驱动的智能健康分析系统
qq_55236656的博客
06-15 259
体检报告数据专业性强，普通人难以解读健康数据分散，缺乏统一的智能分析手段医患沟通效率低，专家资源分配不均IoT健康设备数据无法与管理系统打通AuraHealth正是为了解决这些问题而设计——将 DeepSeek 大模型深度融入健康管理全流程，实现从数据采集 → AI分析 → 智能预警 → 医患协作 → 健康改进的完整闭环。
websocket vue跟后台的交互
vigor(软件开发)
06-17 298
【代码】websocket vue跟后台的交互。
vue中加载svg，为指定g添加样式&事件
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
06-16 53
本文介绍了在Vue中动态加载SVG文件并实现交互功能的方法。通过封装组件，将SVG以文本方式加载，修改其属性使其自适应容器大小。文章重点讲解了如何为SVG中的特定元素（如g标签）绑定鼠标移入和点击事件，使用event.currentTarget精准获取目标元素，并实现选中状态切换效果。示例代码展示了完整的实现过程，包括SVG加载、属性修改、事件绑定以及样式处理，最终实现了一个可交互的场站地图效果。
VUE复习笔记
小方的博客
06-15 385
Vue.js 核心概念与项目结构解析 本文系统介绍了Vue.js的核心概念和项目文件结构关系，通过生动的"房屋装修"类比帮助理解： 四大文件关系： index.html：毛坯房（基础容器） main.js：搬家工人（应用入口） App.vue：硬装（根组件） 自定义组件：软装（可复用模块） Vue核心特性： 虚拟DOM提升性能 数据绑定自动更新视图 组件化开发模式 丰富的指令系统 环境搭建： 使用Vue CLI或Vite创建项目 详细说明了项目目录结构和单文件组件(.vue)的模板结构 全文通过生活化比喻和
Vue.js从零到精通系列（七）：高级特性实战——Teleport、异步组件、自定义指令与TypeScript深度结合
weixin_50971816的博客
06-13 544
本文将围绕四个核心利器展开：Teleport传送门让你把组件渲染到DOM的任意位置，彻底解决模态框、弹出层的z-index和overflow裁剪问题；异步组件与Suspense结合，实现组件的按需加载和优雅的加载中状态，让首屏渲染速度飞起；自定义指令让你直接控制底层DOM，封装常见的交互行为（如自动聚焦、点击外部关闭）；最后，我们将Vue与TypeScript深度结合，为组件Props/Emits、模板引用、依赖注入提供更严格的类型安全。
拖拽文件上传组件
dy1717的博客
06-17 47
拖拽上传文件组件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值