- 博客(52)
- 收藏
- 关注
RSS订阅原创 Vue中的computed
在 Vue.js 中，computed 属性（计算属性）提供了一种高效的方式来计算和缓存基于响应式依赖的值。计算属性的主要特点是它们的值是基于依赖项的变化而自动更新的，并且只有在依赖项发生变化时才重新计算。这意味着每次依赖的数据发生变化时，计算属性的 getter 会同步执行，以确保计算属性的值始终是最新的。Vue 3 的懒执行机制避免了不必要的计算，特别是在计算开销较大的场景中，这可以显著提高性能。：如果计算属性在依赖项没有变化的情况下被多次访问，它会返回缓存的值，而不会重新计算。
2024-05-18 20:32:59
4379
2
原创 Vue3状态管理Pinia
为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()。当你只使用 store 的状态而不调用任何 action 时，它会非常有用。Pinia中的 getters 直接使用 computed函数 进行模拟, 组件中需要使用需要把 getters return出去。官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/在实际开发项目的时候，关于Pinia的配置，可以在项目创建时自动添加。
2024-04-29 21:08:15
1070
1
原创 Vue3框架
reactive,ref,computed,watch,defineProps,defineEmits,defineExpose,defineMOdel,defineOptions,provide与inject
2024-04-29 20:41:40
2372
1
原创 Vue框架中的Vuex
Vuex 是一个 Vue 的状态管理工具，状态就是数据。大白话：Vuex 是一个插件，可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如：购物车数据 个人信息数使用场景某个状态 在 很多个组件 来使用 (个人信息)多个组件 共同维护 一份数据 (购物车)优势共同维护一份数据，数据集中化管理响应式变化操作简洁 (vuex提供了一些辅助函数)这里用state示例比如定义两个模块user和settinguser中管理用户的信息状态 userInfoage: 18。
2024-04-19 20:54:42
778
原创 vue框架中的路由
路由模块封装声明式导航 & 导航高亮 / 精确匹配&模糊匹配 / 自定义高亮类名声明式导航传参 ( 查询参数传参 & 动态路由传参 )路由重定向 / 路由404 / 路由模式编程式导航 / 编程式导航传参 ( 查询参数传参 & 动态路由传参）
2024-04-18 22:36:56
982
1
原创 vue框架中的组件通信
作用：为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 ，帮助开发者快速发现错误。provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。① 父传子：数据 应该是父组件 props 传递 过来的，拆解 v-model 绑定数据。单向数据流：父级 prop 的数据更新，会向下流动，影响子组件。弊端：子组件中的props只能接受一个从父组件传来的名为value的值。可以实现 子组件 与 父组件数据 的 双向绑定，简化代码。表单类组件封装->实现 子组件和父组件数据 的双向绑定。
2024-04-18 21:18:31
1862
原创 webpack搭建开发环境
3.使用 npm run dev 来启动开发服务器，访问提示的域名+端口号，在浏览器访问打包后的项目网页，修改代码后试试热更新效果。2.问题：cross-env 设置的只在 Node.js 环境生效，前端代码无法访问 process.env.NODE_ENV。作用：启动 Web 服务，打包输出源码在内存，并会自动检测代码变化热更新到网页，不用自己一直重新打包。：webpack.config.js 配置导出函数，但是局限性大（只接受 2 种模式）
2024-03-31 23:04:55
2094
原创 webpack打包模块
1.Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容2. 静态模块：编写代码过程中的，html，css， js，图片等固定内容的文件3. 打包过程，注意：只有和入口有直接/间接引入关系的模块，才会被打包4. Webpack 的作用：把静态模块内容，压缩，这个和，转译等（前端工程化）把 less/sass 转成 css 代码把 ES6+ 降级成 ES5 等支持多种模块文件类型，多种模块标准语法。
2024-03-31 22:07:17
1200
原创 Node.js中的导入导出
注意：Node.js 默认只支持 CommonJS 标准语法，如果想要在当前项目环境下使用 ECMAScript 标准语法，请新建 package.json 文件设置。CommonJS 规范是 Node.js 环境中默认的，后来官方推出 ECMAScript 标准语法。注意：同名变量指的是模块内导出的变量名。index.js：导入使用。export 修饰定义语句。utils.js：导出。utils.js：导出。index.js：导入。utils.js 导出。index.js 导入。
2024-03-31 20:06:56
842
原创 js中的原型(原型对象，对象原型，原型继承，原型链)
原型对象，对象原型，原型继承，原型链，prototype属性，__proto属性，constructor属性
2024-03-15 21:39:05
1192
原创 js节点操作
DOM 节点，查找节点（parentNode 属性， childNodes，children 属性，nextElementSibling 属性，previousElementSibling 属性），增加节点（createElement(),appendChikd(),insertBefore(),cloneNode()），删除节点(removeChild())
2024-03-06 22:33:32
447
原创 js事件委托，其他事件与元素尺寸位置
事件委托，其他事件（页面滚动事件，页面加载事件，页面尺寸事件）， scrollLeft和scrollTop ，clientWidth和clientHeight， offsetWidth和offsetHeight， offsetLeft和offsetTop，元素.scrollTo(x, y)，element.getBoundingClientRect()，document.documentElement HTML 文档返回对象为HTML元素，元素的尺寸位置
2024-03-05 17:39:17
927
原创 js事件流
事件流（捕获与冒泡），addEventListener(事件类型, 事件处理函数, 是否使用捕获)， 解绑事件使用:对象.removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)，阻止冒泡： 事件.stopPropagation()，事件.perventDefault()
2024-03-03 22:07:25
385
原创 DOM文档对象模型
DOM相关概念，操作元素内容（innerText属性，innerHTML属性），操作元素属性，样式属性（通过css选择器修改，操作类名(className) 操作CSS，通过 classList 操作类控制CSS），操作表单属性，自定义属性（data-自定义，dataset.访问）
2024-01-31 16:20:17
1070
原创 JS函数使用
具名函数与匿名函数和立即执行函数。声明：function 函数名(参数){函数体}无需调用，立即执行，其实本质已经调用了。function(参数) {函数体}场景介绍: 避免全局变量之间的污染。调用：函数名(参数)
2024-01-19 16:28:07
385
原创 JS数据类型与转换，常见错误
JavaScript数据类型（number，string，Boolean，undefined，null）与显示隐式转换，还有常见错误。
2024-01-19 15:23:48
1026
原创 flex-修改主轴方向，弹性盒子换行与调节行对齐方式
flex-修改主轴方向，弹性盒子换行与调节行对齐方式。flex-direction改变元素排列方向，要注意主轴方向修改侧轴也会随之变化，两轴始终相互垂直。子元素宽度发生了改变，使其宽度总和等于父元素，子元素会被压缩或者拉伸，所以才叫弹性盒子。在上面的例子我们看到了换行后自动给出了均匀的间隙，要修改就得调节行对其方式。在flex盒子中主轴方向默认是水平方向，侧轴默认是垂直方向
2023-11-29 22:05:53
1560
原创 CSS空间转换
css空间转换(transfrom)：空间位移，空间缩放，空间旋转，透视，立体呈现。perspective只增加近大远小、近实远虚的视觉效果，用了立体呈现就不用添加透视就可以体现出在空间转换）z轴方向上移动在视觉上看不出区别(因为电脑屏幕呈二维平面)，这里需要添加透视才能看出效果(如果是立体图则不需要添加透视)；注意点：绕x或y轴转需配合透视perspective使用(如果是立体图则不需要添加透视)，绕z轴效果跟平面旋转一样所以不需要添加透视。transform: scaleZ(倍数);
2023-11-26 14:53:18
264
原创 CSS平面转换
css平面转换：位移，缩放，旋转。多重转换指的是多种转换配合使用，这里给出位移配合旋转做出的效果，但有要注意的是：transform复合属性连写带旋转的放在最后，因为旋转会改变坐标轴向；注意点：如果同时设置 translateX() 和 translateY()，那么只生效最下面的一个，也就是说只会在单方向上移动，不会出现两个方向同时移动的情况，要同时移动需要translate()写法。/* 多重转换：transform复合属性连写带旋转的放在最后，因为旋转会改变坐标轴向；
2023-11-25 22:21:53
108
原创 CSS精灵图
css精灵图 场景:项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图优点:减少服务器发送次数，减轻服务器的压力，提高页面加载速度。
2023-11-25 13:18:05
51
原创 CSS溢出效果
场景:控制内容溢出部分的显示效果，如: 显示、隐藏、滚动条…/* auto:根据内容是否超出，判断是否显示滚动条 *//* 滚动：无论内容是否超出都显示滚动条的位置 */溢出部分:指的是盒子内容部分所超出盒子范围的区域。/* 溢出隐藏，工作常用 */属性名: overflow。注意点：如果没有设置溢出效果，那么溢出的部分内容类似于不占位置，类似于脱标，不会影响到后面的布局，会覆盖到其上面。
2023-11-25 13:17:25
93
原创 CSS光标类型
css光标类型cursor* 工字形，提示用户可以选择文字 */场景:设置鼠标光标在元素上时显示的样式。/* 小手效果，提示用户可以点击 *//* 十字光标，提示用户可以移动 */属性名: cursor。
2023-11-25 13:17:12
114
原创 CSS垂直对齐
场景： 浏览器遇到行内和行内块当作文字处理，默认文字是按基线对齐，会出现对不齐的情况。/* 浏览器遇到行内和行内块当作文字处理，默认文字是按基线对齐 *//* 浏览器遇到行内和行内块当作文字处理，默认文字是按基线对齐 */盒子和图片对齐，一种方法跟上述一样，第二种方法是转块级显示模式。/* 图片加行内块或行内，给图片添加垂直对齐方式 *//* 文字对齐方式也可控制行内或行内块 */图片加行内块或行内，给图片添加垂直对齐方式。属性名: vertical-align。文字对齐方式也可控制行内或行内块。
2023-11-25 13:16:15
66
原创 CSS浮动（float）
浮动属性为float ，用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置（即子级浮动的位置）外边距塌陷：父子级标签，都是块级，子级加margin标签会影响父级的位置。浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动，可以理解为脱标之间的内容相互占位置。/* 浮动:在一行排列,宽高生效--浮动的标签具备行内块特点 */浮动元素会脱离标准流(简称:脱标)，在标准流中不占位置。
2023-11-24 20:44:36
160
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人