iT邦幫忙

vue.js相關文章
共有 1414 則文章

技術 (Vue)創造組件官方教學實作

首先創造元件 Vue.component('MyName',{ template:'<li>自行定義</li>' }) 加入剛...

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

技術 Day 30:Keep Going 的意思

就這樣接連 30 天順利完成鐵人賽系列了~為所有自律且成功達標的參賽者們一起喝采!!! 在產出本系列文章的同時,也再次複習了當初實作專案時面對到不熟悉的語法,在...

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

技術 完賽!YA!關於 Vue.js 進階心法系列

其實原本不是要叫這個名字的。原本要叫《官網沒教你的「如何把 Vue 寫好」》但是太狂了,竟然敢代替官網教你寫 Vue.js,後來想叫《Chris 的 Vue.j...

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

技術 Day 29:神奇語法糖-v-model

整個系列都快要完結篇了,怎麼可能獨漏 Vue 的神奇語法糖—— v-model 呢?我們已經知道 Vue 基於 MVVM 架構模式,最大的特色就是可以將資料與...

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

技術 表格元件共用攻略

前面講完表單這樣常見又複雜的製作方式,其實在對付的是一種「以物件為根的」資料結構。並且同時又處理掉了物件的物件,以及物件的陣列。那麼所有的表單其實就沒有什麼好害...

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

技術 Day 28:順手挖洞給 i 跳-vue-i18n

基本上設置多國語系算是相對簡單的事情,只要在 <template> 中有使用模板語法的位置,加上 $t() 放入變數即可。因此可以的話,會建議在專案...

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

技術 後端說修改時只需要送「有修改的欄位」過來

今天來介紹一個,因為後端提出這個需求。要接 PATCH API 而產生的做法。 如果都是 PUT 就不用這麼做了。 要修改的地方 store/user/in...

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

技術 Day29:29 - Facebook、Line分享

mhoro,我是Charlie! 在Day28的時候我們完成了按讚系統,而今天我們將看看如何增加Facebook跟Line的分享按紐。 ============...

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

技術 Day 27:語系包在 i 身上-Vue I18n 前置作業

因應國際化的需求,專案決定也要符合 international 的規格,Navbar 右上角的「選擇語系」功能總算要開工了!話不多說,直接介紹接下來要安裝的 p...

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

技術 表單處理 Object 裡的 Array

今天來看看一個常見問題。 { first_name: 'chris', last_name: 'wang', email: 'chris@goodi...

鐵人賽 Modern Web DAY 30

技術 Day 30. 鐵人賽最後一天 – 完賽心得感想⁽⁽◟(∗ ˊωˋ ∗)◞ ⁾⁾

完賽心得啦啦啦 哇嗚,今天就是鐵人賽最後一天了,30天其實過的蠻快的(但如果要再多做個30天想必我也是無法喇),雖然是鐵人30天,但要花的時間絕對是不只30天!...

鐵人賽 Modern Web DAY 27

技術 [Day27] Vue3 E2E Testing: Cypress 實戰之 Todo MVC (下)

前情提要 前兩天,我們開始為 Vue.js • TodoMVC 攥寫 E2E 測試,並分別在 Cypress 實戰之 Todo MVC (上) 完成了 C...

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

技術 Day28:28 - 後端&前端 - 按讚收藏

Moni,我是Charlie! 在Day27當中我們完成了recaptcha驗證,而今天我們將實作按讚收藏的部分。 ======================...

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

技術 Day 26:v-if 才做選擇,v-show 全都秀

目前的版面配置是基本的瀑布流效果,而此模式較著重在顯示書本封面圖片,一列只能出現三本書單,RWD 的情況下又會再壓縮顯示空間,相對在瀏覽資訊上的速度會較慢,因此...

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

技術 表單處理 Object 裡的 Object

今天來看看一個常見問題。 { first_name: 'chris', last_name: 'wang', email: 'chris@goodi...

鐵人賽 Modern Web DAY 29

技術 Day 29. 繼續來看組件基礎 – Components 吧ヾ(*´∀ ˋ*)ノ

歐歐歐,竟然已經到第29天了,時間真的是咻咻咻就過了呢!明天就要結束了,真是感傷(☍﹏⁰) (解脫了ε٩(๑> ₃ <)۶з)今天跟昨天一樣來講講c...

鐵人賽 Modern Web DAY 26

技術 [Day26] Vue3 E2E Testing: Cypress 實戰之 Todo MVC (中)

前情提要 昨天,我們為了讓大家更加了解 Cypress 的語法以及要如何攥寫 E2E 測試,所以開始規劃為 Vue.js • TodoMVC 攥寫 E2E 測...

鐵人賽 Modern Web DAY 28

技術 Day 28. 組件基礎 - Components

沃嗚!鐵人倒數3天了,我們離完賽就差一顛點啦,我們今天來講講components吧~繼續gogogo (「・ω・)「 Component簡介 Vue compo...

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

技術 Day 25:從頭開始的 Scroll Behavior

目前導覽項目頁面愈來愈完整,相對有愈來愈多小細節需要留意,尤其是資料量變多時,許多瀏覽時伴隨的滾動效果多少會影響使用者體驗,因此除了顧及版面資料和操作功能,UX...

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

技術 Day26:26 - 優化 - 後端 & 前端 - 忘記密碼

γεια σας,我是Charlie! 在Day25當中我們完成了Email訂單通知,而今天我們將完成忘記密碼的部分。 ====================...

鐵人賽 Modern Web DAY 25

技術 [Day25] Vue3 E2E Testing: Cypress 實戰之 Todo MVC (上)

在經過前兩天簡單的介紹 Cypress,現在我想透過一個實際的範例來讓大家更加了解 Cypress 以及到底如何攥寫 E2E 測試。 Vue3 E2E Te...

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

技術 表單: 處理物件型資料的畫面

以一個這樣的表單為例 <UserForm :data="data" @update:firstName=&quo...

鐵人賽 Modern Web DAY 27

技術 Day 27. 過濾器 - Filter

今天是三天連假的第一天,實體上課真的太累了,一不小心睡到下午诶嘿(๑´ڡ`๑)連假過完鐵人也差不多完成了!時間真的過的飛快啊,今天來講講vue的過濾器,雖然在這...

鐵人賽 Modern Web DAY 30

技術 不只懂 Vue 語法:請用圖片輪播的例子示範 Composition API?

問題回答 這個例子會示範以 Compositions API 開發一個簡單的圖片輪播。先打 API 從遠端取得資料,之後把資料渲染到畫面,並加入輪播功能,而且輪...

鐵人賽 Modern Web DAY 30

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day30.Vue3 網頁小遊戲(完結篇) | ♾ 台版魷魚遊戲,玩?還是不玩?

終於~ 來到鐵人賽的最後一天啦今天的工作就是把小專題剩下的功能給完成,為這次的鐵人賽歡呼~ 完賽啦!!! 我的 vue 翻牌配對小遊戲 修改為按下卡牌後只將該卡...

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

技術 Day 24:路由搜查隊-route.query

目前我們實現了即時搜尋顯示書名相符的書單資料,但是當我切換到其他路由之後又想再回到上一頁的搜尋結果,或是直接在當前路徑重新整理頁面時,搜尋欄位就被清空了,而書單...

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

技術 新增表單/編輯表單,共用?或分開?

目前我們寫好了一個新增的畫面 需求 接下來,常見的需求是,人員的新增之後是人員的編輯。 新增用的畫面 編輯用的畫面 假設編輯時,只能換頭貼,不能改名字的畫面...

鐵人賽 Modern Web DAY 24

技術 [Day24] Vue3 E2E Testing: Cypress 基本結構

今天這篇文章主要會介紹 Cypress 的基本結構以及常見的語法,那我們馬上開始吧! 基本結構 Cypress 的測試基本結構是由 Test Group, Te...

鐵人賽 Modern Web DAY 26

技術 Day 26. 雙向綁定語法糖 - v-model

表單輸入綁定 我們可以用v-model指令在表單<input>、<textarea>、<select>元素上建立雙向數據綁定...

鐵人賽 Modern Web DAY 29

技術 不只懂 Vue 語法:試說明 Composition API 與 Options API 概念和語法的分別?

問題回答 Composition API 是以邏輯功能來分割程式碼,像是寫原生 JavaScript 一樣,我們會把實現同樣功能的程式碼寫在附近。但 Optio...