iT邦幫忙

菜鳥前端相關文章
共有 166 則文章

技術 Vuex 是什麼

Vuex 是 Vue 提供的一種資料狀態管理的模式,它可以統一控管資料的狀態,都是在小型的 SPA 網站,元件資料的傳遞可以透過 props ,但如果是大型的...

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

技術 每天來點 Vue.js 吧 目錄&總結

tags: Vuejs 本次鐵人作為進入 Vue 3 的前的粗淺回顧,簡單介紹了 Vue 2 官網的內容,雖然有許多不足,中段開始時間調控上做的也不如預期,但在...

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

技術 Vue 動態組件

tags: Vuejs 動態組件 ✐ 動態組件可以幫助我們動態切換組件,例如在網頁的多標籤介面中常見到動態切換組件的需求,便是動態組件能幫忙的場景之一。 使用...

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

技術 Vue slot:作用域插槽、具名插槽的縮寫

tags: Vuejs 作用域插槽 <slot> 內容在父模板編譯,基於 Vue 的定義,在父模板中編譯的內容訪問 parent scope,在子模...

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

技術 Vue slot: 具名插槽

tags: Vuejs 具名插槽 ✐ 若是需要多個插槽,可以在 <slot> 中使用 name attribute,定義命名的插槽,可以定義具有多個...

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

技術 Vue slot:編譯作用域、後備內容

tags: Vuejs <slot> 是什麼? ✐ Vue 中的 <slot> 是 Vue 內置的組件 build-in compone...

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

技術 Vue 透過 `$listeners` 在子組件特定元素上監聽原生事件

tags: Vuejs 監聽子組件原生事件 ✐ 當父組件需要接收子組件訊息、數據時,可以透過在子組件 自定義事件 達成,除此之外若是需要監聽子組件 根元素 原生...

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

技術 對 Vue component 傳入非 Prop 的 attribute

tags: Vuejs Vue component 可以傳入 prop attribute 以及 non-prop attribute 兩種 attribute...

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

技術 Day30: 完賽心得

第30天,不免俗要來寫個完賽心得 雖然javascript-30還差個幾天,才能把全部的實例都做完 但還是要給自己拍拍手,利用這30天養成了一個好習慣 而且真的...

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

技術 Day29: Event Capture, Propagation, Bubbling and Once

WES BOS系列影片 Alex快速導讀系列影片 今天比較偏觀念的講解 主要是希望能較深入理解addEventListener() 學習DOM的事件機制,包括事...

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

技術 Vue component 上該如何使用 v-model ?

tags: Vuejs v-model ✐ v-model 作用於表單元件上時,是 雙向數據綁定 的語法糖: <input v-model="n...

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

技術 Day28: Sticky Nav

WES BOS系列影片 Alex快速導讀系列影片 今天針對常用的Navbar做fix的狀態 這真的是很常見的功能,可以立馬學起來 1.先抓出NavBar的位置,...

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

技術 Vue 自定義事件 - 拋出子組件數據

Props down, Event up ✐ Prop 是數據由父組件向子組件流動的 單向數據流,也就代表子組件無法透過 Prop 更改父組件的數據(注意,盡量...

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

技術 Day27:Speech Synthesis

WES BOS系列影片 Alex快速導讀系列影片 今天來認識 Web Speech API中的兩個功能 一個是 SpeechSynthesisUtterance...

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

技術 How to find your passion as a Software Developer - Evan You

tags: Vuejs How to find your passion as a Software Developer ✐ 在連假的最後一天,一樣來一些輕鬆的...

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

技術 Day26: Follow Along Links

WES BOS系列影片 Alex快速導讀系列影片 ​ 今天的練習是用js控制滑鼠游標, 當滑鼠游標到達當前的連結時, 我們使用一個新的方法 getBoundin...

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

技術 Seeking the Balance in Framework Design

tags: Vuejs Seeking the Balance in Framework Design ✐ 在中秋連假倒數兩天的今天,作為放鬆,來分享之前看的...

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

技術 Day25: Adding Up Times With Reduce

WES BOS系列影片 Alex快速導讀系列影片 今天的練習會用到reduce() 還有用一些數學的運算,將秒數換算成時分秒 然後又複習了一下dataset的用...

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

技術 Vue component 父組件向子組件傳遞數據的方法 - Prop(下)

tags: Vuejs 前言 ✐ 上一篇中說明了透過 Prop,我們可以將父組件的值傳遞給子組件,這一篇中,我們會來看 Prop 的使用細節。 命名規則 ✐ 在...

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

技術 Day24: Sort Without Articles

WES BOS系列影片 Alex快速導讀系列影片 ​ 今天要結合正規表達式跟sort()來做排序的功能 作者這邊假設了一個情境 就是我們拿到了一串樂團的清單,...

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

技術 Vue component 父組件向子組件傳遞數據的方法 - Prop(上)

tags: Vuejs 組件間的傳遞數據的方法 ✐ 在 Vue 之中,組件之間的數據並不共用,換句話說,組件之間若是需要傳遞數據,需要透過幾種方式進行: 以下列...

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

技術 Day23: Mouse Move Shadow

WES BOS系列影片 Alex快速導讀系列影片 今天的練習重點是抓取DOM容器的座標與mousemove事件 我們要做一個文字陰影與滑鼠互動的效果 要做出這個...

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

技術 Vue components 組件的抽象概念 ✏︎

tags: Vuejs 組件的抽象概念 ✐ 註:下方 component 和 組件 一詞意思相同。 component 在 Vue 中是一個重要的概念,照...

鐵人賽 Modern Web DAY 30

技術 【D30 - 期待與各位再次見面】前端學到暈島隆重閉幕!

恭喜各位如果是從之前一步一步走來的人~ 那你已經擁有了基本的前端工程師必備技能!! 前言 我們在從一開始的那個地圖來看起,驗收一下我們這一路走來到底走過哪裡...

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

技術 Day22: LocalStorage(二)

我們就必須使用LocalStorage 來讓瀏覽器記住剛才輸入的資料 紀錄完成後,同時將表單的回復成未輸入的狀態 localStorage.setItem('i...

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

技術 Vue 雙向數據綁定的語法糖 v-model ✔︎

很久以前做的 form 練習 使用表單元件 <textarea>、<input>、<select> 時,通常需要用戶的...

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

技術 Day21: LocalStorage(ㄧ)

WES BOS系列影片 Alex快速導讀系列影片 今天要來認識 LocalStorage 看不太懂的話,這裡也有一篇我覺得寫得很好理解的筆記可以參考 local...

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

技術 v-for 列表渲染

tags: Vuejs v-for ✐ v-for 指令可以使我們方便的渲染 Array 成為列表,在渲染列表相關的 data 時十分方便,並且 v-for 除...

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

技術 Day20: JS中引用與複製的差異(二)

今天針對物件來看引用與複製的差異 先創造一個簡單的物件 const person = { name: 'Wes Bos', age: 80 }; 再製...

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

技術 Vue 事件處理

v-on 要對模板中的元素添加 Event Listener,Vue 提供 v-on 指令可以針對 元素 綁定 Event Listener,並在事件發生時調用...