iT邦幫忙

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

技術 Day19: JS中引用與複製的差異(一)

WES BOS系列影片 Alex快速導讀系列影片 最一開始可以先試試看這兩段程式碼 let age = 100; let age2 = age; console...

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

技術 Vue Conditional Rendering 條件渲染

tags: Vuejs v-if ✐ v-if 指令可以決定是否渲染元素,該元素只有在填入的 expression 為 truthy 時會渲染。 下方為簡單範...

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

技術 Day 18 : 為網頁增加圖片動畫效果

WES BOS系列影片 Alex快速導讀系列影片 今天要為靜態的文章, 添加一些圖片進場的動畫效果 練習抓取螢幕與圖片的長度, 進而控制圖片的進場時間。 1.先...

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

技術 Vue Class Bindings

tags: Vuejs 樣式渲染 畫面的呈現有時會因應資料的不同,產生不同的視覺樣式,而通常我們會使用 v-bind 指令動態渲染 HTML attribute...

鐵人賽 Modern Web DAY 25

技術 【D25 - Vuex】給你一個方便的儲藏室!!

Vuex是一個非常方便且非常好用的的開發vue工具,他有點類似於react的redux~ 今天簡短介紹一下Vuex,明天就可以來實踐今天講到的東西囉! 甚麼...

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

技術 Day17: 為網站設計一個彩蛋

WES BOS系列影片 Alex快速導讀系列影片 今天的實例用到了cornify.js這個套件, 功能類似打電動時要放大絕招前, 一定要輸入一段指令串。 例如:...

鐵人賽 自我挑戰組 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.首先抓出所有ch...

鐵人賽 自我挑戰組 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,Saturati...

鐵人賽 自我挑戰組 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/...

鐵人賽 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 工具,連結放在最下面: 在桌...