MoonbeamsC

摘要： Vue3新组件 8.1. 【Teleport】 什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。 <teleport to='body' > <div class="modal" v-show="isShow"> <h2>我是一个弹窗</h2> 阅读全文

摘要： 其它 API 7.1.【shallowRef 与 shallowReactive 】 shallowRef 作用：创建一个响应式数据，但只对顶层属性进行响应式处理。 用法： let myVar = shallowRef(initialValue); 特点：只跟踪引用值的变化，不关心值内部的属性变化。 阅读全文

摘要： 6.9. 【slot】 1. 默认插槽 父组件中： <Category title="今日热门游戏"> <ul> <li v-for="g in games" :key="g.id">{{ g.name }}</li> </ul> </Category> 子组件中： <template> <div 阅读全文

摘要： 4.6. 【命名路由】 作用：可以简化路由跳转及传参（后面就讲）。 给路由规则命名： routes:[ { name:'zhuye', path:'/home', component:Home }, { name:'xinwen', path:'/news', component:News, }, 阅读全文

摘要： 4.2. 【基本切换效果】 Vue3中要使用vue-router的最新版本，目前是4版本。 路由配置文件代码如下： import {createRouter,createWebHistory} from 'vue-router' import Home from '@/pages/Home.vue' 阅读全文

摘要： 【自定义hook】 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。 自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。 示例代码： useSum.ts中内容如下： import {ref,on 阅读全文

摘要： 【生命周期】 概念：Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子 规律： 生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。 Vu 阅读全文

摘要： 【标签的 ref 属性】 作用：用于注册模板引用。 用在普通DOM标签上，获取的是DOM节点。 用在组件标签上，获取的是组件实例对象。 用在普通DOM标签上： <template> <div class="person"> <h1 ref="title1">尚硅谷</h1> <h2 ref="tit 阅读全文

摘要： 【watch】 作用：监视数据的变化（和Vue2中的watch作用一致） 特点：Vue3中的watch只能监视以下四种数据： ref定义的数据。 reactive定义的数据。 函数返回一个值（getter函数）。 一个包含上述内容的数组。 我们在Vue3中使用watch的时候，通常会遇到以下几种情况 阅读全文

摘要： 【toRefs 与 toRef】 作用：将一个响应式对象中的每一个属性，转换为ref对象。 备注：toRefs与toRef功能一致，但toRefs可以批量转换。 语法如下： 点击查看代码 <template> <div class="person"> <h2>姓名：{{person.name}}</ 阅读全文