Superman_H的博客

# 默认插槽插槽可以让父组件给子组件传递模板片段1. 在父组件中，在组件内编写模板片段传递给子组件2. 在子组件中，编写 `slot` 元素，指定模板片段输出的位置- 插槽内容可以访问到父组件的数据，但无法访问到子组件的数据。因为插槽本身是在父组件模板中定义的- 可以在子组件的 `slot` 标签内设置插槽的默认内容。当父组件没有提供任何插槽内容时，子组件会渲染默认内容```html

# 模版引用`ref` 用于注册元素或子组件的引用在组合式 API 中，引用将存储在与名字一样的 `ref` 里```html helloimport { ref, onMounted } from 'vue';const myDom = ref();onMounted(() => { console.log('myDom', myDo

# Vue2 写法用于祖先组件给后代组件传递数据：① 在祖先组件中配置 `provide`，指定需要传递的数据（`provide` 用法类比 `data`）② 在后代组件中配置 `inject`，并接收数据（`inject` 用法类比 `props`）- `provide` 有两种写法： 对象式写法：只能传递静态信息，不能获取 `this` 函数式写法：可以获取并传递 `this` 的信息，`this` 指向当前组件实例- `provide` 会被代理成 `_provi

# 双向绑定 v-model- `v-model:value="值"` 可简写为 `v-model="值"`，用于**双向绑定** \[表单元素] 的信息- 双向绑定：表单元素的 `value` attribute 的值 ↔ data 中对应的值- 本质上，v-model 是由 v-bind 配合 input 事件实现的 ① v-bind 绑定 value 属性、② 在 input 事件的回调函数中更新 value 的值## 文本 input [text]`

# computed- 在组合式 API 中，计算属性 computed 是一个函数1. 完整写法 - 接收一个 [配置对象] 作为参数：`computed( { get(){ return X }, set(val){ } } )` 配置对象有 2 个配置项：getter、setter； getter：获取当前计算属性时触发；返回一个 ref 对象； setter：修改当前计算属性时触发；新值会作为参数传入； computed 会自动追踪响应

# [**【Vue3】响应性数据_1**](https://blog.csdn.net/Superman_H/article/details/122951571?csdn_share_tail=%7B%22type%22:%22blog%22,%22rType%22:%22article%22,%22rId%22:%22122951571%22,%22source%22:%22Superman_H%22%7D&ctrtid=Qa1d8)# `readonly` & `sh

// 使用 customRef(track、trigger) 自定义 ref 方法 return customRef((track , trigger) => {// 回调函数返回一个对象 return {track();// 返回数据之前 调用 track - 追踪数据变化 return value;// 返回显示的数据 } , // setter set(newValue) {// 修改数据 trigger();// 修改完数据后 调用 trigger - 更新模板 } , }...

Teleport用于将组件的 HTML 结构移动到指定位置用法：① 用 Teleport 标签将需要移动的 HTML 结构包裹住② 设置 属性，属性值为 ，以指定移动到的位置默认情况下，子组件的 HTML 结构会显示到父组件的 HTML 结构里面；使用 Teleport 标签包裹子组件的 HTML 标签，则能将该 HTML 结构显示到指定的位置Suspense等待异步组件时，渲染一些额外的内容，提升用户体验感用法：① 在父组件中，异步引入组件：defineAsyncCompon

setup 是一个方法，组件中所用到的 [数据]、[方法] 均要配置到 setup 中返回 [对象]：对象中的 [属性]、[方法] 均可在模板中直接使用返回 [渲染函数]：可自定义渲染内容（了解）注意事项Vue3 兼容 Vue2 的语法，但不推荐混着使用在 Vue2 配置 (data、methods、computed…) 中，可以获取 Vue3 (setup) 中的数据 (属性、方法)但在 Vue3 配置 (setup) 中，无法获取 Vue2 (data、methods、computed…)

# 创建 Vue3 工程> #### ① 使用 vue-cli 创建1. `vue -V` / `vue --version` 查看 @vue/cli 版本，确保在 4.5.0 以上2. `npm i -g @vue/cli` 安装最新的 @vue/cli3. `vue create vue_test` 创建项目4. `cd vue_test` 进入工程目录5. `npm run serve` 启动项目> #### ② 使用 vite 创建- vite - 新一代的前端构建工具 .

# Axios 简介Axios 是一个基于 promise 的网络请求库，可作用于 node.js 和浏览器中> #### 特性1. 支持 Promise API2. 客户端支持防御 XSRF - Cross-site request forgery - 跨站请求伪造3. 在服务端，它基于 node.js 的 `http` 模块；而在客户端 (浏览器)，则基于 `XMLHttpRequests`> #### 使用1. node：下载 axios 并导入 `npm i axios`

# 路由的概念**SPA：**- SPA (Single Page Application，单页面应用)，整个应用只有一个完整的页面，所有组件的展示、隐藏都在这一个页面中完成。- **不同组件之间的切换**需要通过**前端路由**来实现，数据需要通过 Ajax 获取。- 缺点：1. 首屏加载速度较慢、 2. 不利于 SEO。对应的优化方法：1. 路由懒加载、代码压缩、CDN 加速、网络传输压缩、 2. SSR 服务器端渲染。**路由：**1. 后端路由：**请求方

# Vuex 简介Vuex 是官方提供的一个插件，用于集中式管理组件共用的数据。使用 Vuex 后，任何组件之间都可以进行通信。Vuex 的数据存储是响应式的，当组件从 store 中获取并改变数据时，模版会被重新渲染。1. State (状态)：用于存储数据。存储的数据供 Vue Components 使用

# transition 标签- transition 标签：Vue 内置的动画标签- 作用：在 [插入] / [更新] / [移除] DOM 元素时，在合适的时候给元素添加样式类名（配合 CSS 样式使用，实现动画效果）**注意事项：**- transition 标签只能包含 **1 个** 元素；如果里面写了多个元素，则只生效第一个- transition 包裹的标签需要设置 `v-show` / `v-if` 属性控制元素的显示**动画 CS

# 全局事件总线- 事件总线可实现任意组件之间的数据传输- 条件：① 所有组件都能访问、② 身上有 `$on` `$off` `$emit` 方法 方法：① 设置在 Vue.prototype 上、② 值为 Vue 实例- **全局事件总线的本质，其实就是自定义事件**1. 修改入口文件 main.js：创建全局事件总线 $Bus `Vue.prototype.$Bus = this````jsimport Vue from 'vue';import App

# 自定义事件自定义事件，用于实现子组件到父组件的数据传递1. 在父组件中，给子组件标签元素设置**自定义事件** `` 【监听事件函数】2. 在子组件中，通过 `[this.]$emit("事件名", 数据)` 触发自定义事件，并传递数据 传递多个 `数据` 时，用 `,` 隔开 【触发事件函数、传数据】3. **销毁当前子组件的自定义事件：**（在子组件中调用） 【关闭事件】 单个自定义事件：`[this.]$off("事件名")` - 直

在子组件中 修改父组件传递过来的数据：控制台抛出警告、子组件的数据可以被成功修改、重新渲染子组件参与子组件数据显示的方法 ，在页面完成时被调用一次；子组件修改数据后，重新渲染子组件，被调用一次此时我们再在父组件中修改原数据，则子组件的数据也会被修改，就是说，子组件之前修改的数据会被覆盖参与页面数据显示的方法 、，在页面完成时依次被调用一次；父组件修改数据后，页面重新渲染，再依次被调用一次此时，子组件渲染的是 data 中的数据 更新子组件 data 中的数据，子组件会被重新渲染、 被调用更新父组件

# 混入 (混合)- 用于代码的复用，分为：局部混合 & 全局混合- 一个 [混入对象] 可以包含任意组件选项- 当组件使用 [混入对象] 时，所有 [混入对象] 的选项将被 “混合” 进入该组件本身的选项## 局部混合> #### 第一步：定义 js 文件- 创建 mixin 文件夹、创建 index.js 文件；在 JS 文件中，定义需要复用的数据，并暴露出去```jsexport const mixMethods = { methods: {

# 模块 & 组件1. 模块：向外提供特定功能的 JS 程序，一般就是一个 JS 文件 因为 JS 文件很多很复杂，这样做可以复用 JS 代码、简化 JS 的编写、提高 JS 的运行效率2. 组件：用来实现局部功能效果的代码集合 ( HTML / CSS / JS / images... ) 因为一个界面的功能很复杂，这样做可以复用代码、简化项目结构、提高运行效率# 组件的使用- 组件是可复用的 Vue 实例，可配置 `data`、`methods`、`com

# 脚手架- 脚手架 Vue CLI：用于快速生成 Vue 项目- 安装 Vue CLI：`npm i -g @vue/cli`- 查看 Vue CLI 版本：`vue -V`- 创建项目：① `vue create project-name`、 ② `cd XXX` 进入项目所在目录、 ③ `npm run serve` 运行项目# 项目创建过程1. `vue create vue-demo` 创建 Vue 项目 vue-demo2. Please

# 生命周期1. **`setup`**：组合式 API 中，`setup()` 钩子会在所有选项式 API 钩子之前调用2. `beforeCreate`：在组件实例初始化完成后调用3. `created`：在组件实例处理完所有与状态相关的选项后调用4. `beforeMount`：在组件被挂载之前调用5. `mounted`：在组件被挂载之后调用6. `beforeUpdate`：在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用7. `updated`：在组件因为一个响应式

# 自定义指令 directives## directives 的简写- 我们可以通过配置项 `directives` 来自定义指令- 自定义指令时直接写指令名 `XXX`，使用时需要加上前缀为 `v-XXX````html ``````jslet vm = new Vue({ el: "#app", data: { num

计算属性 `computed`gettergetter - 获取计算属性时调用 {{ reMsg }} let vm = new Vue({ el: '#app', data: { msg: "superman" }, // 设置 computed computed: { // 设置计算属性 reMsg reMsg: { // 设置 getter

# 绑定事件`v-on:事件类型="方法名 / 表达式 / 简单 JS 语句"`，可以缩写为 `@事件类型="方法名 / 表达式 / 简单 JS 语句"`* #### `@事件类型="方法名"````html 点击打印数据``````jslet vm = new Vue({ el: '#app', methods: { // methods 里存放方法，thi

# 条件渲染## `v-show`- 相当于设置元素 `display: none`。就是说，不论是否显示，浏览器都会渲染。适用于切换频率较高的场合- `v-show` 不支持与 `` 标签元素一起使用```html v-show 的使用 v-show 的使用

# Vue2 的响应式实现原理：- 数组：通过重写 [更新方法] 来实现拦截- 对象：通过 `Object.defineProperty()` 对属性的读取、修改进行拦截data 属性中，只有属性描述符 configurable 为 true 的属性才可以被 VueJS 进行依赖收集。VueJS 会在 data 属性中的每个属性上调用 `Object.defineProperty()` 方法，为它们添加 getter 和 setter。这样，当你访问或修改 data 属性中

# 数据显示## 文本插值 `{{ }}`* 插值符 `{{ }}` 里面可以写 JS 表达式> #### Vue2* 插值符 `{{ }}` 可以直接获取 data 中的数据 实际上，`{{ }}` 中能直接获取 Vue 实例的所有属性```html msg: {{`${msg}!!!`}}

# Vue 初体验1. CDN 在线引入 Vue：```html```2. 创建 Vue 实例 vm