原创 評分組件 Rate 的別樣解法

各種偏門捷徑實現如圖所示的評分組件   一、低配版 const rate = (num) =>"★★★★★☆☆☆☆☆".substring(5 - num, 10 - num); 沒錯，只需一行代碼就能實現評分（狗頭） 雖然星星的樣式

2020-12-25 13:31:25

原创 Vue3.x 從零開始（六）—— Router + Vuex + TypeScript 實戰演練（下）

在上一篇實戰演練中，已經將項目搭建好，並介紹了 Router、Vuex 的基本用法 接下來會以一個 Todo List 項目來介紹實戰中如何使用 Composition API   一、輸入框與列表（按鍵別名 + computed 類型聲明

2020-11-06 13:48:21 4

原创 Vue 項目在 style 標籤內使用全局 less 變量

問題描述： 使用 Vue CLI 創建的項目，在 index.less 文件中定義了一個變量 並在 main.js 中引入 在組件中使用該變量的時候依然會報錯     解決方案： 使用 style-resources-loader

2020-10-28 13:48:21

原创 Vue3.x 從零開始（四）—— 更完善的組件傳參

在如今的前端開發工作中， 組件之間的參數傳遞是一個非常常見的問題 Vue 2 已經有了一套非常實用的組件傳參機制，Vue 3 在原本的基礎上做了些改進     一、父組件傳參到子組件 在《Vue3.x 從零開始（二）—— 重新認識 Vue

2020-10-17 13:48:32

原创 Vue3.x 從零開始（三）—— 使用 Composition API 優化組件

在《Vue3.x 從零開始（二）》中已經介紹了 Mixin 這種抽取公共邏輯的方式  但 Mixin 提供的數據或函數，無法在組件中直觀的體現出來 這導致組件的維護人員需要非常熟悉被引入的 Mixin 對象，不然出現重名的情況就容易出現意料

2020-10-13 13:48:26 1

原创 Vue3.x 從零開始（二）—— 重新認識 Vue 組件

Vue 3 更新了許多組件中的語法，包括生命週期、filter、setup、teleport 等 爲了介紹這些特性，需要先了解一下 Vue 組件的基本玩法 這篇文章介紹的內容基本都是沿用 Vue 2 的語法，只在一些細節上有所調整   一、

2020-10-01 13:48:27

原创 Vue3.x 從零開始（一）—— Vue-cli or Vite 構建 TypeScript 項目

千呼萬喚始出來，2020 年 9 月 19 日凌晨，Vuejs 3.0 終於發佈了，代號：One Piece 作爲一名從 Vue 1.x 就開始接觸 Vue 的老玩家，心裏只有一句話想說：學不動了... 但學不動也得學...   原本打算寫

2020-09-25 13:48:16

原创 深度刪除對象/數組中的空字段

問題描述： 將對象中的空字段刪掉，比如這樣的一個對象： const obj = { name: 'wise', age: 0, info: '', key1: null, key2: undefin

2020-09-24 13:48:37

原创 基於 Vue + Axios 封裝上傳組件，並支持拖拽文件

一、Input File 使用  type='file'  的 <input> 元素可以選擇文件，基於此我們可以封裝自定義的上傳組件 <input type="file"> 可以接收四個附加屬性： accept: 字符串，允許選擇的文件類型

2020-09-02 12:55:32

原创 秦風·起

一、 秋風蕭瑟，晨光熹微。   長平關以南，丹水以東，整整三年堅守不出的趙軍大營，在正面擊退了秦軍的一次進攻之後，終於主動發起了一次聲勢浩蕩的進攻。 趙軍統領趙括自領十萬胡服步卒爲中軍方陣，另各設五萬胡服騎兵爲左右兩翼，更有三十萬主力大軍伺

2020-08-04 12:55:55

原创 Node.js 蠶食計劃（七）—— MongoDB + GraphQL + Vue 初體驗

首先需要搭建一個簡單的應用 前端部分不多贅述，如果確實沒接觸過 Vue 項目，可以參考我的《Vue 爬坑之路》系列 後端服務可以參考之前的文章《Node.js 蠶食計劃（六）—— MongoDB + Koa 入門》 完整的項目地址：http

2020-07-25 12:55:38

原创 Node.js 蠶食計劃（六）—— MongoDB + Koa 入門

一、安裝 MongoDB 1. 在 Windows 環境下安裝： // Windows 7 / Server 2008 R2 以上的版本 打開官網鏈接 https://www.mongodb.com/try/download/communi

2020-07-16 12:55:42

原创 這個遞歸不太難

這個遞歸不太難 相信大家都知道什麼是遞歸，但在實際開發的時候用過多少次遞歸呢？ 程序的世界有句話叫“人用循環，神用遞歸”，很多情況下我們都會優先使用循環而不是遞歸。我和幾個朋友聊過，他們的看法是：“相比循環而言，遞歸性能更差，而且更不可控

2020-07-03 12:54:26

原创 JavaScript 隨機生成車牌號

其實僅僅是因爲想不出車牌號，乾脆寫一個函數隨機生成算了...   問題描述 批量生成 兩個字母 + 三個數字 的隨機數   解決方案 function getRandomByStr(len = 3, s) { if (!s) {

2020-06-08 13:13:06

原创 用正則匹配富文本中的文本，並替換其內容

問題描述： 有這樣的一段字符串： "<p class='test' id='wise'>123 456 789<br>hello<span title='hello' style='width: 200px;height:100px;'

2020-05-22 13:34:25