Vue基础

  • 开发
  • 34

文章目录

列表渲染

在这里插入图片描述

字典渲染

在这里插入图片描述

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

阅读全部

相关推荐

  1. vue 基础

    2023-12-17 19:32:01       34 阅读
  2. <span style='color:red;'>Vue</span><span style='color:red;'>基础</span>

    Vue基础

    2023-12-17 19:32:01      35 阅读

  3. vue基础

    2023-12-17 19:32:01       37 阅读
  4. <span style='color:red;'>VUE</span><span style='color:red;'>基础</span>

    VUE基础

    2023-12-17 19:32:01      20 阅读
  5. <span style='color:red;'>vue</span><span style='color:red;'>基础</span>

    vue基础

    2023-12-17 19:32:01      7 阅读
  6. <span style='color:red;'>Vue</span><span style='color:red;'>基础</span>

    Vue基础

    2023-12-17 19:32:01      6 阅读

最近更新

  4. TCP协议是安全的吗?

    2023-12-17 19:32:01       18 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2023-12-17 19:32:01       19 阅读

  13. 【Python教程】压缩PDF文件大小

    2023-12-17 19:32:01       19 阅读

  18. 通过文章id递归查询所有评论（xml）

    2023-12-17 19:32:01       20 阅读

热门阅读

  2. 浅谈Web Component

    2023-12-17 19:32:01       32 阅读

  3. 【数据库设计和SQL基础语法】--查询数据--分组查询

    2023-12-17 19:32:01       34 阅读

  4. 【Linux应用编程笔记】GPIO

    2023-12-17 19:32:01       33 阅读

  5. 网线制作方法及注意事项

    2023-12-17 19:32:01       39 阅读

  12. vue 中 watch 、computed、 watchEffect 区别

    2023-12-17 19:32:01       39 阅读

  18. 如何看待【前端】已死论？

    2023-12-17 19:32:01       37 阅读

  19. 线程Thread源代码思想学习1

    2023-12-17 19:32:01       36 阅读

  20. mysql查询-DQL查询语法-执行顺序--黑马程序员笔记

    2023-12-17 19:32:01       30 阅读

  22. 【Linux】项目自动化构建工具 - make/Makefile

    2023-12-17 19:32:01       40 阅读

  24. 详解物理机OpenStack连接外部网络网卡配置管理（适用虚拟机）

    2023-12-17 19:32:01       39 阅读

  25. PAT乙级1017 A除以B

    2023-12-17 19:32:01       41 阅读

  26. 日常学习之：前端传到后端的文件直接上传 chrome cloud 的存储桶（bucket）

    2023-12-17 19:32:01       44 阅读

  27. python310_d.lib导致无法解析的外部符号的异常

    2023-12-17 19:32:01       59 阅读

  28. Python iterable(可迭代)和iterator(迭代器)底层源码剖析，简称【迭代器圣经】

    2023-12-17 19:32:01       32 阅读

  29. weston 1: 编译与运行傻瓜教程（补充）

    2023-12-17 19:32:01       33 阅读