iT邦幫忙

vue.js相關文章
共有 1413 則文章
鐵人賽 Modern Web DAY 11
Vue.js 進階心法 系列 第 11

技術 存放資料的 state、module

在 JavaScript 中,儲存資料的方式,長這樣。 { name: 'Chris', age: 18 } 抽象資料型別 ADT 強型別語言的話,要...

鐵人賽 Modern Web DAY 14

技術 Day 14. 模板語法Template Syntax – 插值 Attribute、JavaScript 表達式

讓我們接續昨天的模板語法介紹吧,昨天講了v-once跟v-html,今天來說說屬性跟JavaScript 表達式! Attribute Mustache語法不能...

鐵人賽 Modern Web DAY 11

技術 [Day11] Storybook - Controls

Storybook 有一個很強大的輔具工具 Controls ,它提供一個 GUI 介面讓我們可以即時的調整元件的參數,必且會立即在 Canvas 中改變元件的...

鐵人賽 Modern Web DAY 26

技術 [重構倒數第05天] - 要如何再 Vue2 使用 Composition API

前言 該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章,在這邊整理了許多我自己使用Vue重構很多網站的經驗...

鐵人賽 Modern Web DAY 25

技術 [30天 Vue學好學滿 DAY25] axios API

vue.js2.0後版本推薦使用axios來完成ajax請求為Promise-based HTTP client非同步,可於then後進行操作、catch錯誤處...

鐵人賽 Modern Web DAY 16

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day16.父子組件的溝通-props

在上一篇的內容中,已經介紹到了該如何寫一個組件並完成應用了,現在再繼續進入更深一點的運用吧~對於 Vue 的實體來說,我們稱之為 父組件,而在裡面所使用的稱之為...

鐵人賽 Modern Web DAY 16

技術 不只懂 Vue 語法:為什麼需要使用 $nextTick ?

問題回答 $nextTick 的作用是等待畫面更新後才執行程式,因為有些時候我們需要操作畫面上的 DOM,例如是取得某個 DOM 節點的文字、取得某元素的高度等...

鐵人賽 Modern Web DAY 11
30天肝出購物網站 系列 第 11

技術 Day11:11 - 商品服務(2) - 前端 - 總商品資料顯示

שלום,我是Charlie! 在Day10當中我們完成了後端的商品資料API,在今天我們將完成前端顯示商品頁面跟種類的部分。 ================...

鐵人賽 Modern Web DAY 10
Vue.js 什麼意思 系列 第 10

技術 Day 10:v-for 註定綁個 key

承上篇,談到 v-for,就要說說它的最佳良伴——key。 v-for 必須綁定代表唯一值的 key 若未綁定 key 值,Terminal 會直接報錯,表示「...

鐵人賽 Modern Web DAY 10
Vue.js 進階心法 系列 第 10

技術 統一狀態管理 + 單一資料流

我一開始在學 Vuex 的時候,覺得很難懂,不知道它是在做什麼的。當時的我,就想先追朔單一資料流的始祖(應該是吧?) flux Flux 它提出了不少更新畫面的...

鐵人賽 自我挑戰組 DAY 25

技術 Day25 - 加上 jQuery UI Selectmenu

這一篇來把上一篇範例訂單項目的名稱改為下拉選單的項目 下拉選單要使用套件 jQuery UI Selectmenu Case01 ViewModel 把...

鐵人賽 Software Development DAY 10
全端工程師生存筆記 系列 第 10

技術 [面試][前端]請說明你現在專案用到的前端框架

用工具完成任務 ≠ 了解工具。 隨著時代演進,大部分的公司都採用框架來加速開發效率;自從有了框架,工程師可以更輕鬆,並且在更短的時間完成專案。 儘管做事的效...

鐵人賽 Modern Web DAY 25

技術 [重構倒數第06天] - 前端除了要做預覽圖還要把圖片變模糊 !

前言 該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章,在這邊整理了許多我自己使用Vue重構很多網站的經驗...

鐵人賽 Modern Web DAY 24

技術 Day 24:「Switch 也要換遊戲片啦~」- Slot 插槽

不知道大家有沒有買 Switch 呢? 雖然兔兔沒有 Switch,但我知道有遊戲片都不便宜呀! 然後,遊戲總會有玩膩的時候這時候就要把記憶卡插槽裡的卡片拿出...

鐵人賽 Modern Web DAY 13

技術 Day 13. 模板語法Template Syntax – 插值 v-once、v-html

昨天我們講了Vue的一生,今天來說說模板語法,看看要怎麼把vue instance中的資料變化渲染到畫面上,gogogo ─=≡Σ((( つ><)つ Vue使...

鐵人賽 Modern Web DAY 10

技術 [Day10] Storybook - Configure story rendering

在 Storybook - 基本介紹 & 安裝 有提到 .storybook/preview.js 這支 js 檔是用來控制 Story 呈現的方式,它...

鐵人賽 Modern Web DAY 24

技術 [30天 Vue學好學滿 DAY24] Vue Router-3

router-link to 函數 指定導向,包含以下方法 <!-- 直接指定路徑 --> <router-link to="/&q...

鐵人賽 Modern Web DAY 15

技術 不只懂 Vue 語法:請說明 keep-alive 以及 is 屬性的作用?

問題回答 <keep-alive> 的作用是緩存一個元件的資料狀態,即使它被切換掉,不再呈現在畫面上時,它的資料狀態依然會把存起來,並不會像一般元件...

鐵人賽 Modern Web DAY 15

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day15.組件介紹

當我們有時候某個功能的重複運用性較高,但每次都還要再寫一個一模一樣的功能,是不是很麻煩呢?那麼這時我們就可以好好利用 Vue 組件的功能,可以讓我們只寫一次,就...

鐵人賽 Modern Web DAY 9
Vue.js 什麼意思 系列 第 9

技術 Day 09:遍歷資料好便利-v-for

目前為止,我們成功引入了 BootstrapVue 的元件 Navbar,也調整了樣式和內容。 突然發現少放了一個重要項目,於是趕緊補上一個 <b-nav...

鐵人賽 自我挑戰組 DAY 24

技術 Day24 - 抽取 js 共用元件

Case01 與 Day23 範例的差異,就是把 js fetch 的語法 extract 成 function CustomFetch.js 除了把原本的...

鐵人賽 Modern Web DAY 9
Vue.js 進階心法 系列 第 9

技術 Component 鬼牌(二): 看網址決定 Component

前端 router 前端 router 是一個很厲害的技術,讓 JavaScript 的內容與網址有了關係。並且讓分享某個特定的內容,不再是 Server Si...

鐵人賽 Modern Web DAY 23

技術 Day 23:「兒子,這是你的零用錢」- 元件間的資料傳遞

兔大夫:「請問是兔豪的家屬嗎?」 兔豪爸:「是,我就是。 請問我鵝子他...」 兔大夫:「抱歉,我盡力了 ...」 「他得的是一種 "會常常跟你討零...

鐵人賽 Modern Web DAY 12

技術 Day 12. 生命週期 - Lifecycle Hooks

Instance Lifecycle 生命週期 介紹完怎麼建立Vue instance 後,接著來談論它的生命週期吧。一個 Vue 實體跟我們人類一樣有生老病死...

鐵人賽 Modern Web DAY 9

技術 [Day09] Storybook - What's a story and how to write

Story 是元件呈現狀態的描述,開發者可以為每個元件攥寫多個 Story,也就是說元件可能會因為不同的參數組合而有不同的樣貌,而我們可以透過定義 Story...

鐵人賽 Modern Web DAY 24

技術 [重構倒數第07天] - 不用靠後端的 client 端上傳圖片預覽圖

前言 該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章,在這邊整理了許多我自己使用Vue重構很多網站的經驗...

鐵人賽 Modern Web DAY 23

技術 [30天 Vue學好學滿 DAY23] Vue Router-2

昨天筆記了基礎Vue Router 以及 History概念,今天繼續筆記其他細項用法。 動態路由 將不同路由導向同個元件,可視為帶入不同參數至同元件中。 於r...

鐵人賽 Modern Web DAY 14

技術 不只懂 Vue 語法:為什麼要用 Vuex? Vuex 基本架構是怎樣?

問題回答 使用 Vuex 是為了當元件之間都需要共用資料時,使用一個像是公用容器來管理資料,我們把所有要共用的資料都拉進此容器中,讓所有元件都能在此容器取得或操...

鐵人賽 Modern Web DAY 9
30天肝出購物網站 系列 第 9

技術 Day09:09 - User服務(4) - 前端 - JWT token、修改個人資料

Hola,我是Charlie!在Day08當中,我們完成了後端的JWT機制還有修改個人資料,在今天我們將完成前端的JWT機制還有修改個人資料。 ========...

鐵人賽 Modern Web DAY 8
Vue.js 什麼意思 系列 第 8

技術 Day 08:深仍可測的元件樣式-Deep Selectors

成功渲染出 BootstrapVue Navbar 元件之後,接著來將預設樣式改成自己喜歡的專案色調和排版吧!依據文件介紹,我們可以利用修改 property...