林幼仪-优快云博客

原创 Vue3 新特性、Pinia

背景说明所以在 Vue3.3 中引入了 defineOptions 宏，用来定义 Options API 的选项。可以用 defineOptions 定义任意的选项，props、emits、expose、slots 除外（因为有defineProps、defineEmits）基本语法定义 Storestategetter 和 action action 异步写法下包

2024-10-20 16:18:52 784

beforeCreate 和 created 相关的代码一律放在 setup 里。如果一些代码需要在 mounted生命周期中执行，放在 onMounted 里。需求：在不开启deep的前提下，监听age的变化。深度监视，监视的是整个对象加对象里面的所有属性。获取组件（通常是为了拿到组件里面的属性和方法）2. 使用 create-vue 创建项目。监听一个或多个数据的变化。，数据变化时执行回调函数。顶层组件向任意的底层组件。跨层传递简单响应式数据。跨层传递复杂响应式数据。，返回一个响应式对象。

2024-10-19 21:13:53 508

原创 vue day08（vuex)

1. 是什么vuex 是一个 vue 的状态管理工具，状态就是数据大白话：vuex 是一个插件，可以帮我们管理 vue 通用的数据（多组件共享的数据）2. 场景一份数据在多个组件中使用，并且还可以进行数据修改3. 优势共同维护一份数据，数据集中化管理响应式变化操作简洁（vuex 提供了一些辅助函数）

2024-10-18 21:36:58 702

原创 vue day07（自定义创建项目）

不认识命令行中报错语法是什么意思就去【ESLint 规则表】中查。基于 VueCli 自定义创建项目。自动修复需要在设置里配置两个配置项。如果代码不符合规范，ESLint。通过配置自动修复错误。

2024-10-17 14:52:50 272

原创 Vue day06（路由进阶）

router-link-exact-active（精确匹配）to="/my" 可以匹配 /my /my/a /my/b。router-link-active（模糊匹配）问题：配了路由 path:"/search/:key" ，为什么显示空白？问题：页面一打开，url 默认时 / 路径，未匹配到组件，所以页面显示空白。to="/my" 仅可以匹配 /my。2. router-link-active（用的多）

2024-10-16 17:39:24 1281

原创 Vue day05

自定义指令：自己定义的指令。可以封装一些dom操作，扩展额外功能需求：dom更新完了，输入框立刻获得焦点。

2024-10-15 18:17:59 805

原创 Vue day04

一个组件的 data 选项必须是一个函数（保证每个组件实例，维护独立的一个数据对象）单向数据流：父级prop的数据更新，会向下流动，影响子组件。作用：向子组件传递数据（可以传递任意数量，任意类型的数据）prop 的数据是外部的，不能直接改，要遵循单向数据流。默认情况下，写在组件中的样式是全局样式，会全局生效。组件的数据是独立的，无法直接访问其他组件的数据。子组件用 $emit 通知父组件，修改值。1. 给子组件以添加动态属性的方式传值。data 的数据是自己的，随便改。想用其他组件的数据，组件通信。

2024-10-13 18:39:42 807

原创 Vue day03

思考：什么时候可以发送初始化渲染请求？什么时候可以开始操作dom？（dom 渲染出来） Vue 生命周期：一个 Vue 实例从创建到销毁的整个过程四个阶段：创建、挂载、更新、销毁 Vue 生命周期过程中，会自动运行一些函数，被称为生命周期钩子（让开发者可以在特定阶段运行自己的代码）三个常用：created、mounted、beforeDestroy 普通组件的注册使用

2024-10-12 17:49:29 835

原创 Vue day02

单选框 input:radio checked 给两个单选框加上同一个name属性，会互斥。计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算，并再次缓存。v-model.number 转数字。this.方法名() {{ 方法名() }} @事件名 = '方法名'常见的表单元素都可以用 v-model 绑定关联，快速获取和设置表单的值。this.计算属性 {{ 计算属性 }}

2024-10-10 17:29:16 958

原创 Vue day01

v-for = "(item, index) in 数组" :key="唯一值"v-if 搭配 v-else 和 v-else-if 多个显示一个。场景：要么显示，要么隐藏，不频繁切换的场景。表达式：是可以被求值的代码，JS 引擎会将其计算出一个结果。场景：频繁切换显示隐藏的场景。2. v-on:事件名 = "methods中的函数名"打开 Vue 运行的页面，调试工具中 Vue 栏，即可查看。表达式值为 true 显示，false 隐藏。1. v-on:事件名 = "内联语句"

2024-10-08 17:29:03 1042

原创 Node.js 模块化

定义：CommonJS 模块是为 Node.js 打包 JavaScript 代码的原始方式。Node.js 还支持浏览器和其他 JavaScript 运行时使用的 ECMAScript 模块标准。在 Node.js 中，每个文件都被视为一个单独的模块。概念：项目是由很多个模块文件组成的好处：提高代码复用性，按需加载，独立作用域使用：需要标准语法导出、导出使用需求：定义utils.js模块，封装基地址和求数组总和的函数模块化包常用命令所在文件夹不能有特殊字符和中文。

2024-10-04 15:14:26 729

原创 Node.js 入门

定义：Node.js 是一个跨平台JavaScript运行环境，使开发者可以搭建服务器端的JavaScript应用程序。问题：Node.js 中，相对路径是根据终端所在路径来查找的，可能无法找到你想要的文件。需求：把回车符(\r) 和换行符(\n) 去掉后，写入到新的 html 文件中。命令：在 vscode 集成终端中，输入 node xx.js，回车即可执行。首先：浏览器能执行 JS 代码，依靠的是内核中的V8引擎（C++程序）会使用特定于平台的分隔符，作为定界符，将所有给定的路径片段连接在一起。

2024-09-23 17:50:26 1442

weixin_53676387的博客