iT邦幫忙

vue相關文章
共有 76 則文章

技術 NUXT.js 筆記 - 前言

此文章主要是在記錄自己在開發NUXT.js上遇到的一些問題與試著練習寫一篇"大家看得懂的"技術文, 此次也是小弟我第一次編寫技術文章,所以若...

鐵人賽 Modern Web DAY 21

技術 [Day 21] Vue Quasar 彈跳視窗 1 - Action Sheet

下方的彈出選單 Action Sheet Action Sheet 這是一個從螢幕下方彈跳出小選單的元件 在Android及iOS上也都有類似的原生元件 不過如...

鐵人賽 Modern Web DAY 17

技術 [Day 17] Vue Quasar 表單元件 7 - Option Group

選項元件直接打包一次做好Option Group Option Group 有時候要做一堆選項,是不是覺得要複製一大堆radio、checkbox很煩呢,所以我...

鐵人賽 自我挑戰組 DAY 17

技術 (第十七天)自我練習專案 - 資料的移動

開始練習 WorkBoard 需要的套件 Vue.Draggable 是這次我們用來製作 WorkBoard 的重要套件,這個套件可以實現我們在實作 Work...

鐵人賽 Modern Web DAY 14

技術 [Day 14] Vue Quasar 表單元件 3 - Radio

簡單的單選元件 Radio Radio Quasar的Radio元件跟其他表單輸入元件的基本屬性都大同小異 一樣也可以用QFiled把它包裝起來哦 引入元件 f...

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 11

技術 Day11 - Vue & Axios 封裝

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

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 6

技術 06. Nuxt Routing 規則入門

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

鐵人賽 Modern Web DAY 7

技術 Day7 - Vue-Lazyloading & Service worker Hook

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

鐵人賽 Modern Web DAY 5

技術 05. Nuxt 產生簡單頁面

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

技術 04. Nuxt 環境建立

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

鐵人賽 Modern Web DAY 4

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

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

鐵人賽 Modern Web DAY 3

技術 03. Nuxt.js 怎麼處理 SSR 問題?擔任什麼角色?

關於 Universal Rendering 前一篇提到,原本前後端的 View 各自分開 隨著前端漸漸吃重,為了讓畫面邏輯不需要分散各處,有人提出新的架構 -...

鐵人賽 Modern Web DAY 2

技術 01. 基礎建設

馬上要開始介紹 Web Audio API 了,總要有個網站來呈現各種內容吧;既然要學東西,那就順便把不熟的 Vue 架起來玩一玩囉! 開始之前 筆者預期讀者您...

鐵人賽 Modern Web DAY 2

技術 02. 講歷史,話說 SSR...

什麼叫做 SSR? Server-Side Rendering,頁面由後端渲染,HTML由後端產生     傳統做法整頁HTML不就完全由後端產生嗎? 使用...