12 2024 档案
基本组件通信
摘要：组件通信 props通信—不推荐层级过深的传递 概述：props是使用频率最高的一种通信方式，常用与 ：父 ↔ 子。 若 父传子：属性值是非函数。 若 子传父：属性值是函数。其实本质还是先父传子给函数，然后孩子去调用。 父组件： <template> <div class="father"> <h3
pinia状态管理工具
摘要：Pinia状态管理工具 参考地址：https://pinia.vuejs.org/zh/ 搭建pinia环境 安装： npm i pinia 编写main.ts import { createApp } from "vue"; import App from "./App.vue"; //引入pin
路由
摘要：路由 参考地址：https://router.vuejs.org/zh/ Vue实质上是一个 SPA（单Web应用程序） 应用，也就是实质上其实只有一张页面。所以我们使用route进行切换。 基本构成： 1、导航区、展示区 2、路由器 3、制定路由的具体规则（什么路径，对应着什么组件
hooks
摘要：自定义hooks 1、将对应一个功能的代码拆分出去： import { reactive, onMounted } from "vue"; import axios from "axios"; //有了default后 function不用加名字 export default function ()
组件生命周期
摘要：对生命周期的理解 参考地址：https://cn.vuejs.org/guide/essentials/lifecycle.html 注意：以下只说明的常用的几个组件生命周期，并不是所有。 为了测试生命周期，下载了对应vue2所需要的 vue.js devtools 6.6.4 来源于谷歌商城，
props的使用
摘要：props的使用 父组件通过props给子组件 传递基础上获取并添加限制条件 注意：一些属性必须加 : 使其是计算属性，否则传递的是字符串 注意：defineProps 一般defineXxx函数是宏函数可以不用引入，但是我在使用的时候需要引入，可能是语法检查或者其他 ts约束文件： //限
标签的ref属性
摘要：标签的ref属性 参考文档：https://cn.vuejs.org/api/built-in-special-attributes.html#ref 作用：用于注册模板引用。 用在普通DOM标签上，获取的是DOM节点。因为通过id获取不同组件的对应DOM标签会出现问题，本质上vue是挂载到跟组
watchEffect监听
摘要：watchEffect 官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。 watch对比watchEffect: 都能监听响应式数据的变化，不同的是监听数据变化的方式不同 watch：要明确指出监视的数据 watchEffect：不用明确指出监视的数
watch监听
摘要：watch监听 参考地址：https://cn.vuejs.org/api/reactivity-core.html 特别注意：凡是监视对象类型，只要引用没有发生变化，oldValue和newValue一致。 作用：监视数据的变化（和Vue2中的watch作用一致） 特点：Vue3中的watch只能
computed计算属性
摘要：computed计算属性 作用：根据已有数据计算出新数据（和Vue2中的computed作用一致），其也是一个ref类型的变量。 参考代码： <template> <div class="person"> 姓: <input type="text" v-model="firstName"><br>
toRefs与toRef
摘要：toRefs与toRef 在vscode中通过 鼠标左键 + Alt可以选中多行。 作用：将一个响应式对象中的每一个属性，转换为ref对象。 备注：toRefs与toRef功能一致，但toRefs可以批量转换，而toRef只能转换一个。 参考代码： <template> <div class
创建响应式数据
摘要：创建响应式数据 Vue2中 在vue2中数据写在对应的data中就是响应式的。 Vue3 ref ：可以定义基本类型的响应式数据 先要导入对应的ref，然后才能使用 import {ref} from 'vue' 作用：定义响应式变量。 语法：let xxx = ref(初始值)。
setup
摘要：setup setup概述 setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。 特点如下： setup函数返回的对象中的内容，可直接在模板中使用。 setup
选项式与组合式API
摘要：选项式 与 组合式API Vue2的API风格就是选项式的，Vue3的API设计是组合式的。 Options API 的弊端 动图来源：大帅老猿（掘金） Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，
vue3的src基本理解
摘要：对应SRC内容 main.ts文件分析 main.ts： import './assets/main.css' import { createApp } from 'vue' //创建应用 盆 import App from './App.vue' //App组件根 createApp(App)
分类说明
摘要：此分类为学习笔记，非本人纯原创，参考学习地址：https://www.bilibili.com/video/BV1Za4y1r7KE/?spm_id_from=333.1391.0.0&vd_source=3482c0c40f6a05b99c21075cb9535764
使用vite构建vue3基本工程
摘要：vite构建 https://vitejs.cn/ 构建 简单粗暴，就是需要注意对应vite版本支持的nodejs版本： npm create vue@latest 报错： 诸如此类就是配置的镜像源中没有对应插件，可以直接官网地址下载即：npm install vscode-uri npm
