iT邦幫忙

菜鳥前端相關文章
共有 191 則文章
鐵人賽 Modern Web DAY 4
實作經典 JavaScript 30 系列 第 4

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

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

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

技術 Day03:來做個鍵盤鼓手(二)

接續第一天的練習, 我們成功加上了樣式,卻沒有移除它。 開始來想辦法在我們不需要這個樣式時,將它移除 JS的監聽器也是可以監聽元素的變化, 這時我們監聽的動作會...

鐵人賽 Modern Web DAY 10

技術 【D10 - Directives】今晚,我想對DOM做點甚麼?

前言 昨天講到了{{}}這個Vue的雙下巴之外,也提到了一些資料綁定 (Data Binding)的部分~ 但Vue可以綁定得遠遠不只頁面上的內容,Vue也可以...

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

技術 Day02:來做個鍵盤鼓手(一)

WES BOS系列影片 Alex快速導讀系列影片 Day01-JavaScript Drum Kit 思考需要的功能 1.按鍵按下後需要發出聲音 2.發出聲音的...

鐵人賽 Modern Web DAY 9

技術 【D9 - Vue的雙下巴】Vue模板語法 -- {{Mustache}}

首先我們要先了解甚麼是模板語法? 而甚麼是模板? 模板 模板其實跟render function 是一樣的運作模式的~ 我們會將模板編譯成為render fun...

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

技術 Day01:開賽廢言與自我介紹

壓根都沒想到自己會跟【鐵人】這兩個字,有任何的關係。 本人真的超級三分鐘熱度,小時候學才藝都很容易半途而廢的類型... 不知道哪根筋不對,跑來參加鐵人賽,希望未...

鐵人賽 Modern Web DAY 8

技術 【D8 - Vue架構】 沒有架構怎麼鬥得過Vue!?

前言 昨天開了一個Vue的專案~ 不知道各位看過一下file 了沒有 這些檔案是啥啊!!?? 先來說說每一個file大概的意思~ node_modules...

鐵人賽 Modern Web DAY 7

技術 【D7 - 直接開啟專案】VueJs要怎麼樣開始學?

Vue: 終於輪到我出場了啦!! ...代表各位終於可以開始做出一個專屬自己的個人網站了!!! 概念先打好 VueJs 是一個前端框架,一個開源(open...

鐵人賽 Modern Web DAY 2

技術 【D2 - 前端島生存守則】先拿好你的地圖

要能學好前端有非常多條路~ 我自學期間合作開發了很多專案包括到職場去進修,其實大家的開發流程根所需技術都是不一樣的 所以我在這邊統整出一個前端地圖~如果想要做...

技術 2020 六角學院 - JS 實戰班心得文章

當初為什麼報名這堂課? 買了許多線上課程,要鞭策自己每天都學習,還要能整理筆記,對於我這種毅力不夠的人,簡直就是買來放心安的。 因此自己的轉職道路才遙遙無期,...

技術 前端入門-VS code安裝與前端套件介紹

小弟在前端打滾多年 最近發現有越來越多人想學習前端 首先我們需要先安裝一個寫code的環境 1. 安裝vs code 市面上的IDE(整合開發環境)百百種...

技術 Vue 之 Vue.filter()

Vue.filter() 可以用做單一值的修改,例如:為數字加上千分位逗號、轉換時間格式...等 基本的結構會如下: <div id="app&...

技術 JavaScript ES6 - 創建自己的 Promise & 鏈接技巧

這裡來試著創建自己的 Promise 來處理看看非同步 ~ 首先用函式建構式創建函式,接著 return 一個 new Promise,並把 resolve(成...

技術 JavaScript ES6 - Promise

Promise 是 ES6 用來處理非同步的一種方法,至於是處理什麼問題呢? 非同步寫法不一致 非同步程式碼過巢 無法同時執行 以 jQuery 來說 aj...

技術 JavaScript ES6 - 箭頭函式(arrow function)

箭頭函式不同於一般傳統函式,可以帶來更直觀更簡潔的寫法。 箭頭函式結構: 傳統函式如下: const Fn = function (){ return...

技術 Git 學習筆記 (上)

Git 是一種版本控制的軟體,在早期開發時,可能會透過在資料夾的命名上來做為版本控制的依據,但是 Git 就是為了解決這個問題出現,他不僅能做到版本控制,也能追...

技術 Vue 之溫習 component 的世界 - slot

網頁上難免有些內容,會需要差不多的架構,僅替換部分的內容,簡單來說,我們前面講到的元件拿來重複利用,只是我們要替換掉部分的內容,讓元件可以達到最佳的利用化,這時...

技術 Vue 之溫習 component 的世界 - 3

props 是從 Vue 實體傳送資料進去元件內,若是元件想要改變 Vue 實體本身的資料,這時候就會需要 emit 了 props 是一個方法,但 emit...

技術 Vue 之溫習 component 的世界 - 2

元件內的內容並非固定,有時候我們會透過 Ajax 撈資料回來再渲染到頁面上,而通常我們撈回來的資料都會存放到 Vue 實體的 data 內,這時候元件想要讀取...

技術 Vue 之溫習 component 的世界 - 1

最近又再重複的溫習了 Vue 的 component,希望能重新幫自己整理思緒 component 俗稱元件,在網頁我們每一個區塊內容都可以封裝成一個獨立的元件...

技術 Vue 之溫習 - 使用 is 動態切換元件

在某些時候,我們會希望內容在特定的情況下才顯示,例如頁籤的效果,雖然可以透過 v-if 來判斷,並顯示元件 但元件一多的時候,反而不是一個理想的方法,所以才有...

技術 JavaScript 基礎知識 - Ajax(下)

前面講到了 Ajax 用 get 的方法來撈取資料,這篇來介紹 post 的方法來傳送資料 以下是 HTML 結構: 帳號: <input type=&q...

技術 JavaScript 基礎知識 - Ajax(上)

當我們在重新刷新一個頁面時,即使使用者沒新增任何內容,瀏覽器也會重新的去撈取許多資料 為了減輕這樣的 loading,於是就有了 Ajax 技術 例如,在任何平...

技術 [鼠年全馬鐵人挑戰] Week04 - JavaScript 新手學習筆記: 運算式的求值結果

Hi~大家好 又見面啦~ 最近開始學習 JavaScript 對我來說是前端大魔王啊~~~(驚) 但是 JavaScript 在前端的世界上是扮演最重要的角色也...

技術 新手學前端-JavaScript:資訊如何帶進去的語法

Html語法: < p >這一顆紅豆餅是< em id="price">< /em >元 < /...

鐵人賽 Modern Web DAY 30
鉄人28号FX 系列 第 30

技術 鉄人28号FX 鉄人0号「試煉塔」Font Games

★ 地圖異次元空間 ↓↓↓ 顯示勇者試煉塔位置圖 歡迎來到 F.X 世界 試煉塔 [NPC]: 讓 CSS 起死回生的秘密兵器, 透過操縱者,即將啟動。 關卡機...

鐵人賽 自我挑戰組 DAY 30
從門外漢到前端新手 系列 第 30

技術 Day30 CSS:Transform: translate

Transform是CSS中,用來改變視覺格式化模型(visual formatting model)的各種型態,且它具有三維的概念,可以聲明元素的三維視覺效果...

鐵人賽 自我挑戰組 DAY 29
從門外漢到前端新手 系列 第 29

技術 Day25 CSS:Position

position是用來定位元素的屬性。它是指定top、left、right、bottom的數值,來決定元素的位置。而它的定位是依照基準來位移,基準依positi...

鐵人賽 自我挑戰組 DAY 28
從門外漢到前端新手 系列 第 28

技術 Day28 CSS:Float

Float浮動屬性 float的使用,通常是想在版面上做出文繞圖的效果,但也可以應用在元素的左右對齊。float屬性有下列定位特性: 讓元素脫離normal...

鐵人賽 自我挑戰組 DAY 27
從門外漢到前端新手 系列 第 27

技術 Day27 CSS:Display

在認識了normal flow中BFC與IFC的概念後,我們要來認識以這兩個佈局規則為基準的display屬性。display屬性也有特殊的佈局如flex及gr...