创建 挂载 更新 销毁

动态控制类名

sum累加器 等于上一次返回的结果 item当前正在处理的元素 

和data中的数据双向绑定

重新渲染  封装

、

局部注册和全局注册

全局注册（适用于通用的）

组件通信

保证每个组件实例 都能维护自己的数据

组件通信  父子通信

props                    在组件标签中加自定义属性   组件上注册的一些自定义属性

props校验  为组件prop指定验证要求  不能直接改

1.类型校验

是否必填 required:true

default:默认值

自定义校验

validator(){

return false//没有通过校验

return true //通过校验

}

父传子    公共的数据给父

子传父  利用$emit 通知父组件

非父子通信（拓展）  event bus 事件总线

1.先创建一个都能访问 到的事件总线(空vue实例) 

非父子通信(跨层级通信)                 provide&inject

简单类型是非响应式的，复杂类型是响应式的

表单类组件封装

value是选择的值  change是下拉

this.$nextTIck(()=>{

this.$refs.inp.focus()

})

自定义指令 封装一些dom操作

v-loading

默认插槽:  1.组件内需要定制的结构部分,改用<slot></slot>占位    2.使用组件时  标签内部的会传入结构内替换slot

 在使用组件时，在组件内部填入内容

 在slot标签内部放内容 就是默认的内容

具名插槽:一个组件内有多处，需要外部传入标签,进行定制

多个slot使用name属性进行区分名字 

在使用组件标签时 使用template配合v-slot:name 来分发对应的标签  用template包裹起来

 v-slot:可以简化为#

定制->插槽

作用域插槽:定义slot插槽的同时,可以进行传值,  给插槽上可以绑定数据,将来使用组件时可以用

 

在slot中写要传递的数据 会被收集到一个对象中

使用插槽时 ,templae 中 接收     #插槽名="obj"  默认插槽名是defalut

双击事件

model->value值 input事件

e是触发事件源

单页应用程序:所以功能在一个页面中‘

路由:  路径和组件的映射关系   vuerouter插件 5+2   2 3 3   3 4  4

 下载 引入 注册 创建路由对象  注入

 组件存放目录问题(组件分类)

页面组件-页面展示-配合路由使用  views   大

复用组件-展示数据-常用于服用  components   小

路由的封装抽离

router-link代替a

默认提供高亮类名

router-link-exact-active router-link-active(模糊匹配用的多)

定制类名

声明式导航 跳转传参(在跳转路由时，进行传参)   查询参数传参   动态路由传参

模版中可以省略this

、

动态路由传参

  都可以匹配

路由重定向

{path:匹配路径 redirect:重定向到的路径}

404

路由模式设置

编程式导航  点击按钮跳转如何实现 path  name

命名路由  适用于层级多的

编程式路由   路由传参                juqey 动态params

、

words是参数

npm install less-loader vue-router --save-dev

npm install axios

静态的多个 动态的留一个结构即可

组件缓存  keep-alive

路由跳转后，组件重新加载，数据 重新加载

利用keep-alive将组件缓存下来

keep-alive是vue的内置逐渐 会缓存不活动的组件实例 

被缓存的组件多两个生命周期  actived  激活时

                                                deactived 是活时

明确vuex是什么  响应式  操作简洁

vuex是一个vue的状态管理工具,状态就是数据

vuex是一个插件，可以帮助我们管理vue通用的数据(多组件共享的数据)

某个状态在很多个组件中来使用

多个组件共同委会一份数据

1.安装vuex

2.引入

3.插件安装

4.创建空仓库

5.导出

6.挂载

任意组件都可以访问到store仓库

state 给仓库提供数据 是使用组件共享的

使用数据 通过this.$store.state.xxx

mapState辅助函数，可以把store中的数据自动映射到组件的计算属性中去

import {mapState} from 'vuex'

第一步导入  第二部写计算属性             ...mapState([需要映射的属性])   然后可以直接用的

修改数据            vuex遵循单向数据流,组件中不能直接修改仓库的数据

把要修改的数据提交给仓库  让仓库去改

1.定义mustation对象              2.组件中提交调用mutations

mutations传参   

双向联动

mapMusttion可以把mutation中的方法提取出来 映射到组件的methods中

action       处理异步操作

context是上下文(store)

getters 类似与计算属性

 yarn global add json-server

npm i json-server -g

state中的数据修改必须结果mutation

后台变了

vant-ui       vue的组件库

vw适配

先配一级路由 再配二级路由

在Vue.js中，$router 就是指代路由器对象的一个实例。这个实例包含了路由器的所有功能和方法，可以用来进行路由的导航、参数传递、路由监听等操作。通常情况下，我们可以通过在Vue组件中访问$router属性来使用这个路由器对象。

例如，我们可以通过$router.push()方法来实现页面的跳转，通过$router.go()方法来实现页面的前进或后退，以及通过$router.replace()方法来实现页面的替换等操作。

总之，$router 是一个在Vue.js中常用的对象，用于管理和操作路由，是实现页面导航和路由控制的关键之一。

vuex持久化处理

在统一每次请求后台时,添加loading效果

Toast默认是单例模式，后面的TOoast调用了,会将前一个Toast效果覆盖

同时只能存在一个Toast  可配置多个  可屏蔽无效的提交

页面访问拦截   全局前置守卫   所有路由一旦被匹配到，才会真正的解析渲染组件,才能看到页面内容

解构

pageData是data中的数据

created返回回来的数据用data去接收

看控制台的报错信息去改错

点击搜索 添加历史 点击搜索按钮或地下历史记录都能进行搜索 若之前没有相同搜索关键字，则直接追加到最前面 若之前已有相同搜索关键字,将该原有关键字移除，再追加

不是默认导出的要用 {}

默认导出通常用于导出模块中的单个功能、对象或者类。当一个模块只需要导出一个主要功能时，通常会使用默认导出。

v-model 是 Vue.js 中用来实现双向数据绑定的指令，它是 Vue 的一项核心功能。使用 v-model 可以将表单输入元素和 Vue 实例中的数据进行绑定，实现数据的双向同步。

v-model 的简写形式是将 :value 和 @input 结合起来使用，其中 :value 绑定了输入框的值，@input 监听了输入框的输入事件。这种方式手动实现了单向数据流，从输入框到数据的更新。举个例子，如果你有一个输入框，你可以这样使用简写形式实现双向绑定：

Copy Code

<input :value="myValue" @input="myValue = $event.target.value">

这样，当用户在输入框中输入内容时，myValue 的值会自动更新为输入框的值，而当 myValue 的值改变时，输入框中的值也会随之更新。这就是 v-model 的简写形式所实现的双向数据绑定的效果。

$event 代表了子组件中输入框的输入事件对象

commit 方法是 Vuex 中用于触发 mutations 的函数之一。在 Vuex 中，mutations 是用于修改状态的同步函数，而 commit 方法则是用于触发这些 mutations 的方式之一。

先本地修改 再同步到后台

vue3

创建一个vue应用  npm init vue@latest 

加上setup就允许在script中直接编写组合式api  局部组件不用注册

setup函数中 获取不到this

this依赖于当前的环境

数据和函数需要在setup最后return，才能在模版中应用

this执行undifined不用了

reactive

reactive 接收一个对象类型的数据,返回一个响应式的对象

简单类型响应式 ref  接收一个简单类型或者对象类型的数据传入并返回一个响应式的对象

在脚本中访问数据 需要通过.value 

在template中 .value不需要加

watch  侦听一个或者多个数据的变化 数据变化时执行回调函数

immediate（立即执行）deept（深度监听）

监听某一个属性的变化

beforeCreate 和 created的相关代码 一律放在setup中执行  直接写

对于props中传递过来的数据 模版中可以直接使用

emit

//模版应用 可以获取dom 也可以获取组件

// 调用 ref函数，生成一个ref对象

// 通过ref标识，进行绑定

//通过ref对象。value即可以访问到绑定的元素

默认情况下在 <script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的,

可以通过defineExpose编译宏指定哪些属性和方法允许访问

跨层组件通信  provide inject

   k-v

跨层级传递函数 给子孙后代传递可以修改数据的方法

pinia是vue的最新的状态管理工具 是vuex的替代品

vuex中action不能修改state

pinia持久化插件

提交做代码检查

el-row 表示一行 且分成24份

el-col

  失焦时校验

 实时

validator:(rule,value,callback)

rule:当前校验规则相关信息

value: 所校验的表单元素目前的表单值

callback 回调 =>callback() 校验成功  =>callback(new Error(错误信息)) 校验失败

注册之前的预校验

路由前置守卫

/绝对     五相对 直接是拼接

垂直居中align-items: center;

defineProps({

  title: {

    required: true

  }

})

暴露方法

validate

将 id 参数写在 params 中是一种常见的做法，特别是对于 HTTP DELETE 请求。

HTTP DELETE 请求通常用于删除资源，而资源的标识通常是通过 URL 中的路径参数传递的，而不是通过请求体（body）传递。在 RESTful API 中，资源的标识应该体现在 URL 中，而不是请求体中。

因此，将 id 参数作为路径参数传递，可以让请求更符合 RESTful 设计风格，也更容易理解和阅读。将 id 参数放在 params 中，Axios 或者其他 HTTP 请求库会自动将其编码到 URL 中，从而形成类似于 /my/cate/del?id=xxx 这样的请求，符合 HTTP DELETE 请求的标准。

另外，对于 DELETE 请求，通常不会有请求体，因为请求体主要用于传递实体信息，而在删除操作中，通常只需要资源的标识，不需要传递实体信息。因此，将 id 参数放在 URL 中的 params 中更符合 DELETE 请求的语义和惯例。

value通常给的是id值