Vue基础

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

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

列表渲染

在这里插入图片描述

字典渲染

在这里插入图片描述

通过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 基础入门
我的的博客哦
05-17 2万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
VUE基础知识
m0_60027772的博客
07-16 2583
vue框架是一个轻量级，渐进式的前端框架。
vue基础教程
shiyzhang
07-24 3051
vue基础教程，带你走进vue
Vue 基础
qq_40132294的博客
05-17 2951
1.<span title="xxxx"></span>标签： 当被span标签包裹时，前端将鼠标放在控件上就能显示出其title属性： 2.v-bind: 将数据绑定为属性值；{{truth}}将数据插入展示。可以缩写为： v-xxx开头的叫Vue指令 效果： 3. v-if：条件判断控制，每次都会重新删除和创建元素（开销较大） v-if=true 效果： v-if=fal......
vue基础知识汇总
yuandawang的博客
01-06 5980
vue基础知识汇总
Vue基础知识测试
简单点的博客
10-18 7937
Vue基础知识测试
vue基础笔试题
qq_51066068的博客
07-01 1万+
ctions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。...............
vue基础
什么都干的派森
05-21 4100
目录 1.子组件props初始化方式 1.子组件props初始化方式 props: { // 单类型 propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Obj
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
Vue基础培训案例笔记素材等全套课程课件资料.zip
05-04
在"01 vue基础"部分，你将学习到以下关键知识点： 1. **安装Vue**: 通过npm (Node Package Manager) 或者 CDN 链接来引入Vue.js到你的项目中。这一步是所有Vue项目的起点。 2. **Vue实例**: 创建Vue实例是使用Vue...
Vue 中局部指令（directives）的用法详解
jingling555的博客
04-28 386
局部指令适合封装特定组件的功能，而全局指令则更适合应用于整个应用的通用功能。
Vue2、Vue3区别之响应式原理
2203_75479159的博客
04-27 1268
工作原理：通过遍历数据对象的每个属性，使用Object.defineProperty来定义getter和setter。当数据被访问时，收集依赖；当数据变化时，触发更新。但这种方法有一些限制，比如无法检测到对象属性的添加或删除，需要借助Vue.set或Vue.delete方法。对于数组，Vue 2需要重写数组的方法（如push、pop等）来触发更新，而不能直接通过索引设置元素或修改长度。实现步骤：Object.defineProperty()语法 代码示例： 2. 局限性 无法检测动态属性： 解
el-form嵌套el-row、el-col，布局会错乱？
m0_56104994的博客
04-28 192
1.在el-form里使用el-row和el-col，有时候布局正常，有时候不正常。2.原因：el-row里el-col加起来不超过24。再开一个el-row。
vue 实现文件流下载功能 前端实现文件流下载
最新发布
weixin_41346436的博客
04-29 63
【代码】vue 实现文件流下载功能 前端实现文件流下载。
第二十节：编码实操题-实现图片懒加载指令
qq_40860137的博客
04-28 393
实现图片懒加载指令
Vue基础视频教程全面解析
1. 文件名称中的“1.Vue基础视频教程.zip”暗示了这是一系列以压缩包格式打包的视频教程文件，专为初学者设计，用于学习Vue.js的基本概念和技术。 2. 关键词“Vue基础”表明教程内容将覆盖Vue.js框架的基本原理和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值