Bucky's f2e bucket

前端玩久了，最近想接觸一下後端看看。但是後端語言這麼多，改選哪種呢？最後我選了 Ruby，她的語法看起來很有趣，而且平常工作上用不到，這樣才有想玩的動力吧XD Ruby 環境安裝首先從安裝環境開始。可以直接從官網下載，或是使用 RVM 來管理並下載任何版本，本篇文章介紹的是使用後者的方法。 （本篇文章是用 Mac 環境安裝） 什麼是 RVM？RVM 是一種 Ruby 的版本管理套件，它可以讓使用者根據不同需求來安裝不同的版本使用。 相關介紹可以在 RVM 網站可以看到更多。 開始安裝 RVM 在 Terminal 輸入： 1$ \curl -sSL https://get.rvm.io | bash -s stable 接著確認有無安裝成功，輸入： 1$ rvm -v // 有顯示版本就代表安裝成功 開始安裝 Ruby 看看目前有哪些版本提供安裝： 1$ rvm ls known 接著輸入想要安裝的版本，例如 3.0： 1$ rvm install 3.0 確認有無安裝成功： 1$ ruby -v // 有顯示版本就代表安裝成功 Ruby 的 He ...

在公司專案中，有多筆資料是從 actions 的回傳結果再透過 mutations 來更改資料狀態。這時候想要透過 computed 來處理這些資料，但是還要再把資料傳入 components 中再做處理，感覺總是沒那麼即時，如果在 Vuex 裡面也可以做 computed 就好了…咦？還真的有嗎！？太方便了吧！ 需求我的資料有複數筆陣列，結構如下示範： 123const list_one = ['A001', 'A002', 'A003', 'A004'],const list_two = ['B001', 'B002', 'B003'],const list_three = ['C001', 'C002', 'C003', 'C004', 'C005'] 我的需要是將複數筆陣列的資料給合併成一個陣列，然後再去做資料處理。 Getters 的 ...

Vue 3 正式版問世也一段時間了，也是時候來認識一下新朋友了，前端就是要不停地追技術啊0.0 前言自從 Vue 3 的消息不斷傳出，相信主力開發工具為 Vue 的前端工程師也多少都有耳聞，小弟我也不例外，常常會跟朋友討論相關訊息。而當正式版（代號：one piece）發布之後，全世界前端大概都開始了尋找大秘寶之旅。 雖然公司目前專案大概也還不到使用 Vue 3 的時機，但是多了解新技術總是不會錯。剛好 Vue.js Taiwan 的主辦人 - Kuro 大大，在過年前出了一本 Vue 3 的書 - 重新認識 Vue.js：008天絕對看不完的 Vue.js 3 指南，想趁著過年期間來學一下，本系列就是紀錄我學習 Vue 3 的歷程，那麼就開始吧！ 安裝 如果想要小試一下的話，可以使用 CDN 的方式來掛載，只要加上： 1<script src="https://unpkg.com/vue@next"></script> 有經驗的開發者想透過 Vue-CLI 的話： 12$ npm install -g @vue/cli$ vue cr ...

Vue Cropper 這個套件使用起來非常方便，而且剛好符合我的需求，只需要看著文件設置一些設定就可以做出變化了。 前言當主管告知需要在後台將前台的圖片做剪裁修改後，並且能夠即時預覽結果，最後再將圖片存成新檔案。找了一下有沒有前人造的輪子，發現還真的有，所以設置了一下後就可以達到我要的效果了。 Vue Cropper 安裝 123npm install vue-cropperyarn add vue-cropper 在 component 裡使用 12345import { VueCropper } from "vue-cropper";components: { VueCropper,}, data 跟 methods 的設定： 1234567891011121314151617181920212223242526272829303132data() { return { modelSrc: "", option: { img ...

在 Vue 開發的 SPA 上，每次換頁總是會有一個問題，那就是換到其他頁面，畫面總是不會在最頂端，而是在上一頁的位置，這個問題以前覺得還好，但客戶要求修正這個問題，那就來修正吧！ 問題點以我所做的 side project 來說，假設當我按下認識桌遊後，接著會跳到認識桌遊的頁面，在一般的網站理所當然的會刷新然後會顯示在最頂端並且讓使用者可以從上往下看。 但是在 Vue 開發的 SPA 中，則是會顯示上一個頁面的位置，那麼接著就來說說該如何解決這個問題。 解決方法找了一下關鍵字，就找到了解法，只要使用 afterEach 這個 hook 就解決了。 在 main.js 加入 123router.afterEach((to, from, next) => { window.scrollTo(0, 0);}); 這樣就結束了，好輕鬆啊～～ 參考來源 https://blog.csdn.net/weixin_40881970/article/details/102912283

在 React 中，元件之間資料的傳遞都是由父元件傳給子元件的單向數據流，本篇文章將會講到如何使用 props 來傳遞資料。 上一篇講到 component 的使用，但是有些時候想要另外客製化不一樣的內容的話，不就還要做出好幾個不一樣的 component 嗎？ 例如下面的 Codesandbox 有兩個 button，按下按鈕就會跳出訊息。 但是如果想要做出一個 component，然後內容不要寫死可以自定義的情況下，該怎麼做呢？ props 的運用這時候就可以透過 props 來做出想要的效果，例如在 CustomButton.js 這個 component 中： 加入參數 props。 123const CustomButton = (props) => { return <button></button>;}; 定義一個變數並使用它，等等可以在父層輸入客製化內容。 1234const CustomButton = (props) => { c ...

在一個專案中，通常不會在一個頁面放入太多的 HTML 結構，這樣會變得難以維護。前面也有提到如何拆分成 component，本篇文章則是講解如何在透過 creat-react-app 的專案中，管理各個 components。 先來看 CodeSandbox 的範例： 可以看到在 App.js 中有 3 個區塊，分別是 head、content、footer。前面的文章有提到如何拆分成 component，所以就來依樣畫葫蘆。 分成 3 個 component1234567891011121314151617const Head = () => ( <div className="head"> <h1>Head</h1> </div>);const Content = () => ( <div className="content"> <h2>This is ...

最近都在忙著面試，有些面試官人很好，如果有不懂的地方，他們會試著教你，所以我也藉由面試學到了蠻多東西（真的謝謝面試官大大）。 像是學到了 :nth-child() 跟 :nth-of-type() 這兩個的用法，回家也試著玩了一下，蠻有趣的，之後可以運用在 side-project 看看，這篇文章先來介紹這兩者的使用方法。 蝦米是 pseudo-class？pseudo-class，中文是偽類選取器，是 class 的一種，都是由一個冒號作為開頭，例如常見的 :hover。 :nth-child() 怎麼用？不囉嗦，直接看用法 See the Pen choose num 4 by Bucky Chu (@bucky0112) on CodePen. 可以看到如果想要指定某個物件改變樣式的話，就可以使用 :nth-child(n)，數值從 1 開始算起，所以如果要選第 4 個，那就是輸入 4；如果要選擇 1、2、5 的話，就可以這樣寫： 12345ul :nth-child(1),ul :nth-child(2),ul :nth-child(5) { co ...

在 Vue 中使用 v-model 來做表單輸入時非常好用，那麼在 React 中可以怎麼運用呢？本篇文章將會介紹該怎麼利用 Hook 來做類似的效果。 利用 useState 綁定數值首先，先看一下完成的程式： See the Pen React 的表單輸入運用 by Bucky Chu (@bucky0112) on CodePen. 當輸入數字時，另一個顯示的欄位就會即時顯示輸入的數字，那麼就一步一步地來看是如何做出來的。 載入 useState 方法 1const { useState } = React; 使用 useState 方法 12// [state, '改變 state 的方法'] = useState(預設值)const [inputNum, setInputNum] = useState(0); 定義事件處理器 12345// 在 React 中，一般會使用 handle 開頭命名事件處理器const handleInputNum = (e) => { const { val ...

在逛 GitHub 看別人的 React 專案時，似乎都是使用 Create React App 來開發居多，比較少見使用 CDN 的模式，所以本篇文章將會講解如何入門使用 Create React App 來建立一個專案，並會簡單跟 Vue CLI 做一下比較。 什麼是 Create React App？Create React App (CRA) 是一款由 React 官方開發的 CLI 工具，可以讓開發者不用再擔心建置環境，可以專心地寫 Code 就好。 開始專案首先開始之前，要先確認一下電腦中是否有 Node.js 跟 NVM，還沒安裝過可以看一下我在 Vue CLI 的教學。 都搞定之後，就可以來使用 Create React App 了。 在終端機輸入指令，在 create-react-app 後面的就是要建立的專案名稱，接著就會開始建置專案： 1$ npx create-react-app first-app 完成之後就 cd 到專案資料夾中，並執行指令啟動 React 專案： 12$ cd first-app$ npm start 沒問題的話，就會自動開啟瀏覽器 ...