iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

網頁設計靠 Vue.js 轉前端 系列

網頁設計靠 Vue.js 轉前端

DAY 21

Vue[21]-動畫(一)

熟CSS的朋友一定知道transition,它是一種靠觸發執行的動畫,無法循環輪播,按鈕上的hover就很常用到,不熟的話推薦參考我的隊友 卡羅奇奇教學文章。...

2018-11-05 ‧ 由 adam747 分享
DAY 22

Vue[22]-動畫(二)

結合Animation 看完昨天介紹的漸變樣式類別後,今天接著再看下去! 我們除了可以像昨天一樣做簡單的動畫設定,也可以做到複雜的動畫,利用css的animat...

2018-11-06 ‧ 由 adam747 分享
DAY 23

Vue[23]-動畫(三)

前兩天把動畫基礎看完了,今天來看看其它的設定。 設定初始載入時的漸變 如果想要設定一開始載入畫面時元件的漸變效果,可以透過設定appear屬性來達成,如:&lt...

2018-11-07 ‧ 由 adam747 分享
DAY 24

Vue[24]-動畫(四)

列表過渡 今天來到動畫的最後一篇,之前都只是針對單一元件或一次顯示一個元件,那如果遇到一整個列表的內容呢?還記得之前學過的v-for嗎? Vue[07]-陣列...

2018-11-08 ‧ 由 adam747 分享
DAY 25

Vue[25]-過濾器Filter

最近在工作上剛好用到了「Filter(過濾器)」,今天就來看一下,它可以幫我們處理文字資料,寫法為dataName | filterFunction,「data...

2018-11-09 ‧ 由 adam747 分享
DAY 26

Vue[26]-$emit

來到第26天,如果大家有跟著進度走,想必也有收獲了,隨著網站越來越豐富,當然component一定也用了不少吧?那你很可能會遇上一個問題,還記得一開始說的「資料...

2018-11-10 ‧ 由 adam747 分享
DAY 27

Vue[27]-資料驅動畫面

基本的技術都講的差不多了,接下來要了解一下實做上的重要觀念了,用「資料驅動畫面」,也就是說畫面是由資料決定的。 範例實做: 今天就用一個選單當範例吧,這個選單靠...

2018-11-11 ‧ 由 adam747 分享
DAY 28

Vue[28]-Bootstrap

Bootstrap 什麼是Bootstrap?它是一個現在當紅的前端元件庫,而且支援RWD,主要用在開發網站HTML、CSS和JS的開源工具包。 什麼是RWD...

2018-11-12 ‧ 由 adam747 分享
DAY 29

Vue[29]-Nuxt.js

最近在工作上剛好完成了我的第一份前端程式工作,內容是後台報表頁面,主要統計前台活動的各項數劇並用圓餅圖及折線圖顯示,頁面本身沒什麼難度,但API對我這個新手來說...

2018-11-13 ‧ 由 adam747 分享
DAY 30

Vue[30]-API 與 30天轉職心得

API 昨天認識完了Nuxt.js與各資料夾分工,今天就來看一下API的流程!首先什麼是API?application programming interfac...

2018-11-14 ‧ 由 adam747 分享