前端： 60 篇

在前端开发过程中，利用 CSS 一行代码技巧可以解决一些常见问题，提高编码效率，使样式设置更加简洁。本文将分享 10 个 CSS 一行代码技巧。

1. 居中对齐​

居中对齐是 CSS 中的常见需求。通过一行 CSS 代码，可以实现元素的水平垂直居中。

display: grid; place-items: center;

前言​

在现代前端开发中，打包工具已经成为不可或缺的一部分。它们可以将多个文件合并为一个或多个文件，使前端应用的加载和运行速度更快。目前，Vite 和 Webpack 是最受欢迎的打包工具之一。本文将介绍它们之间的比较和区别，以帮助你选择适合自己项目的工具。

什么是 Vite？​

Vite 是一种新型的前端构建工具，旨在提高开发过程中的开发体验和构建速度。它支持所有的现代前端框架，如 Vue、React、Angular等，以及原生的 HTML/CSS/JS 应用。

Vite 的核心理念是“快速开发”。它采用了一种新的开发方式，即在开发过程中不需要事先打包应用程序，而是在应用程序运行时即时编译和构建。这种方式使得开发者可以更快地编写代码，而无需等待长时间的编译和构建过程。

什么是 Webpack？​

Webpack 是一个广泛使用的打包工具，为现代 Web 应用程序提供了强大的静态资源管理功能。Webpack 可以将多个文件打包成一个或多个文件，并使它们在浏览器中快速加载。Webpack 是一个高度可配置的工具，因此可以根据项目的需要进行定制。

Webpack 的核心理念是“模块化”。它支持使用各种语言和框架编写模块，并将它们打包成可在浏览器中使用的 JavaScript 文件。Webpack 还提供了强大的插件系统，可以扩展其功能。

在 React 中，我们通常使用 JSX 来编写组件。JSX 是一种类似 HTML 的语法，它可以帮助我们更方便地编写组件，并且可以使代码更加易读和易于维护。在本文中，我们将介绍如何使用 JSX 编写 React 组件，并且将介绍 JSX 与 HTML 的区别、渲染列表、条件渲染、注册事件和传递 Props 相关知识。

React 框架简介​

React 是一个由 Facebook 开发的用于构建用户界面的 JavaScript 库。它采用组件化的开发模式，使得开发者可以将一个 Web 应用程序拆分成多个组件，每个组件负责不同的功能，从而使得开发、测试和维护变得更加容易。

React 的主要特点是高效、可重用和灵活。它采用了 Virtual DOM 技术，可以最小化 DOM 操作，从而提高性能。另外，React 还拥有丰富的生态系统，包括 React Router、Redux、React Native 等等，可以帮助开发者更加高效地构建 Web 应用程序、移动应用程序和桌面应用程序等等。

我们在前端开发中，经常会有居中某个元素的需求。因为 CSS 对于居中的方式有多种多样，在不同场景下有不同的效果，需要特别记住它们的应用场景才能够正常的居中元素。那么这篇文章，我们就看一下在 CSS 中，水平居中一个元素的不同方法和技巧，帮助你在前端开发中更加游刃有余。

使用 text-align 居中行内元素​

text-align 不仅可以居中文本，还可以居中行内元素（如文本或图片）。把父元素的 'text-align' 设置为 center，然后把子元素的 display 属性设置为 inline 就可以了。

.parent-element {
  text-align: center;
}

在开发大型 Vue 项目的时候，有的组件会嵌套的很深，如果需要引入外层其他目录的组件，需要编写很长一段相对路径。假如有如下组件目录结构：

/Layout/Header/NavBar.vue
/Base/BaseLink.vue

如果在 NavBar 中引入 BaseLink 组件，需要使用下面的路径进行导入：

NavBar.vue
<script>
import BaseLink from '../../Base/BaseLink.vue';
</script>

这里使用了两个 ../ 才访问到 Base 目录，如果这个时候，我们给 ../../ 设置一个别名，例如 @，那么就可以使导入路径更简洁，变成：

@/Base/BaseLink.vue

Vite 支持设置路径别名，来支持这种形式的导入。

这篇文章我们看一下对于表单整体的提交事件应该如何处理，并引入一个事件修饰符的概念。 我们继续使用上篇文章的项目示例，这里我把 html 中，class 为 form 的 div 改成了 form 元素，CSS 的样式也作了对应的调整。

<div class="form">
  ->
  <form></form>
</div>

现在，我们在 form 元素的结束标签之前，添加一个 button 按钮元素，作为表单的提交按钮，点击它表单就会提交。

<textarea id="intro" rows="10" v-model="intro"></textarea>
<!-- 在这里添加 -->
<button type="submit">提交</button>

上篇文章我们学习了如何使用 v-model 绑定 input 输入框和 data 中的属性，这篇文章我们来看一下其它表单控件的绑定方法。

示例​

这里示例大体的样式和结构我已经写好了，你可以从视频里附带的源代码示例里，直接编写代码。用户名这个我们上篇文章介绍了，这个就先不管它了。

单选按钮​

我们先看一下单选框的数据绑定。假如我们让用户选择一下性别，男和女。我们在 HTML 模板中：

• 定义一个 type 为 radio 的 input，name 设置为 gender，这里的 name 相同的 radio 单选框才能形成一个单选按钮组，这样选择是互斥的。
• value 设置为 male，表示男性，这个是单选按钮选中之后，实际获取到的值。这里之所以用英文，是遵循了软件开发的一些最佳实践，方便后端程序或数据库，用枚举的形式存储数据，而枚举的属性名一般用英文。
• 在 input 后面，我们用一个 span 元素显示给用户看的值，这里写上『男』。
• 这里用 v-model 绑定一个名为 gender 的属性，这个我们稍后再在 data 里定义。

在 Vue 中处理表单输入数据处理有两种方式，一种是使用传统的事件监听方式，另一种是使用 v-model，这篇文章我们看一下如何使用事件监听的方式处理表单输入数据。

input 事件处理​

要监听 input 输入框的事件，我们使用 @input 事件，在用户输入每个字符的时候，都会触发这个事件。

<input id="username" type="text" @input="handleInput" />

我们可以在事件处理函数中，直接访问到 event 这个 javascript 原生事件对象，这样可以像普通 js 一样，使用 event.target.value 来访问输入框的值：

这篇文章我们看一下方法和 watch 监听器之间的区别。

Methods 方法和 Watch 监听器的区别​

Methods 和 Watch 之间其实并没有什么太大的可比性，只是当 methods 方法作为 computed 计算属性那样使用时，那么它和 Watch 监听器之间的区别和计算属性跟监听器中间的区别就很类似了，当在 HTML 模板中调用方法时，会把方法的返回值计算出来并显示：

<ul>
  <li v-for="vueBlog in getVueBlogs()">{{ vueBlog }}</li>
</ul>

methods: {
  getVueBlogs() {
    return this.blogPosts.filter((blog) => blog.includes("Vue"));
  },
},

计算属性和 watcher 监听器都可以监听 data 中的数据的变化，然后根据具体的业务逻辑对数据进行操作。它们两个的区别是，computed() 计算属性一般是把 data 中的数据进行一番包装和计算之后，返回新的值，例如对数组进行过滤后的值，而并不会直接修改 data 中的属性：

data() {
    return {
      blogPosts: [
        "Vue 3.0x 入门实战",
        "Vue 3.x 完全指南",
        "React 18 新特性介绍",
        "JavaScript 基础语法概览",
      ],
    };
  },
  computed: {
    count() {
      return this.blogPosts.length;
    },
  },