iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 0 留言 6322 瀏覽

鐵人賽 Modern Web DAY 13

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 13 篇

技術 13. Nuxt 客製頁面效果 - 轉場(Transition)

這篇是頁面客製段落其三，主題講「Nuxt 頁面轉場效果如何調整」回憶兩種暫態正在讀取中 => 讀取效果 (Loading) 頁面切換中 =>...

Ralph ‧ 2018-10-28 ‧團隊InfoSec Horadrim

0 Like 0 留言 3184 瀏覽

鐵人賽 Modern Web DAY 13

[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站系列第 13 篇

技術 [Day 13] Vue Quasar 表單元件 2 - Chips Input

輸入陣列的好幫手 Chips Input Chips Input 是不是有些時候建立使用者表單輸入時，會有能填多種值的欄位，像是興趣、職業等等。但是又怕使用...

RenZhou ‧ 2018-10-27

0 Like 0 留言 2249 瀏覽

鐵人賽 Modern Web DAY 12

Daily UI : 開發者版系列第 12 篇

技術 Vuetify：Credit Card Payment

https://codepen.io/hereiscasio/pen/ZqXVWN?editors=1010 Used UI Component ( #2 )...

Casio ‧ 2018-10-27

0 Like 0 留言 2719 瀏覽

鐵人賽 Modern Web DAY 12

[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站系列第 12 篇

技術 [Day 12] Vue Quasar 表單元件 1 - Field

序大家好，這篇開始就開始來談後端表單常用到的元件吧～原本的旅遊系列再來的頁面都是以layout為主但是quasar的layout元件也差不多介紹完了才發...

RenZhou ‧ 2018-10-26

1 Like 0 留言 9117 瀏覽

鐵人賽 Modern Web DAY 12

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 12 篇

技術 12. Nuxt 客製頁面效果 - 讀取(Loading)

這篇是頁面客製段落其二，主題講「Nuxt 頁面讀取效果如何調整」用來補充頁面細部設定讓我們回想錯誤頁面，是用來「呈現錯誤狀態的頁面元件」而頁面渲染前，N...

Ralph ‧ 2018-10-27 ‧團隊InfoSec Horadrim

1 Like 0 留言 9974 瀏覽

鐵人賽 Modern Web DAY 11

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 11 篇

技術 11. Nuxt 頁面驗證和錯誤顯示

接下來幾篇都屬頁面客製，這篇講「Nuxt 發生錯誤時，他怎麼判斷與反應」先回顧這張流程圖 Nuxt 收到請求時，會經過這麼多步驟而碰到不可預期的錯誤或頁面...

Ralph ‧ 2018-10-26 ‧團隊InfoSec Horadrim

0 Like 0 留言 1326 瀏覽

鐵人賽 Modern Web DAY 11

Daily UI : 開發者版系列第 11 篇

技術 Vuetify：Crowdfunding Card

https://codepen.io/hereiscasio/pen/xyWppM?editors=1000 Used UI Component ( #1 )...

Casio ‧ 2018-10-26

0 Like 0 留言 3407 瀏覽

鐵人賽 Modern Web DAY 11

[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站系列第 11 篇

技術 [Day 11] Vue Quasar 打造旅遊網站系列 7 - Parallax、Breadcrumbs、Rating

GitHub Demo 今天完成後的畫面首頁部分已經差不多了剩下頁尾以及一些小區塊因為元件都跟之前的文章有重複到故在這邊就不實作會功能重複的區塊了製...

RenZhou ‧ 2018-10-25

1 Like 0 留言 4721 瀏覽

鐵人賽 Modern Web DAY 10

[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站系列第 10 篇

技術 [Day 10] Vue Quasar 打造旅遊網站系列 6 - Cards (卡片)

GitHub Demo 今日完成的畫面首頁的第一個區塊做完了今天就來做第二個區塊吧先看看兩大家的頁面這種卡片形式的元件，咱們Quasar也有我們...

RenZhou ‧ 2018-10-24

0 Like 0 留言 2122 瀏覽

鐵人賽 Modern Web DAY 9

Daily UI : 開發者版系列第 9 篇

技術 Vuetify：Search Header

https://codepen.io/hereiscasio/pen/QZrBpP Used UI Component ( #2 ) #1 Text fiel...

Casio ‧ 2018-10-24

3 Like 0 留言 15555 瀏覽

鐵人賽 Modern Web DAY 11

VUE & PHP (Apache2) & Docker 實戰開發系列第 11 篇

技術 Day11 - Vue & Axios 封裝

今天換來做 VUE先前已經將ROUTER & MATERIAL套用進來，這一次想實作封裝HTTP的功能，如 VUE官方推薦，我們要用axios。簡單將幾...

aa71435723 ‧ 2018-10-25

1 Like 0 留言 9949 瀏覽

鐵人賽 Modern Web DAY 9

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 9 篇

技術 09. Nuxt 頁面元件細部設定

Nuxt 頁面元件跟 Vue File 哪裡不同？ Nuxt Routing 自動映射介紹過，/pages 的 Vue File 對應各個頁面。雖然寫法一樣，...

Ralph ‧ 2018-10-24 ‧團隊InfoSec Horadrim

1 Like 0 留言 4425 瀏覽

鐵人賽 Modern Web DAY 9

[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站系列第 9 篇

技術 [Day 9] Vue Quasar 打造旅遊網站系列 5- Popover (彈出視窗)

今天做完我們的頁面會長這樣～今天一樣接續昨天的部分～我們來做搜尋點擊但是還沒輸入時下面出現的視窗 KLOOK 的視窗雖然有圖片美觀，本來也想做像這種的...

RenZhou ‧ 2018-10-23

1 Like 0 留言 1951 瀏覽

鐵人賽 Modern Web DAY 8

Daily UI : 開發者版系列第 8 篇

技術 Vuetify：Time is money

https://codepen.io/hereiscasio/pen/ZmYyYK?editors=1000 Used UI Component ( #2 )...

Casio ‧ 2018-10-23

1 Like 0 留言 12234 瀏覽

鐵人賽 Modern Web DAY 8

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 8 篇

技術 08. Nuxt 客製《甜點電商》SEO 基本資訊

客製 SEO 資訊上一章讓登入頁有了基本樣貌，但需要 SSR 是為了解決兩大問題 SEO SMO 具體怎麼做？前端最基本的，在埋對應的 Meta T...

Ralph ‧ 2018-10-23 ‧團隊InfoSec Horadrim

0 Like 0 留言 4949 瀏覽

鐵人賽 Modern Web DAY 8

[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站系列第 8 篇

技術 [Day 8] Vue Quasar 打造旅遊網站系列 4 - Input、Autocomplete

今日做完後會長這樣繼續昨天的進度該補上搜尋的框框了先來看一下其他兩家的東西恩... 不簡單啊ＸＤ? 暫且不看下面的視覺選單先來打個字搜尋看看...

RenZhou ‧ 2018-10-22

0 Like 0 留言 4761 瀏覽

鐵人賽 Modern Web DAY 7

Daily UI : 開發者版系列第 7 篇

技術 Vuetify：Fashion Header

https://codepen.io/hereiscasio/pen/WaqpQq Used UI Component ( #1 ) #1 Sheets 今天...

Casio ‧ 2018-10-22

2 Like 2 留言 17827 瀏覽

鐵人賽 Modern Web DAY 7

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 7 篇

技術 07. Nuxt 頁面怎麼切會更好？以電商登入頁為例

本來打算介紹 Nuxt 版面依功能劃分、由哪些區塊組成。想到六角學院才比完《甜點電商PK賽》，現成切好的版面很好找，參賽選手也不少，拿來說明與練習再適合不過。...

Ralph ‧ 2018-10-22 ‧團隊InfoSec Horadrim

0 Like 0 留言 5930 瀏覽

鐵人賽 Modern Web DAY 7

[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站系列第 7 篇

技術 [Day 7] Vue Quasar 打造旅遊網站系列 3 - Carousel (頁面輪播)

今天就來做我們的首頁吧～！！ ?? 其他兩家的首頁基本上都是圖片輪播的形式加上一個輸入匡來搜尋目的地那我們今天就來做這個輪播功能吧建立新的首頁由於...

RenZhou ‧ 2018-10-21

2 Like 0 留言 16355 瀏覽

鐵人賽 Modern Web DAY 6

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 6 篇

技術 06. Nuxt Routing 規則入門

前一章我們新增 /pages/product.vue編輯即可在 http://localhost:3000/product 預覽頁面。 pages/ --| p...

Ralph ‧ 2018-10-21 ‧團隊InfoSec Horadrim

0 Like 0 留言 3150 瀏覽

鐵人賽 Modern Web DAY 8

VUE & PHP (Apache2) & Docker 實戰開發系列第 8 篇

技術 Day8 - Vue 專案啟動 Routing & Material

前面幾篇文章大致上把專案的初始建置完成，也放了一版於github可以參考。這邊我預計想要以一個簡單的主題來實作：房屋管理大致上會有有幾個主體(約略想)：人...

aa71435723 ‧ 2018-10-22

0 Like 0 留言 3709 瀏覽

鐵人賽 Modern Web DAY 6

Daily UI : 開發者版系列第 6 篇

技術 Vuetify：Cinema Application › More discussion

Things We need to discuss How to do Functional Component Composition Thinking...

Casio ‧ 2018-10-21

1 Like 0 留言 12312 瀏覽

鐵人賽 Modern Web DAY 5

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 5 篇

技術 05. Nuxt 產生簡單頁面

前一章經 create-nuxt-app 生成的專案結構放法按照 Nuxt 預設結構，相比 Vue.js 專案，已經幫你訂好了規則，方便對應與依循各資料夾對...

Ralph ‧ 2018-10-20 ‧團隊InfoSec Horadrim

0 Like 0 留言 3117 瀏覽

鐵人賽 Modern Web DAY 5

Daily UI : 開發者版系列第 5 篇

技術 Vuetify：Cinema Application › Implementation

https://codepen.io/hereiscasio/pen/wQvVzP?editors=1000 Used UI Component ( #5 )...

Casio ‧ 2018-10-20

0 Like 0 留言 6077 瀏覽

鐵人賽 Modern Web DAY 7

VUE & PHP (Apache2) & Docker 實戰開發系列第 7 篇

技術 Day7 - Vue-Lazyloading & Service worker Hook

上一篇學習了如何建立typescript & webpack & service worker的專案。今天繼續實作如果將service wor...

aa71435723 ‧ 2018-10-21

0 Like 0 留言 6067 瀏覽

鐵人賽 Modern Web DAY 5

[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站系列第 5 篇

技術 [Day 5] Vue Quasar 打造旅遊網站系列 1 - Header

本篇演示項目 Toolbar ToolbarTitle Button 這幾天都在想要演示什麼主題會比較好想一想最近突然好想要出去玩那就乾脆來做旅遊網站好...

RenZhou ‧ 2018-10-19

0 Like 0 留言 2033 瀏覽

鐵人賽 Modern Web DAY 4

Daily UI : 開發者版系列第 4 篇

技術 Vuetify：Preface › ❹ Best Learning Strategy on Vuetify

The Fastest Way to start Vuetify 以上為目前其網站的主要章節列表，本系列文雖忽略最後一項，但建議可配合 Getting st...

Casio ‧ 2018-10-19

0 Like 1 留言 10256 瀏覽

鐵人賽 Modern Web DAY 4

[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站系列第 4 篇

技術 [Day 4] Vue Quasar Framework 頁面Layout介紹

今天就讓我們直接開始吧～！前面幾天我們有執行過部署的指令了不過我們這邊再複習一下 $ quasar init helloworld $ cd hellow...

RenZhou ‧ 2018-10-18

2 Like 2 留言 18781 瀏覽

鐵人賽 Modern Web DAY 4

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 4 篇

技術 04. Nuxt 環境建立

這篇寫常用情境產生新 Nuxt 專案 Vue.js SPA 寫一半，得追加 SSR 產生完整 Nuxt 專案入門寫 Vue.js，新專案用 Vue-cl...

Ralph ‧ 2018-10-19 ‧團隊InfoSec Horadrim

0 Like 0 留言 6109 瀏覽

鐵人賽 Modern Web DAY 5

VUE & PHP (Apache2) & Docker 實戰開發系列第 5 篇

技術 Day5 - Vue & Webpack & Service Worker 工欲善其事必先利其器

這一篇有跟大家介紹了Service Worker的應用，今天想帶一下Webpack，強大的打包工具。我會希望我的前端，能夠用到Webpack + Service...

aa71435723 ‧ 2018-10-19

技術 13. Nuxt 客製頁面效果 - 轉場(Transition)

技術 [Day 13] Vue Quasar 表單元件 2 - Chips Input

技術 Vuetify：Credit Card Payment

技術 [Day 12] Vue Quasar 表單元件 1 - Field

技術 12. Nuxt 客製頁面效果 - 讀取(Loading)

技術 11. Nuxt 頁面驗證和錯誤顯示

技術 Vuetify：Crowdfunding Card

技術 [Day 11] Vue Quasar 打造 旅遊網站系列 7 - Parallax、Breadcrumbs、Rating

技術 [Day 10] Vue Quasar 打造 旅遊網站系列 6 - Cards (卡片)

技術 Vuetify：Search Header

技術 Day11 - Vue & Axios 封裝

技術 09. Nuxt 頁面元件細部設定

技術 [Day 9] Vue Quasar 打造 旅遊網站系列 5- Popover (彈出視窗)

技術 Vuetify：Time is money

技術 08. Nuxt 客製《甜點電商》SEO 基本資訊

技術 [Day 8] Vue Quasar 打造 旅遊網站系列 4 - Input、Autocomplete

技術 Vuetify：Fashion Header

技術 07. Nuxt 頁面怎麼切會更好？以電商登入頁為例

技術 [Day 7] Vue Quasar 打造 旅遊網站系列 3 - Carousel (頁面輪播)

技術 06. Nuxt Routing 規則入門

技術 Day8 - Vue 專案啟動 Routing & Material

技術 Vuetify：Cinema Application › More discussion

技術 05. Nuxt 產生簡單頁面

技術 Vuetify：Cinema Application › Implementation

技術 Day7 - Vue-Lazyloading & Service worker Hook

技術 [Day 5] Vue Quasar 打造 旅遊網站系列 1 - Header

技術 Vuetify：Preface › ❹ Best Learning Strategy on Vuetify

技術 [Day 4] Vue Quasar Framework 頁面Layout介紹

技術 04. Nuxt 環境建立

技術 Day5 - Vue & Webpack & Service Worker 工欲善其事必先利其器

標記使用者

技術 [Day 11] Vue Quasar 打造旅遊網站系列 7 - Parallax、Breadcrumbs、Rating

技術 [Day 10] Vue Quasar 打造旅遊網站系列 6 - Cards (卡片)

技術 [Day 9] Vue Quasar 打造旅遊網站系列 5- Popover (彈出視窗)

技術 [Day 8] Vue Quasar 打造旅遊網站系列 4 - Input、Autocomplete

技術 [Day 7] Vue Quasar 打造旅遊網站系列 3 - Carousel (頁面輪播)

技術 [Day 5] Vue Quasar 打造旅遊網站系列 1 - Header