前言 昨天大致介紹了Vue的核心概念,今天就來談建置環境的部分。 創建環境 在 Vue 官方文件中,官方建議開發人員將 Vite 作為 Vue.js 應用程...
DAY 9 - v-bind 綁定樣式與 v-on 監聽事件 v-bind 綁定你的 attributes(屬性) v-bind 簡寫、縮寫 常見運...
V09_在vue之前_必備的CSS基礎(2)_排版控制 今天來探索一下有關CSS的排版控制的觀念及用法還有 box (normal, grid, flex)的排...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立與使用第一個元件 在 components 目錄下建立一...
前言 Nuxt 3 內建基於檔案的路由可以快速實現頁面的路由配置,我們只需要在 pages 目錄下建立頁面,Nuxt 將會自動載入 Vue Router 來實現...
前言 接著繼續看官方文件,我們可以看到官方提到Vue的組件可以按照兩種不同風格書寫,分別是選項式API以及組合式API。 從Vue 3.0開始,引入了Comp...
DAY 8 - v-model 雙向綁定與修飾符運用 接下來DAY 8 ~ DAY 11 會來到 Vue 的指令篇,這邊就是比較基礎的常用的指令,會一一來慢...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立第一個布局模板 在 layouts 目錄下建立一個檔案...
前言 我們在使用 Node 開發時,可能會碰到需要使用環境變數來設定不同情境所執行的邏輯,也可能是要避免在設定檔中或專案推送至遠端版控倉庫時暴露敏感資訊。 你可...
本篇開箱是VueUse中的useResizeObserver方法,簡單就能取元素的寬高 昨篇介紹的是針對整個螢幕的寬高去做偵測,但是如果今天的需求是當某一個...
前言 在前幾篇文章中,我們深入研究了Firebase的基本操作,學習了如何在Cloud Firestore中新增、讀取和刪除資料。今天將轉向一個全新的主題——...
DAY 7 - 深入了解 Dom 元素,了解 Virtual DOM 原理 Dom 元素是什麼 ? DOM : Document Object Mode 文...
需要一個經歷複雜計算所產出的值時,大家通常都會怎麼做呢?是用函式把這個計算過程包裝起來,並回傳出這個計算後的值?還是透過其他的方式達成呢?其實在Vue和Reac...
本篇開箱的是VueUse中的useWindowSize方法,簡單就能取得目前螢幕的寬高 介紹 VueUse 是一個基於Vue.js 的開源函式庫,主要是以...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立第一個路由頁面 在 pages 目錄下建立一個檔案 ./...
前言 Nuxt DevTools 是一個強大的視覺化除錯工具,,整合開發了許多工具與功能在除錯分析上它可以幫助你更快速的了解 Nuxt 專案,提升開發者體驗,本...
DAY 6 - Option API 進化 Compisiton API 學習目標 : 從 Option API 進化 Compisiton API ,從了...
V07_在vue之前_必備的JS基礎(4)_同步與非同步的操作 Promise 是一個因應非同步操作的需求所產生的語法可以參考MDN有關Promise的說明ht...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 專案目錄結構 .nuxt 目錄 開發環境下由 Nuxt 產生...
前言 Nuxt DevTools 是一個強大的視覺化除錯工具,Nuxt DevTools 整合開發了許多工具與功能在除錯分析上它可以幫助你更快速的了解 Nuxt...
本篇開箱的是Vue Final Modal 4,簡單應用就能有modal視窗 ▲ 示意圖 介紹 Vue Final Modal 是一個輕量、無渲染、對行動裝...
來嘗試在 NX 中建立 Vue 元件庫 lib。 跟 Nuxt 一樣,目前官方沒有支援 Vue 的擴充,所以要手動設定。 首先建立一個基於 Vite 的 js...
V06_在Vue之前_必備的JS基礎(3)_DOM元件及樣版文字的操作 今天來了解一下將陣列及物件的操作應用在網頁DOM的操作上,並結合jQuery的語法 DO...
DAY 5 - Vue 2 > Vue 3 破壞性改動,了解不同版本 為什麼要了解不同版本呢 ? 1. 版本間差異寫法大,只學一種不理解其中差...
本篇開箱的是Swiper一個流行的、功能強大的插件庫,用於創建滑動式的輪播、幻燈片和相冊...等。 ▲ 示意圖 介紹 Swiper是一個電腦和手機端全螢幕滑...
👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 設置 Tailwind CSS 環境 安裝 Nuxt Tai...
前言 Nuxt DevTools 是一個強大的視覺化除錯工具,,整合開發了許多工具與功能在除錯分析上它可以幫助你更快速的了解 Nuxt 專案,進而解放開發者體驗...
DAY 4 - 建立到銷毀:深入了解 Vue 生命週期 今日前言 今天來談談Vue.js的生命周期,了解元件建立到摧毀過程,深入了解元件運作原理及我們可以如...
V05_在Vue之前_必備的JS基礎(2)_陣列Array的操作 今天來了解一下JS的陣列的概念陣列Array, 物件Object在JS中,需要學會非常熟練的操...
本篇開箱的是vue-easy-lightbox,簡單應用就能有圖片預覽功能 ▲ 示意圖 介紹 基於Vue.js 3.0與TypeScript構建的圖片瀏覽(...