{ "version": "https://jsonfeed.org/version/1", "title": "峰华前端工程师", "home_page_url": "https://zxuqian.cn/blog", "description": "峰华前端工程师 Blog", "items": [ { "id": "https://zxuqian.cn/blog/ssh-host-key-verification-failed-no-yes", "content_html": null, "url": "https://zxuqian.cn/blog/ssh-host-key-verification-failed-no-yes", "title": "SSH Host key verification failed：原来是我没输入 yes（真实踩坑复盘）", "summary": "新电脑 SSH 连接老服务器，提示 Are you sure you want to continue connecting 却依然 Host key verification failed？本文复盘一次真实踩坑：原因竟然只是没输入 yes。附正确交互逻辑与排查顺序。", "date_modified": "2026-01-06T00:00:00.000Z", "tags": [ "ssh", "linux", "devops", "macos", "troubleshooting" ] }, { "id": "https://zxuqian.cn/blog/when-I-try-to-write-the-new-css-logo-in-css", "content_html": null, "url": "https://zxuqian.cn/blog/when-I-try-to-write-the-new-css-logo-in-css", "title": "当我想用 CSS 写一个新 CSS Logo 的时候...", "summary": "按照小伙伴们的请求，我用 CSS 写了一个新的 CSS Logo。", "date_modified": "2024-11-24T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "CSS" ] }, { "id": "https://zxuqian.cn/blog/upgrade-docusaurus-to-3-6", "content_html": null, "url": "https://zxuqian.cn/blog/upgrade-docusaurus-to-3-6", "title": "升级 Docusaurus 到 3.6，打包速度只需 5 秒钟", "summary": "这几天我把 Docusaurus 升级到了 3.6，主要是因为这个版本引入了 Rspack 和 SWC 等酷炫技术，把打包速度提升了好几倍。以前打包大概要一两分钟，现在只需要五六秒就搞定了！", "date_modified": "2024-11-13T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "Docusaurus", "前端", "React" ] }, { "id": "https://zxuqian.cn/blog/css-animation-from-beginner-to-advanced", "content_html": null, "url": "https://zxuqian.cn/blog/css-animation-from-beginner-to-advanced", "title": "CSS 动画完全指南", "summary": "描述", "date_modified": "2024-11-08T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "CSS" ] }, { "id": "https://zxuqian.cn/blog/10-css-one-liners", "content_html": null, "url": "https://zxuqian.cn/blog/10-css-one-liners", "title": "10 个 CSS 1 行代码技巧", "summary": "介绍了 10 个 CSS 单行代码技巧，旨在提升日常开发中样式设置的效率和简洁度。", "date_modified": "2023-05-29T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "CSS", "单行代码", "效率" ] }, { "id": "https://zxuqian.cn/blog/javascript-one-liners", "content_html": null, "url": "https://zxuqian.cn/blog/javascript-one-liners", "title": "12个 JavaScript 一行代码技巧", "summary": "JavaScript是一种功能强大的编程语言，我们可以通过使用一行代码实现很多功能。在这篇文章中，我们将探讨12个有用的 JavaScript 一行代码技巧。", "date_modified": "2023-05-24T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "JavaScript", "代码技巧", "一行代码" ] }, { "id": "https://zxuqian.cn/blog/difference-between-vite-and-webpack", "content_html": null, "url": "https://zxuqian.cn/blog/difference-between-vite-and-webpack", "title": "Vite 和 Webpack 的比较与区别", "summary": "Vite 和 Webpack 都是现代前端开发中常用的打包工具，但在设计和使用上存在很大的区别。本文将详细介绍 Vite 和 Webpack 的比较与区别，帮助你选择适合自己项目的打包工具。", "date_modified": "2023-05-21T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "Vite", "Webpack" ] }, { "id": "https://zxuqian.cn/blog/how-to-write-components-using-jsx-in-react", "content_html": null, "url": "https://zxuqian.cn/blog/how-to-write-components-using-jsx-in-react", "title": "如何使用 JSX 编写 React 组件", "summary": "在 React 中，我们通常使用 JSX 来编写组件。JSX 是一种类似 HTML 的语法，它可以帮助我们更方便地编写组件，并且可以使代码更加易读和易于维护。在本文中，我们将介绍如何使用 JSX 编写 React 组件，并且将介绍 JSX 与 HTML 的区别、渲染列表、条件渲染、注册事件和传递 Props 相关知识。", "date_modified": "2023-05-06T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "React" ] }, { "id": "https://zxuqian.cn/blog/how-to-horizontally-center-an-element-using-css", "content_html": null, "url": "https://zxuqian.cn/blog/how-to-horizontally-center-an-element-using-css", "title": "10 种方法使用 CSS 水平居中一个元素", "summary": "深入了解多种 CSS 水平居中技巧，提升您的网页设计能力，打造视觉效果出众的用户体验。探索这个全面的指南，成为 CSS 居中专家！", "date_modified": "2023-03-31T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "CSS" ] }, { "id": "https://zxuqian.cn/blog/vite-config-alias-to-void-long-relative-path", "content_html": null, "url": "https://zxuqian.cn/blog/vite-config-alias-to-void-long-relative-path", "title": "配置 Vite alias 别名导入，避免冗长的相对路径", "summary": "利用 Vite alias 别名导入，可以在嵌套层次比较深的组件中，避免导入外层其他目录的组件，需要编写很长的相对路径的问题。", "date_modified": "2022-12-11T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "Vue" ] }, { "id": "https://zxuqian.cn/blog/vue-3-form-submit-event-handling", "content_html": null, "url": "https://zxuqian.cn/blog/vue-3-form-submit-event-handling", "title": "Vue3 表单提交事件处理", "summary": "这篇文章我们看一下对于表单整体的提交事件应该如何处理，并引入一个事件修饰符的概念。", "date_modified": "2022-10-04T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "Vue" ] }, { "id": "https://zxuqian.cn/blog/vue-3-common-form-controls-handling", "content_html": null, "url": "https://zxuqian.cn/blog/vue-3-common-form-controls-handling", "title": "Vue 3 常见表单控件事件处理", "summary": "常用表单组件：单选按钮、复选框、下拉菜单和文本域的数据绑定方法。单选按钮绑定的值是单一的，复选框绑定的值是一个数组，下拉菜单和文本域绑定的值也是单一的，跟文本输入框的绑定方式基本一样。", "date_modified": "2022-10-03T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "Vue" ] }, { "id": "https://zxuqian.cn/blog/vue-3-form-handling", "content_html": null, "url": "https://zxuqian.cn/blog/vue-3-form-handling", "title": "Vue 3 表单输入控件数据处理", "summary": "在 Vue 中处理表单输入数据处理有两种方式，一种是使用传统的事件监听方式，另一种是使用 v-model，这篇文章我们看一下如何使用事件监听的方式处理表单输入数据。", "date_modified": "2022-10-01T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "Vue" ] }, { "id": "https://zxuqian.cn/blog/vue-methods-vs-watchers", "content_html": null, "url": "https://zxuqian.cn/blog/vue-methods-vs-watchers", "title": "Vue methods 方法和 watch 监听器的区别", "summary": "Methods 和 Watch 之间其实并没有什么太大的可比性，只是当 methods 方法作为 computed 计算属性那样使用时，那么它和 Watch 监听器之间的区别和计算属性跟监听器中间的区别就很类似了，当在 HTML 模板中调用方法时，会把方法的返回值计算出来并显示", "date_modified": "2022-09-24T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "Vue" ] }, { "id": "https://zxuqian.cn/blog/vue-computed-and-watch-difference", "content_html": null, "url": "https://zxuqian.cn/blog/vue-computed-and-watch-difference", "title": "Vue computed 计算属性和 watch 监听器的区别", "summary": "计算属性和 watcher 监听器都可以监听 data 中的数据的变化，然后根据具体的业务逻辑对数据进行操作。它们两个的区别是，computed() 计算属性一般是把 data 中的数据进行一番包装和计算之后，返回新的值，例如对数组进行过滤后的值，而并不会直接修改 data 中的属性...", "date_modified": "2022-09-19T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "Vue" ] }, { "id": "https://zxuqian.cn/blog/vue-computed-vs-methods", "content_html": null, "url": "https://zxuqian.cn/blog/vue-computed-vs-methods", "title": "Vue 计算属性和方法的区别", "summary": "计算属性、方法和监听器这三种方式是有一定的区别的，但有时候也并不严格区分，接下来的几节课我们看一下它们的区别，之后你就会自己决定什么时候使用哪一个了", "date_modified": "2022-09-16T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "vue" ] }, { "id": "https://zxuqian.cn/blog/vue-watch-props-change", "content_html": null, "url": "https://zxuqian.cn/blog/vue-watch-props-change", "title": "Vue 3 使用 watch 监听数据的变化", "summary": "我们知道在 Vue 应用中，当 data 里边的属性变化的时候，HTML 模板中使用到这个属性的地方，会自动更新，但是如果我们想在 JavaScript 中，监听某个属性的变化，并做一些操作，该怎么办呢？这个时候可以使用 Vue 提供的 watch 选项，为属性添加一个监听器。", "date_modified": "2022-09-08T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "Vue" ] }, { "id": "https://zxuqian.cn/blog/vue-3-methods-tutorial", "content_html": null, "url": "https://zxuqian.cn/blog/vue-3-methods-tutorial", "title": "Vue 3 中的 methods 方法使用教程", "summary": "我们在 createApp() 的参数对象中，传递一个 methods 配置对象，在它里边可以添加应用程序会用到的方法，之后就可以在 html 模板中使用了，一般我们把方法用作 html 元素的事件处理函数，直接在对应的事件监听处，写上方法名就可以了。", "date_modified": "2022-09-03T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "Vue" ] }, { "id": "https://zxuqian.cn/blog/how-to-learn-any-programming-language", "content_html": null, "url": "https://zxuqian.cn/blog/how-to-learn-any-programming-language", "title": "如何学会任意一门编程语言", "summary": "市面上的编程语言越来越多，如果你考虑到后续的工作中有可能需要用到新的编程语言，或者你想转型成新的、热门的编程语言开发，那么就可能会有这样的顾虑：到底需不需要学习新的编程语言？如果要学的话，该怎么快速的学会？这篇文章我们就来看看，为何要学习多门编程语言，以及如何学会任何一门编程语言。", "date_modified": "2022-08-19T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "编程", "学习方法" ] }, { "id": "https://zxuqian.cn/blog/how-to-use-computed-deal-with-complex-logic", "content_html": null, "url": "https://zxuqian.cn/blog/how-to-use-computed-deal-with-complex-logic", "title": "Vue 3.x: 使用 computed 计算属性处理稍复杂的业务逻辑", "summary": "我们通过给 Vue.createApp() 的参数对象中，添加一个 computed 属性，来定义计算属性，每个计算属性都是一个函数，在函数里边可以进行一些简单的数据计算，并且它能够通过 this 来访问 Vue 实例里的内容，例如 data() 函数返回的对象属性。之后，在 html 模板中，就可以直接使用函数名来访问计算属性的值了。", "date_modified": "2022-08-17T00:00:00.000Z", "author": { "name": "峰华前端工程师", "url": "https://github.com/zxuqian" }, "tags": [ "前端", "Vue" ] } ] }