iT邦幫忙

菜鳥前端相關文章
共有 310 則文章
鐵人賽 自我挑戰組 DAY 9
每天來點 Vue.js 吧 系列 第 9

技術 Vue computed 與 watch 差異

Fixing ... 若是文中有任何錯誤、錯字、想討論的內容,歡迎各位大大不吝鞭笞指正、交流分享,筆者不慎感激 ✦ ✦ ✦ ▶︎ 筆者 github:http...

鐵人賽 Modern Web DAY 16
實作經典 JavaScript 30 系列 第 16

技術 Day16: 自製的影片撥放器(二)

今天首先要控制音量大小與調整播放速度 1.先設定會使用到的函式名稱 function handleRangeUpdate() { console.log(t...

鐵人賽 Modern Web DAY 15
實作經典 JavaScript 30 系列 第 15

技術 Day15: 自製的影片撥放器(一)

WES BOS系列影片Alex快速導讀系列影片 今天要來製作自己的影片撥放器,覺得原始的控制套件很醜?那就自己做一個,不過作者已經幫我們做好樣式了。我們還是注重...

鐵人賽 自我挑戰組 DAY 7
每天來點 Vue.js 吧 系列 第 7

技術 Vue computed property `getter` 與 `setter` 的那些事

Computed Property ✐ 在 computed 中設置的 property 稱為 Computed Property 計算屬性,Computed...

鐵人賽 Modern Web DAY 22

技術 【D22 - Dynamic & Async】ㄟ~組件你不要給我亂動!

今天又要講到一些概念了~ 因為昨天我們不小心遇到了兩個好傢伙XD (async, await),所以我們直接開始今天主題吧! 前言 我們會講到: Dyna...

鐵人賽 Modern Web DAY 14
實作經典 JavaScript 30 系列 第 14

技術 Day14: 一次選取想要選取的checkbox

WES BOS系列影片Alex快速導讀系列影片 今天要嘗試做一個todo-list的小功能,按下shift鍵時,可以一次勾選代辦事項。 1.首先抓出所有chec...

鐵人賽 自我挑戰組 DAY 6
每天來點 Vue.js 吧 系列 第 6

技術 Vue template 模板語法

tags: Vuejs Vue template ✐ 還記得前一章節 option 裡的 template 嗎?Vue 提供開發者透過 template 聲明式...

鐵人賽 Modern Web DAY 13
實作經典 JavaScript 30 系列 第 13

技術 Day13: 認識console

WES BOS系列影片Alex快速導讀系列影片 今天比較輕鬆,作者帶我們深入了解console的一些使用方法,記錄下來,也許那天突然就會用到也不一定。 作者有準...

鐵人賽 自我挑戰組 DAY 5
每天來點 Vue.js 吧 系列 第 5

技術 Vue instance 生命週期 ✦

tags: Vuejs Instance Lifecycle 生命週期 ✐ 介紹完如何使用 new Vue({...}) 建構 Vue instance 後,接...

鐵人賽 Modern Web DAY 12
實作經典 JavaScript 30 系列 第 12

技術 Day12: 在Canvas畫布上,用滑鼠畫畫(二)

今天可以再來玩一些Canvas的功能 1.更改畫筆的顏色,讓畫筆畫出彩虹的顏色這邊是使用HSL色彩概念,HSL即色相、飽和度、亮度(hue,Saturation...

鐵人賽 自我挑戰組 DAY 4
每天來點 Vue.js 吧 系列 第 4

技術 一切的基礎:Vue instance

tags: Vuejs Vue reactivity system ✐ Vue 引入 data-driven view 的概念,一旦改動 data,與之相對應的...

鐵人賽 Modern Web DAY 11
實作經典 JavaScript 30 系列 第 11

技術 Day11: 在Canvas畫布上,用滑鼠畫畫(ㄧ)

WES BOS系列影片Alex快速導讀系列影片 今天要用滑鼠在網頁上畫畫。初探Canvas元素的使用方式,可與MDN的Canvas教學手冊搭配服用但若是只想知道...

鐵人賽 自我挑戰組 DAY 3
每天來點 Vue.js 吧 系列 第 3

技術 工欲善其事,必先利其器 ⚙︎ Vue 開發環境建置

tags: Vuejs 如何開始使用 Vue ✐ Vue 一共提供三種不同的方式可供我們使用,依照使用情境的不同可以選擇不同的方式。 方法 適合場景...

鐵人賽 Modern Web DAY 18

技術 【D18 - 用Vue實作網頁】做出一個美美的部落格

今天會用到之前所有的所學~ 如果還沒跟上進度的話建議你要先看之前的 (標題有用vue實作網頁),或是到我的 github 上面去看code! 前言 我們前三...

鐵人賽 Modern Web DAY 10
實作經典 JavaScript 30 系列 第 10

技術 Day10: 針對陣列的操作練習(三)

WES BOS系列影片Alex快速導讀系列影片 開始前一樣可以先讀這篇卡斯伯的大補帖https://wcc723.github.io/javascript/20...

鐵人賽 Modern Web DAY 17

技術 【D17 - Vue說他願意共用!?】Vue 的 Mixins

我這次標題直接給她猛烈的亂下,但其實Mixins就真的是代表一個 讓元件共用的方法,Mixin 就是指這個共用的元件,而這個元件可以包含任何的componen...

鐵人賽 自我挑戰組 DAY 2
每天來點 Vue.js 吧 系列 第 2

技術 Vue 原來是法語? Vue 的超簡短歷史介紹

tags: Vuejs TL;DR ✐ 要了解 Vue 的簡短歷史,筆者推薦可以自這部由 Honeypot 在 2020.02.24 發布的 Vue.js: T...

鐵人賽 Modern Web DAY 9
實作經典 JavaScript 30 系列 第 9

技術 Day09: Ajax Type Ahead with fetch()(二)

WES BOS系列影片Alex快速導讀系列影片 再來,進入學習的第二個重點部分-嘗試利用正規表達式來篩選資料在此之前,先將前置作業完成1.先抓出需要設置監聽器與...

鐵人賽 Modern Web DAY 1

技術 【Day1 】前端?後端?讓你從餐廳輕鬆了解吧

在使用wordpress主題的時候,是不是總是有些地方感到不滿意,希望在後台進行修改,進行客製化設計,卻總是苦於對打程式碼毫無理解,不知從何入手?是不是了解了w...

鐵人賽 自我挑戰組 DAY 1
每天來點 Vue.js 吧 系列 第 1

技術 前言

tags: Vuejs 前言 在開始之前,先簡單的自我介紹 ~ 筆者是名新手前端工程師,過往是平面設計師,目前學習前端約 1 年半的時間,本篇鐵人會集中在 Vu...

鐵人賽 Modern Web DAY 16

技術 【D16 - 用Vue實作網頁】等等!!我還對JacaScript不熟www

昨天寫到了一串code,如果對於JS沒有基礎的人可能會頭很大XD .then(function(data) { this.blogs = data....

鐵人賽 Modern Web DAY 8
實作經典 JavaScript 30 系列 第 8

技術 Day08: Ajax Type Ahead with fetch() (一)

WES BOS系列影片Alex快速導讀系列影片 學習重點:1.使用fetch()來發送請求,串接遠端資料2.嘗試利用正規表達式來篩選資料 使用fetch()來發...

鐵人賽 Modern Web DAY 15

技術 【D15 - 用Vue實作網頁】牽著for的手,帶你走forever

我朝思暮想想了又想~ 覺得這個project可以先暫訂拿來做一個小部落格的樣子,而再開發一個部落格時候,我們可以有小到大去開發! 甚麼意思? 就是說部落格應該...

技術 Vue Cli 3 部屬到 Github 上 ( windows )

Vue Cli 部屬到 Github 上,研究了許久,以下這裡做步驟筆記,這裡是以 windows 系統為主,需要先安裝 Git 工具,連結放在最下面: 在桌...

鐵人賽 Modern Web DAY 7
實作經典 JavaScript 30 系列 第 7

技術 Day07: Flexbox + JavaScript 製作手風琴版面

WES BOS系列影片Alex快速導讀系列影片 作者可能怕我們忘記flex怎麼用,在中間穿插了這個課程, 練習JS之餘,也能夠再複習一下flexbox所以在一開...

鐵人賽 Modern Web DAY 14

技術 【D14 - Vue也有生命!?】Vue 的 life-cycle

前言 今天要在跟各位插播一個概念,因為之後會用到,這也是在Vue的世界裡面相當重要的概念: 就是 life-cycle hook! Hook 本身有鉤子的意思~...

鐵人賽 Modern Web DAY 6
實作經典 JavaScript 30 系列 第 6

技術 Day06: 針對陣列的操作練習(二)

WES BOS系列影片Alex快速導讀系列影片 做完基礎陣列練習後,來做些進階的練習 進階練習目標 :6.Sort the inventors by years...

鐵人賽 自我挑戰組 DAY 1
溫故知新 JavaScript 系列 第 1

技術 Day1 - 前奏

HI 大家好,我是 AWEI首次參加IT邦鐵人賽,這次想透過 30 天的時間帶大家一起來認識 JavaScript ,至於為什麼會叫溫故知新JavaScript...

鐵人賽 Modern Web DAY 5
實作經典 JavaScript 30 系列 第 5

技術 Day05: 針對陣列的操作練習(一)

WES BOS系列影片Alex快速導讀系列影片 開始前建議可以先讀這篇卡斯伯的大補帖https://wcc723.github.io/javascript/20...

鐵人賽 Modern Web DAY 4
實作經典 JavaScript 30 系列 第 4

技術 Day04:用CSS + JS 做一個時鐘

WES BOS系列影片Alex快速導讀系列影片 原作者的時鐘版本比較簡易些,對於時間的算式也比較不直覺,而Alex大大的版本將時鐘做得更細緻,時間算式也更完整。...