基础入门

1. 交叉轴对齐方式 (Cross-axis Alignment)

• 在 Flex 布局中，交叉轴是与主轴垂直的方向。可以使用 align-items 和 align-self 来调整子元素在交叉轴上的对齐方式。

常见对齐方式：

• flex-start：子元素从交叉轴的起始位置对齐。
• flex-end：子元素从交叉轴的末尾对齐。
• center：子元素在交叉轴上居中。
• stretch：子元素在交叉轴上拉伸以填充容器。

2. 自适应伸缩 (Responsive Stretching)

• 使用

  flex-grow
  

  ,

  flex-shrink
  

  和

  flex-basis
  

  属性来实现子元素在主轴方向上的自适应伸缩。

  • flex-grow：定义元素如何占据主轴上的剩余空间。
  • flex-shrink：定义元素在主轴上如何收缩。
  • flex-basis：定义元素的初始大小。

3. 弹性布局 Flex (Flex Layout)

• Flex 布局是一种一维布局方式。启用 Flex 布局后，容器内的元素会自动根据主轴和交叉轴的属性进行排列。
• 可以通过 flex-direction 属性来设置主轴方向，如 row（水平）和 column（垂直）。

4. 绝对定位和层级

• 绝对定位：通过 position: absolute 或 position: fixed 来定位元素，通常是相对于最近的已定位父元素。
• 层级管理：通过 z-index 属性控制元素的堆叠顺序。z-index 值大的元素会覆盖在值小的元素之上。

5. 层叠布局 (Stacking Layout)

• 在层叠布局中，多个元素可能会在视觉上重叠。通过 z-index 控制它们的显示顺序。

6. 字符串拼接 (String Concatenation)

• 使用

  +
  

  运算符将多个字符串连接在一起：

  javascript
  
  
  复制代码
  let greeting = "Hello, " + name + "!";
  

7. 模板字符串 (Template Strings)

• 使用反引号（

  `
  

  ）定义模板字符串，可以嵌入变量和表达式，使字符串拼接更为简洁：

  javascript
  
  
  复制代码
  let greeting = `Hello, ${name}!`;
  

8. 交互点击事件 (Click Event)

• 在鸿蒙开发中，可以为元素添加点击事件，通常使用

  addEventListener
  

  方法来实现：

  javascript复制代码button.addEventListener('click', function() {
    console.log('Button clicked!');
  });
  

9. 状态管理

• 状态管理在开发中用于管理应用的状态和数据流。它帮助确保数据的一致性和应用的响应性。
• 在鸿蒙开发中，可以通过 Observer 模式、DataBinding 或状态管理库来实现。

10. 算术运算符 (Arithmetic Operators)

• 处理数值计算的常见运算符：
  • + 加法
  • - 减法
  • * 乘法
  • / 除法
  • % 取余
  • ++ 自增
  • -- 自减

11. 赋值运算符 (Assignment Operators)

• 用于将值赋给变量的运算符：
  • = 简单赋值
  • += 加法赋值
  • -= 减法赋值
  • *= 乘法赋值
  • /= 除法赋值
  • %= 取余赋值

12. 点赞功能 (Like Feature)

• 使用按钮和点击事件实现点赞功能。例如，点击按钮时点赞数加一：

  javascript复制代码let likes = 0;
  button.addEventListener('click', function() {
    likes++;
    console.log(`Likes: ${likes}`);
  });
  

13. 一元运算符 (Unary Operators)

• 一元运算符作用于单个操作数，常见的一元运算符包括：
  • + 一元加法
  • - 一元减法
  • ++ 自增
  • -- 自减
  • ! 逻辑非

14. 比较运算符 (Comparison Operators)

• 用于比较两个值之间的关系：
  • == 等于
  • === 严格等于
  • != 不等于
  • !== 严格不等于
  • > 大于
  • < 小于
  • >= 大于或等于
  • <= 小于或等于

15. 逻辑运算符 (Logical Operators)

• 逻辑运算符用于结合多个布尔表达式，常见的有：
  • && 逻辑与
  • || 逻辑或
  • ! 逻辑非

16. Stack 布局

• Stack 布局是堆叠式布局，元素可以重叠显示。常用于一些浮动或定位效果中，可以通过 position: absolute 和 z-index 实现。

17. Scroll（滚动）

• 滚动通常用于展示大量内容，鸿蒙开发中可以使用 scroll 组件实现。通过设置容器的 overflow 属性，可以控制内容区域是否允许滚动。
• 常见的滚动属性：
  • overflow: auto：如果内容溢出，显示滚动条。
  • overflow: scroll：始终显示滚动条。
  • overflow: hidden：隐藏超出的内容。