Vue2(二)

2023-07-01

脚手架开发

在created中发送数据

在mounted中获取焦点操作dom

局部注册

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

全局注册

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

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

滚轮加选择多行选择

ctrl k 0 全部折起来 Ctrl k j

开发思路：

分析页面按模块拆分组件，搭架子（局部/全局注册）
根据设计图编写html和css
拆分封装通用小组件（局部/全局注册）
未来js动态渲染实现功能

scoped样式只作用于当前组件

组件通信

父传子

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

props

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

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

props更新遵循单向数据流

小黑记事本案例

渲染功能：

提供数据 -> 提供在公共的父组件 App.vue
通过父传子传递给TodoMain
v-for

添加功能

收集表单数据 -> v-model
监听事件（回车+点击）
子传父，将任务传递给父组件
添加数据unshift (自己的数据自己出处理)

删除功能

监听点击事件删除携带id
子传父，传删除的id
父组件删除自己的数据自己处理

底部合计：父传子渲染

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

持久化存储-> 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，实现每个商品的独立标签编辑功能。

路由

下载 233 344 yarn add vue-router@3.6.5
引入
安装注册
创建路由对象
注入，将路由对象注入到new Vue 实例中，建立关联

建组件导入配规则
准备导航链接。配置路由出口（匹配的组件展示的位置）

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

页面组件、复用组件都是.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.参数名<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"/><h5 style="font-size: 15px; line-height: 24px; margin: 8px 0 5px 0">2.动态路由传参（简介优雅适合传单个参数）</h5>path:"/path/:参数名" to="/path/参数值"$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

Vue2(二)

脚手架开发

局部注册

全局注册

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

scoped样式只作用于当前组件

组件通信

父传子

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

props

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

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

props更新遵循单向数据流

小黑记事本案例

渲染功能：

添加功能

删除功能

底部合计：父传子 渲染

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

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

event bus事件总线

provide reject

封装表单组件

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

封装表单组件 简化版

.sync

ref和$refs

nextTick（函数体）

自定义指令

全局注册

局部注册

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

封装v-loading

插槽solt

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

具名插槽 定向分发

作用域插槽

mytag组件封装案例

1.自动聚焦两种方法

回显标签信息

回车修改标签信息

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

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

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

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

路由

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

路由模块封装

rooter-link 取代a标签

两个类名：

跳转传参

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

2*动态路由参数可选符

Vue路由 - 重定向

Vue路由-404

Vue路由—模式设置

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

通过path路径的传参方式

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

编程式导航-路由传参

path路径的传参

name命名路由跳转

路由案例 面经基础版

嵌套路由

实现功能

查询参数传参

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

渲染页面

组件缓存 keep-alive

补充 eslint

已有 2 条评论

底部合计：父传子渲染

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

封装表单组件简化版

具名插槽定向分发

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

路由案例面经基础版

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