2023090205-优快云博客

原创 Vue3组件通信详解：父传子、子传父与跨组件通信

3. 在组件中通过`this.store.state‘访问状态，通过‘this.store.state`访问状态，通过`this.store.state‘访问状态，通过‘this.store.commit`调用mutation修改状态，通过`this.$store.dispatch`调用action。在这个例子中，父组件通过v-bind指令将parentMessage数据绑定到子组件的message属性上，子组件通过defineProps接收并使用这个数据。跨组件通信是指非父子关系的组件之间进行数据传递。

2024-12-23 18:00:00 1005

原创 Vue小项目（开发一个购物车）

下面是HTML+CSS框架。

2024-12-22 15:45:00 187

原创组件开发的环境准备

我们安装了Node.js，修改了npm镜像源以提高下载速度，安装了高性能的包管理器pnpm，并基于pnpm创建了一个Vue脚手架项目。本文将详细介绍如何安装Node.js、修改npm镜像源、安装pnpm包管理器，并基于pnpm创建一个脚手架项目。1. 下载Node.js安装包：访问Node.js官网（https://nodejs.org/（https://nodejs.org/）），下载适合你操作系统的安装包。为了提高下载速度，我们可以将npm的镜像源修改为国内的镜像源，如淘宝NPM镜像。

2024-12-21 19:58:54 517

原创练习：基于Vue3实现一个小相册

在前端开发中，Vue.js 凭借其简洁的API和强大的功能，成为了许多开发者的首选框架。Vue 3的发布更是带来了性能提升和新的API，让开发变得更加高效和灵活。本文将介绍如何使用Vue 3来构建一个简单的小相册应用，展示如何管理和展示图片。首先，我们需要使用Vue CLI来初始化一个新的Vue 3项目。项目初始化完成后，我们可以开始设计项目的结构。基于Vue 3实现一个小相册应用。

2024-11-25 07:45:00 253

原创响应式数据、v-on、v-bind、v-if、v-for

这一特性是通过 Vue 的“响应式原理”实现的，它依赖于 ES6 的Object.defineProperty方法（在 Vue 3 中，则使用了 ES2015 的Proxy对象）来拦截对对象属性的访问和修改。本文将详细介绍 Vue.js 中的响应式数据、v-on、v-bind、v-if 和 v-for 这几个核心指令。注意，在使用v-for时，建议为每个渲染的元素提供一个唯一的key属性，以帮助 Vue 跟踪每个节点的身份，从而重用和重新排序现有元素。v-if指令用于根据表达式的真假值来条件性地渲染元素。

2024-11-24 22:24:19 359

原创 ES6新特性的学习

箭头函数是ES6中引入的一种更简洁的函数定义方式。它不仅减少了代码的冗余，还解决了this绑定的问题。在箭头函数中，如果函数体只有一条语句且需要返回值，可以省略大括号和return关键字。此外，箭头函数没有自己的this，它会捕获其所在上下文的this值，这使得在回调函数中处理this变得更加简单。return a+b;

2024-11-09 22:00:37 315

原创 Javascript DOM 操作练习

通过JavaScript，我们可以动态地访问和修改网页的DOM结构，从而创建交互式的用户体验。本文将深入探讨JavaScript中的DOM操作，包括如何获取元素、修改元素、处理事件等。通过JavaScript，我们可以遍历这个树形结构，读取或修改节点的属性、内容或样式。有时，我们需要动态地创建新的DOM元素，并将其插入到现有的DOM结构中。一旦获取了DOM元素，我们就可以修改它们的属性、内容或样式。在JavaScript中，有多种方法可以获取DOM元素。如果需要，我们还可以从DOM中删除元素。

2024-10-31 20:30:51 637

原创 JavaScript中的DOM操作：构建动态网页的基石

本文将深入探讨JavaScript中的DOM操作，包括如何获取DOM元素、修改元素内容、操作属性和样式，以及处理事件等。通过获取DOM元素、修改内容、操作属性和样式，以及处理事件，开发者可以创建丰富、互动性强的网页应用。随着前端技术的不断发展，DOM操作的方法和最佳实践也在不断更新，因此保持学习和探索的态度至关重要。事件处理是DOM操作的重要组成部分，它允许开发者响应用户的交互操作，如点击、输入、鼠标移动等。修改样式：直接操作元素的style属性，或者通过classList添加、移除类名。

2024-10-29 17:05:56 758

原创 JavaScript基础探索：函数、对象及常用类

JavaScript 是一门功能强大的编程语言，其函数、对象和常用类（Array、String、Math、Date）为开发者提供了丰富的工具来处理各种任务。希望这篇文章能帮助你更好地理解 JavaScript 的基础，并为你的编程之旅打下坚实的基础。在编程的世界里，JavaScript 是一门非常流行的语言，尤其在前端开发领域。本文将带你深入了解 JavaScript 中的几个核心概念：函数、对象以及常用的类——Array、String、Math 和 Date。字符串是不可变的字符序列，用于表示文本。

2024-10-29 16:34:21 334

原创 JavaScript基础：数据类型、运算符与程序控制语句

其中，var声明的变量具有函数作用域或全局作用域，let和const声明的变量具有块级作用域（即它们只在其所在的代码块内有效）。基本数据类型：包括Undefined、Null、Boolean、Number、String、Symbol（ES6新增）和BigInt（用于表示任意精度的整数）。// 逻辑或（OR），有一个为真即为真。引用数据类型：主要是Object，包括数组（Array）、函数（Function）、日期（Date）等。// 逻辑非（NOT），取反。

2024-10-29 14:13:32 1024

原创 CSS综合练习

主要内容区域（包含三个部分：个人简介、最新作品集、联系信息）导航栏（包含主页、关于我、作品集、联系我们链接）添加一些基本的动画效果，如悬停效果、淡入淡出等。使用HTML和CSS进行布局和样式设计。使用Flexbox或Grid进行布局。头部区域（包含个人照片和简短介绍）确保页面在不同设备上的响应性。设计一个简单的个人主页。页脚（包含版权信息）

2024-10-29 13:48:10 294

原创 CSS的两列布局、三列布局和多行多列布局

浮动布局虽然经典，但在现代布局中，Flexbox 和 Grid 布局因其灵活性和简洁性而备受推崇。CSS 提供了多种方法来实现不同类型的布局，其中两列、三列以及多行多列布局是最常见的几种。对于简单的多行多列布局，可以使用浮动布局。浮动布局是早期实现两列布局的主要方式。两列布局是网页设计中最为基础的一种布局方式，通常用于将内容分为侧边栏和主内容区。多行多列布局通常用于需要展示大量内容的网格布局，如图片画廊、产品列表等。与两列布局类似，但需要注意中间内容区的浮动和清除浮动处理。

2024-10-29 13:18:52 370

原创前端清除盒子的浮动

通过理解浮动和高度塌陷的原理，我们可以选择合适的清除浮动方法来解决布局问题。然而，浮动也带来了一个常见的问题：当元素浮动后，其父容器（盒子）可能会无法正确包含这些浮动元素，导致“高度塌陷”。`属性和适当的`display`属性（如`block`或`table`），从而在不增加额外HTML结构的情况下清除浮动。`，我们可以确保当前元素不会与之前的浮动元素重叠，并“清除”之前的浮动。谨慎使用clear属性：虽然`clear`属性可以清除单个元素的浮动，但在处理整个父容器的浮动问题时，它通常不是最佳选择。

2024-10-17 17:51:19 980

原创前端父盒塌陷的解决之道

其中，父盒高度塌陷（也称为“父容器高度为0”或“父元素高度无法包含浮动元素”）是一个常见且棘手的问题。父盒高度塌陷是指当一个父元素包含浮动元素时，父元素的高度无法正确包含其内部浮动元素的高度，从而导致父元素的高度塌陷为0（或未设置高度时的默认值）。因此，当父元素仅包含浮动元素时，其高度计算将不会考虑这些浮动元素，从而导致高度塌陷。设置父元素高度：如果父元素的高度是固定的，我们可以直接设置父元素的高度来避免高度塌陷问题。响应式问题：在响应式设计中，父元素高度的塌陷可能会影响不同设备上的布局效果。

2024-10-17 17:45:21 996

原创固定定位。

其中，固定定位（Fixed Positioning）作为一种重要的布局手段，以其独特的定位机制和广泛的应用场景，赢得了开发者们的青睐。无论页面如何滚动，固定定位的元素都会保持在指定的位置，不会随页面内容的滚动而移动。不随页面滚动：固定定位的元素会始终保持在指定的位置，不会随页面内容的滚动而移动。这是固定定位最显著的特点。层级提升：固定定位的元素会提升其在页面中的层级，使得它可能覆盖其他未定位或定位层级较低的元素。基于视口定位：固定定位的元素是相对于浏览器窗口进行定位的，而不是相对于其包含块。

2024-10-17 17:24:21 469

原创绝对定位.

绝对定位是CSS中的一种定位方式，它允许元素相对于其最近的已定位祖先元素（即设置了position属性且值不为static的祖先元素）进行定位。这些偏移量是基于其包含块的位置来计算的。实现复杂布局：在需要实现复杂布局（如网格布局、响应式布局等）时，绝对定位可以与其他定位方式（如相对定位、固定定位等）结合使用，以实现更加灵活和精确的布局效果。包含块依赖：绝对定位元素的位置是相对于其最近的已定位祖先元素而言的。层级提升：绝对定位的元素会提升其在页面中的层级，使得它可能覆盖其他未定位或定位层级较低的元素。

2024-10-17 17:15:49 406

原创相对定位.

这意味着，即使你改变了元素的位置，它仍然会占据在文档流中的原始空间，并对其他元素的布局产生影响。配合绝对定位使用：在“子绝父相”的布局策略中，父元素使用相对定位，而子元素使用绝对定位。不影响其他元素布局：虽然相对定位的元素位置发生了变化，但它仍然保留在文档结构中的位置，不会改变其他元素的布局。不脱离文档流：相对定位的元素仍然占据其在文档流中的原始空间，这意味着它会对其后面的元素产生影响。参照元素自身位置：相对定位是参照元素在文档流中的位置进行定位的，偏移量是基于这个位置的。三、相对定位的应用场景。

2024-10-17 17:11:26 300

2301_81466619的博客