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

相关推荐
也无晴也无风雨26 分钟前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational2 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤5 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui