脚手架开发

在created中发送数据

在mounted中获取焦点  操作dom

局部注册

局部注册只能在当前组件使用 写组件-导入-注册-使用

全局注册

写组件--main.js导入--注册 全局使用

导入多个也可以使用item in xxx :key=item

滚轮加选择 多行选择

ctrl k 0 全部折起来 Ctrl k j

开发思路：

1. 分析页面 按模块拆分组件，搭架子（局部/全局注册）

2. 根据设计图 编写html和css

3. 拆分封装通用小组件（局部/全局注册）

4. 未来js动态渲染 实现功能

scoped样式只作用于当前组件

组件通信

父传子

子传父this.$emit('事件名’：)

props

可以传递任意数量/任意类型的props

prop类型校验（简单写法最常见）

props更新遵循单向数据流

小黑记事本案例

渲染功能：

1. 提供数据 -> 提供在公共的父组件 App.vue

2. 通过父传子 传递给TodoMain

3. v-for

添加功能

1. 收集表单数据 -> v-model

2. 监听事件 （回车+点击）

3. 子传父，将任务传递给父组件

4. 添加数据unshift (自己的数据自己出处理)

删除功能

1. 监听点击事件 删除 携带id

2. 子传父，传删除的id

3. 父组件 删除 自己的数据自己处理

底部合计：父传子 渲染

清空功能 子传父 通知父组件 -> 父组件清空

持久化存储-> watch深度监听list的变化->存本地->进页面优先读取

event bus事件总线

对同一事件监听的组件都可以获取到消息

provide reject

不同层组件通信

封装表单组件

应用于输入框 v-model==>:value+@input

v-model="msg1" 等价于 :value="msg1" @input="msg1 = $event.target.value"

① 数据变，视图跟着变 :value

② 视图变，数据跟着变 @input

$event获取事件中的形参 子组件的e.target.value给父组件$event

子组件 BaseSelect 在下拉框值变化时通过 this.$emit('changeId', e.target.value) 向父组件发送选中的城市 ID，父组件通过 @changeId="selectId=$event" 接收并更新 selectId 数据。

封装表单组件 简化版

.sync

自定义v-model不用动要传value

:visible.sync=>:visible + @update:visible

ref和$refs

ref $refs 获取的dom元素/或者组件实例  (当前组件范围内）

ref=“xxx” this.$refs.xxx

nextTick（函数体）

vue异步渲染dom

dom更新完做某件事使用nextTick（函数体）

//1.显示输入框
this.isShowEdit = true
  // 2.输入框获取焦点
  // console.log(this.$refs.inp)  undefined
  this.$nextTick(() => {
   this.$refs.inp.focus()
      })

自定义指令

全局注册

局部注册

指令的值 v-指令名=“指令值”

通过binding.value 可以拿到指令的值；update钩子监听变化实现dom更

封装v-loading

插槽solt

1、组件内slot占位 2.使用组件时传入具体标签内容插入

插槽-后备内容（默认值）

solt标签里面填写内容 使用组件但没传标签或内容就先显示后背内容 若组件内有内容则被覆盖

具名插槽 定向分发

作用域插槽

mytag组件封装案例

1.自动聚焦两种方法

失去焦点 隐藏输入框

回显标签信息

 父组件传递过来的

 v-model实现功能（简化代码） ：value+@input

 组件内部通过props接受 ：value设置给输入框

回车修改标签信息

 内容修改了 回车 提交标签信息  

 @keyup.enter 触发事件$emit('input',e.target.value)

my-table表格组件的封装案例

* 1.数据不能写死 动态渲染  props 父传子 v-for

* 2.结构不能写死，具名插槽

* 3.表头支持自定义；主体不能写死

还是具名插槽

子组件my-table的数据从父组件传过去 故用自定义插槽传递属性：item和：index给父组件

my-tag 本来用的  <MyTag v-model="tempText"></MyTag>
从父组件到子组件tag 但现在 tag 在table里面 table又回到了父组件 故用table自定义插槽传过来的item的  item又是父组件传递的data里面的item项

父组件 → 子组件（MyTable）传数据 → MyTable 通过作用域插槽将数据项 item 回传给父组件 → 父组件中使用 MyTag 并绑定 item.tag，实现每个商品的独立标签编辑功能。

路由

1. 下载 233 344 yarn add vue-router@3.6.5  

2. 引入

3. 安装注册

4. 创建路由对象

5. 注入，将路由对象注入到new Vue 实例中，建立关联

1. 建组件 导入 配规则

2. 准备导航链接。配置路由出口（匹配的组件展示的位置）

组件存在目录问题（组件分类）

页面组件、复用组件 都是.vue文件

src/views文件夹 页面组件   页面展示 配合路由使用

src/components 复用组件  展示数据 复用

路由模块封装

rooter-link 取代a标签  

to必须写 to无需# 声明式导航 导航链接

<!-- <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a> -->
      <!-- rooter-link 取代a标签  to必须写 to无需# 能高亮 -->
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
      能高亮    .footer_wrap a.router-link-active {
  background-color: purple;
}

两个类名：

router-link-active 模糊匹配  to='/my' 可以匹配 /my /my/a ....

router-link-exact-active 精准匹配 只能匹配 /my

定制这两个类名

跳转传参

1.查询参数传参（适合多个参数）

路由path正常配置

to="/path?参数名=值&参数名2=值"

$route.query.参数名</span></p><p class="ne-p" style="margin-top: 0px; margin-bottom: 0px; padding: 0px; min-height: 24px;"><img src="https://cdn.nlark.com/yuque/0/2025/png/43139252/1751286369084-b533d145-5f9d-47ff-8d83-cfbac9ab8e77.png" width="928.5" title="" id="udd2a9fde" class="ne-image"/></p><h5 style="font-size: 15px; line-height: 24px; margin: 8px 0 5px 0"><span class="ne-text">2.动态路由传参（简介优雅 适合传单个参数）</span></h5><p class="ne-p" style="margin-top: 0px; margin-bottom: 0px; padding: 0px; min-height: 24px;"><span class="ne-text">path:&quot;/path/:参数名&quot; </span></p><p class="ne-p" style="margin-top: 0px; margin-bottom: 0px; padding: 0px; min-height: 24px;"><span class="ne-text">to=&quot;/path/参数值&quot;</span></p><p class="ne-p" style="margin-top: 0px; margin-bottom: 0px; padding: 0px; min-height: 24px;"><span class="ne-text">$route.params.参数名

2*动态路由参数可选符

http://localhost:8080/#/search白屏  未匹配到组件显示空表

/search/:words 表示必须要传参数 。如果不传参数也希望匹配。可以加个可选符 ？

path: '/search:key?   不传参数也可以匹配/search 就不会空白

Vue路由 - 重定向

url路径是/路径 未匹配任何组件，会出现空白

重定向 匹配到path 强制跳转

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },        //重定向
    { path: '/home', component: Home },
    { path: '/search:key?', component: Search },
  ],
})

Vue路由-404

路由配置最后

路由规则 从上往下匹配

前面都匹配不上 匹配最后一个

{ path: '', component: NotFound },

Vue路由—模式设置

• hash路由（默认） 例如：http://localhost:8080/#/home

• history路由（常用） 例如： http://localhost:8080/home (以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题) NGINX：location / { try_files $uri $uri/ /index.html; # 核心规则 }

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/search:key?', component: Search },
    { path: '*', component: NotFound },
  ],
  mode: 'history',
})

编程式导航两种路由跳转方式

通过path路径的传参方式

      this.$router.push('路由路径')
      this.$router.push("/search");
      this.$router.push({
        path: "路由路径",
      });
      this.$router.push({
        path: "search",
      });

name命名路由跳转（path路径长）

编程式导航-路由传参

path路径的传参

query传参 简写-完整

动态路由传参 简写-完整

name命名路由跳转

query传参

动态路由传参

路由案例 面经基础版

• 一级路由 Layout+ArticleDetail

• 二级路由Article Collect Like User

• 请求渲染->跳转传参->组件缓存

嵌套路由

要在一级路由的组件内配置导航出口

实现功能

Article->ArticleDetail

查询参数传参

（更适合多个参数传参）

动态路由传参 （单个参数）

渲染页面

首页空白 重定向处理 redirect: '/article',

返回上一页$router.back()

<nav class="nav"><span
        @click="$router.back()"
        class="back"
      >&lt;</span>

发请求需要时间，点击文章详细后有短暂空白

给ArticleDetailPage加一个v-if=“Article.id” 请求到再渲染

组件缓存 keep-alive

包裹动态组件，缓存不活动的组件实例，而不是销毁他们

抽象组件，自身不会渲染成dom元素，也不会出现在父组件链中

优点：切出去的组件保存在内存中，防止重复渲染dom

减少加载时间及性能消耗，提高用户体验性

问题：所有包裹的都被缓存了，导致数据异常

解决：三个属性

include 组件名数组 匹配的被缓存 优先使用 精确 性能好

exclude 组件名数组 匹配的不背缓存  max 最多可以缓存多少组件实例 性能不好 exclude和max两个配合使用

只希望Layout被缓存 incloud 配置  :incloude="组件名数组"

组件名是Name的属性值，没有配置name属性名才会使用文件名

被缓存组件(LayoutPage)会多两个生命周期

actived 激活时 组件被看见才会触发

deactived失活时 离开组件看不见不会触发

可以在activated(){} 里面放回到首页提示

补充 eslint

规则表 https://zh-hans.eslint.org/docs/latest/rules/

// 当保存的时候，eslint自动帮我们修复错误 
"editor.codeActionsOnSave": { "source.fixAll": true }, 
// 保存代码，不自动格式化 
"editor.formatOnSave": false

<br/>