谈谈 Vue 模板和 JSX

工具链 从学习曲线角度来讲,结合我个人体会,React 学习路线是比 Vue 陡峭的,这个和 JSX、Template 有关吗?当然有。在 React 中使用 JSX,众所周知, JSX 需要经过 Transform 才能在浏览器中运行。马上就有小伙伴反驳了,Vue 有官方的 Vue-cli, Re ... »

Markdown tricks

编辑排版 仅仅了解 Markdown 语法还不够,知道这些 排版技巧 增色您的文章内容。 空格和空行 留白,从艺术角度上说,留白就是以“空白”为载体进而渲染出美的意境的艺术。从应用角度上说,留白更多指一种简单、安闲的理念。在 Markdown 中善于使用空格和空行使文章阅读起来更加自然。 善用空格即 ... »

给你的网站添加炫酷的动画注释

前置 rough-notation 用于在网页上创建注释并设置注释动画的小型 JavaScript 库。它还可以应用在一些常见前端框架中,比如 Vue、React、 Svelte、Angular 甚至 Web Component。我把它应用在我创建的博客园皮肤中,比如你可以看见头部导航条中的博客昵称 ... »

试一试 GraphQL

GraphQL 简介 一种用于 API 的查询语言。 GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余,也让 API 更容易地随着时间推移而演 ... »

⚡ vue3 全家桶体验

前置 从创建一个简单浏览器导航首页项目展开,该篇随笔包含以下内容的简单上手: vite vue3 vuex4 vue-router next 预览效果有助于理清这些内容,限于篇幅,不容易展开叙述。由于项目逻辑简单,只使用了少量 API,我只是写这个小项目过把手瘾,所以对应标题 上手。如果您只是想学习 ... »

✍ 写一个扩展性较强的搜索主页

前置 点击按钮切换搜索引擎 搜索框跟随切换改变样式 使用 vue 最快了 template 为了方便扩展,使用 v-for 循环渲染出按钮,绑定切换搜索引擎的 method , 传入不同名称以区别搜索引擎。按钮的样式也动态绑定。 输入框动态绑定样式,在点击按钮切换搜索引擎时,搜索框绑定的样式对应的 ... »

构建一个简约博皮的过程

前置 由于之前构建的皮肤 reacg 偏二次元风,尽管提供了大量配置(包括几乎任何颜色、插件等的配置),依然有人吐槽花里胡哨,遂重新构建了一款简约风格的博客园皮肤, 正如你所见。下文我将从零介绍它的构建过程,构建它最快花费一个小时到几个小时。由于之前做了大量工作,所以现在按照流程走一遍就完事了。 准 ... »

[译] 制作 Vue 3 的过程

原文链接: https://increment.com/frontend/making-vue-3 在过去的一年里,Vue 团队一直在研究 Vue.js 的下一个主要版本,我们希望在 2020 年上半年发布。这项工作在撰写本文时还在进行中),关于 Vue 新的主要版本的想法是在 2018 年底形成的 ... »

面试官 | 说说移动端项目适配

前置 希望通过这篇文章帮助你很好的适配移动端项目,如有不足,恳请指点一二! 单位 分辨率: 单位面积显示像素的数量,和 css 无关 DPI:图像每英寸长度内的像素点数(1 英尺=30.48 厘米) css 的 px: 96 DPI 的单像素的物理大小 物理像素:在由一个数字序列表示的图像中的一个最 ... »

⚠ | 不要再使用 markdown 主题了!

前置 我在很久之前就发现了使用第三方 markdown 主题将产生一个的问题,今日在社区发现依然有人写文章来推荐这种做法。接下来我告诉你为什么最好不要这样做以及分享一些 markdown 技巧。若有不足,恳请指点! 第三方主题 在技术社区经常看见使用编辑器 markdown 主题渲染出来的文章,其目 ... »

2020年了,别再重复学习原型了

前置 原型是 JavaScript 巧妙的设计,它非常容易理解。都 2020 年了,看完这篇希望你以后不需要再重复学习 JavaScript 原型了。如有不当之处,恳请指点一二! 单词 下面是相关单词及其翻译,牢牢记住它们就成功一半了。 constructor 构造器 proto & prototy ... »

用 webpack 玩转博客园 ⛷

前置 自定义博客园样式需要一下几部分 页面定制 CSS 代码 博客侧边栏公告(支持 HTML 代码) (支持 JS 代码) 页首 HTML 代码 页脚 HTML 代码 你可能不熟悉 页首 HTML 代码 ,可以在此处放入一个 loading,因为页面加载时会最先加载这部分。总之, 页面定制 CSS ... »

Github star 1.7k 的项目源码解析

先拜读源码,最后总结,以及其他实现思路。如有错误,欢迎指正! 项目介绍 名称:Darkmode.js 功能:给你的网站添加暗色模式 项目链接:https://github.com/sandoche/Darkmode.js 使用插件 使用这个插件非常简单,只需要实例化 class,即可在页面创建一个 ... »

尴尬,通篇使用 if

以给博客园头部导航条链接添加图标为例, 接下来看看如何分别使用对象、数组、Map 优化它的。 前置 1.接下来给头部导航条添的图标包含: 博客园首页 新随笔 博客首页 联系 订阅 管理 2.这里封装了一个返回 svg 的 function, 下文的 即是调用了这个方法。 js function ic ... »

vue 组件通讯方式到底有多少种 ?

前置 做大小 vue 项目都离不开 组件通讯 , 自己也收藏了很多关于 vue 组件通讯的文章. 今天自己全部试了试, 并查了文档, 在这里总结一下并全部列出, 都是 简单 的例子. 如有错误 欢迎指正 . 温馨提示: 下文没有列出 , 也是重要且先进的组件通讯方式. props props 可以是 ... »

使 awescnb 快速构建博客园皮肤

Awescnb :dizzy: Awescnb , awesome cnblog 使博客园更美好。 简介 特性 1. 本地调试 2. 模块化开发 3. 集成插件(仅导入即可) 你可以用它做以下三件事 1. 创建: 你可以使用它快速创建自己的博客园皮肤,最后打包生成的 js 文件,供你自己使用. 2. ... »

前端构建工具: 配置抽离

前置 如果你曾使用 webpack 构建应用,就会知道如果把所有配置都写在 中那将是灾难. 正如你所见, 我现在使用的这套博客园皮肤是使用 gulp 构建的, 如果你不熟悉 gulp, 那你肯定熟悉 webpack. 下面将介绍我使用这两个工具是如何抽离配置的, 先从 webpack 开始. web ... »

从这个博客皮肤迈入前端性能优化一小步

前置 正如你所见,我现在用的这个博客皮肤,在没优化之前帧率会降到个位数. 现在与之相比,是不是好很多呀? 下面将从滚动 scroll 优化这一方面展开,主要说一下思路. 只在极少情况下会降到 30fps,一般稳定在 55 60fpx. 头部导航条 头部导航条会监听滚动条上下滚动的方向随之展开或隐藏. ... »