千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础
1.封装、继承、多态是面向对象语言的三大特征
封装： 封装是将数据和操作（方法）组合在一起形成一个单元，同时限制外部访问这个单元的方式。通过封装，我们可以隐藏数据的具体实现细节，只暴露必要的接口供其他对象使用。这样可以提高代码的可维护性和安全性。封装还鼓励了代码的模块化和解耦，使得系统更加灵活。
继承： 继承是指一个类从另一个类继承属性和方法。通过继承，我们可以创建新的类，并且这些新类可以继承父类的特性。父类通常被称为基类或超类，子类可以通过继承来扩展或修改父类的行为。继承可以节省代码，减少重复编写，并且有助于构建和维护一个类层次结构。
多态： 多态是指同一个方法可以在不同的对象上具有多种不同的行为。在多态中，一个对象可以表现出多个类型的行为。多态通过实现方法重写和方法重载来实现。方法重写是指子类重写父类的方法，以改变方法的行为。方法重载是指在同一个类中可以定义多个相同名称但参数不同的方法。多态提高了代码的可扩展性和灵活性，使得代码更容易理解和维护。
封装、继承和多态是面向对象编程的基础，它们的应用可以帮助我们编写更具有结构化、可维护和可复用性的代码。
2.路由:
作用:做页面导航,
键:{ path,component,name,redirect,alias children,components,meta....}
步骤:
1 导入 import { createRouter, createWebHashHistory } from "vue-router"
2 声明路由 const router = createRouter({
history: createWebHashHistory(),
routes: [{path, component: ()=>import() },] })
3 注册 app.use(router)
4 挖坑显示 <router-view />
5 设置a标签跳转 router-link to
重定向和别名:
语法:
routes:[{path:"路径" , name:"", component:组件名, }]
redirect:"路径" 重定向/跳转
alias:''路径别名"
多学一招：path支持通配符*
3.组合式API
传统options api语法：随着业务复杂度代码冗余，维护麻烦，可重复性不高；
解决composition api语法/组合 api语法：概括理解将data、methods、computed等代码统一放到setup中写；
4.hooks 概念：
hooks 本质是一个函数，是对 setup 中使用的 composition API 的封装
hooks 复用率高，使setup中逻辑更清晰，代码可读性强 便于后期维护
hooks：封装组合式API语法 有利于后期维护
一个use开头的文件里面导出一个函数 并且函数中有返回值 函数名推荐use开头
导入使用 普遍都用解构赋值
5.Dialog案例执行过程：
深入理解封装组件思想与组件中v-model的原理
6.组件:
什么是组件:是vue的一种开发思想.(组件化开发思想)让我们通过独立的、或可复用的组件来构建网站，从而提高代码复用性，便于后期维护.
UI组件库/框架:一堆提前封装好的，项目开发常见的公共组件.为了统一开发规范和页面布局,为了减少代码冗余，便于后期维护.
语法:(定义)app.component(组件名, {template: `放HTML代码`, // template 模板 也就是html代码
data() {return {}},methods: {},computed: {},watch: {},//...})
(调用)<组件名></组件名>
组件关系:只要被调用就是子组件,公共组件:提高代码复用.页面组件:提高代码可读性.(方便后期维护)
如何在组件中显示数据： 通过模板语法{{data中的键}}
如何在组件中使用事件： 通过事件语法@事件类型="函数名"
层级思想：只要被调用的组件 都属于当前页面的子组件（站在html结构上有父标签 子标签）。
封装思想：公共组件-增加代码复用性，逻辑/页面组件-增加代码可读性。
组件通信:不同父调用NavBar子组件所显示的内容不一样，父得传递数据给子 也就是组件通信
props(父传子):是啥：组件内部的一个语法 作用：获取组件属性值
props属性 =》会自动保存到模型中，然后视图通过 {{属性名}} 来获取显示数据
调用: <组件名 属性名="值" 或 v-bind:属性名="data中的键"></组件名>
定义:app.component(组件名, { // 核心目的获取属性数据 -> 自动注入到模型中 -> 调用
props: [属性名, ..., 属性名],或
props: {属性名: 类型, // 情况1：单类型 属性名: [类型,...,类型], // 情况2：多类型 属性名: { // 情况3：对象既可以检查类型又可以验证还有默认数等type: String,required: true,//(必须要传，不传报错)default: 100,validator: function (value) {return bool}}},template: ``,data() {},methods: {},....})
$emit(子传父): 通知（发送通知）：this.$emit("自定义事件名称", 数据,....,数据)
执行（监控通知）：@自定义事件名称="父处理函数"
单项数据流:单向数据流指在组件化思想，开发的项目中，数据由根或者父组件传递给子组件，禁止子组件中直接更改，而是由父更改后重新传递给子数据使用
组件通信其他方案:定义数据，父写provide: {数据名: 值}
使用数据子写（注：可以理解为同步模型 因此可以直接视图使用）
inject:['数据名', ...., '数据名']
组件通信:插槽slot:
默认: 步骤1：定义组件 通过<slot></slot>占位留一个口子/槽
步骤2：调用组件 留心:双标签中的内容 会自动填充到口子/槽 中
具名:步骤1：定义组件 通过<slot name="标识"></slot>占位留一个口子/槽
步骤2：调用组件 根据下述语法插入数据（留心1：如果标识不写则插入默认口子/槽 留心2：标识不能加引号
新：<template #标识>内容</template>
作用域:步骤1：定义组件 <slot name="标识" v-bind:任意名称="data模型中的键" ... ></slot> 传数据
步骤2：调用组件 通过下述语法就可以获取组件模型数据（留心：item是对象 键就是一个个任意数据
新：<template #标识="props">内容</template>
动态组件:步骤1：定义组件/页面，通过刚刚语法创建
步骤2：在页面调用显示即可 <component is="组件名"></component>
ui组件: 一堆提前封装好的，项目开发常见的公共组件
有pc elementui（饿了么）、pc iview（北京）、m vant ui（杭州有赞）、m mint ui（饿了么 等
