Vue基础

2023-12-15 17:25:41

文章目录

列表渲染

在这里插入图片描述

字典渲染

在这里插入图片描述

通过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图标

文章来源:https://blog.csdn.net/anny0001/article/details/135004681
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。