Vue基础

最新推荐文章于 2024-07-10 15:01:30 发布
最新推荐文章于 2024-07-10 15:01:30 发布
阅读量1k 收藏 24
点赞数 19
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anny0001/article/details/135004681
版权

文章目录

列表渲染

在这里插入图片描述

字典渲染

在这里插入图片描述

通过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
关注
  • 19
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
Vue基础1
01-07
基础属性 el： 表示new的vue实例所要控制的区域。 data ： 表示new的vue实例所要控制的区域。 methds: 定义vue实例中所有的可用方法。 基础标签 v-clock：解决网速慢引起的标签显示问题， 仅仅替换自己的站位符中的...
基于vue基础实现的记事本
09-24
本文将详细解析如何基于Vue基础实现一个记事本应用，重点涉及用户数据的增删操作。 首先，我们要理解Vue的核心概念：数据绑定。Vue采用的是双向数据绑定，这意味着视图层与数据模型之间可以相互影响。在创建Vue实例...
一、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的学习之class与style绑定
人生苦短
07-07 256
本节对class与style的绑定内容就学习完毕了！
vue-使用Worker实现多标签页共享一个WebSocket
qq_43548590的博客
07-08 1105
最近有一个需求，需要实现用户系统消息时时提醒功能。第一时间就是想用WebSocket进行长连接。但是前端项目点击跳转需要打开新的标签页。这个时间就会出现新的标签页打开会把老的WebSocket连接挤掉。然后就想到了去共享一个WebSocket连接。就能实现多个标签页消息共享了。
属性描述符初探——Vue实现数据劫持的基础
RenGJ010617的博客
07-05 1014
属性描述符（Property Descriptor）在JavaScript中是一个特殊的对象，它定义了对象属性的行为和特性。 属性描述符有很多内容可以挖掘，比如defineProperty与Proxy的区别，比如vue2与vue3实现数据劫持的方式有什么不同，实现效果有哪些差异等，这篇博文只是入门，以后有时间再深挖。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 419
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
ant 的Modal.confirm 关闭不了
suk_java的博客
07-05 203
ant 的Modal.confirm 关闭不了
基于 Nginx + Spring Boot + Vue + JPA 的网站安全防护指南
jinhope的博客
07-07 903
通过这些具体的安全措施，我们可以有效地提高基于 Nginx、Spring Boot、Vue 和 JPA 构建的前后端分离架构的网站系统的安全性。记住，防护措施不仅仅是技术上的配置，更是我们日常开发中的好习惯。希望这些建议对你有所帮助。接下来，我会通过更轻松的方式，带你了解几种常见的安全攻击及其应对措施。跨站脚本攻击，简称 XSS，就是攻击者在网页中注入恶意脚本，然后在用户访问页面时执行这些脚本。SQL 注入攻击是攻击者通过操控输入来执行未授权的 SQL 命令，进而访问或修改数据库中的数据。
Vue笔记12-新的组件
王劭阳的博客
07-07 327
是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态，需要结合异步依赖，才能看到效果。在Vue3中，可以没有div根标签，如果没有的话，Vue3会将多个标签包装在一个。在Vue2中，template标签内，必须有一个div标签，作为根标签。是一个内置组件，可以将一个组件内部的模板传送到该组件DOM外部的位置去。
Vue 与 OpenAI 接口交互实战：发送请求的全流程解析（一）
舜意的博客
07-07 525
这篇文章主要讲解了如何在项目中与 OpenAI 的 API 进行交互通过API的调用可以为我们的项目提供更强大的功能和交互能力相信看到这里的你一定能够有所收获的，赶紧动手将你的项目也结合AI实现智能化吧！！！
vue-tabs标签页引入其他页面
zw899004的专栏
07-06 434
vue-tabs标签页引入其他页面
vue 级联下拉框选择的思维
reembarkation的博客
07-10 98
vue 级联下拉框选择的思维
vue如何解决跨域？原理？
hexadecimal_001的博客
07-07 311
Vue 通常并不直接解决跨域问题，而是依赖于浏览器的跨域策略和后端接口的设置。跨域是指浏览器限制在一个源（origin）发起的请求去访问另一个源的资源，源指的是协议、域名和端口号的组合。
element表格高度撑开div滚动失效解决方案
betterAndBetter_的博客
07-06 169
解决：包裹表格的div，加上display: flex;描述：当显示区域小于表格列表显示内容时 列表完全撑开表格 无法触发el-table组件的滚动事件。
Vue 邮箱登录界面
m0_69886881的博客
07-05 379
将就着能用的邮箱登录界面
vue 环境变量那些事
最新发布
weixin_42028153的博客
07-10 123
env.production 代表的生产环境变量也就是上线以后使用的。.env.development 代表的开发环境变量。取：import.meta.env.VITE_变量名。取：process.env.VUE_APP_变量名。总则：使用 .env.环境名字文件去定义，运行命令的时候指定环境。vite+vue3项目（默认VITE开头，其他开头的需要配置）存：VUE_APP_变量名 = xxx。比如：.env 代表所有环境变量使用的一些变量。vue-cli项目（webpack+vue2）

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值