程式設計 Vue3中props定義的2種寫法 – 可延用Vue2定義
Vue3中，定義元件 (component) 的 props 時，為了讓已用習慣 Vue2 的開發者及專案移轉順利，Vue3保留了兩種寫法：Vue2寫法與Vue3寫法。為了一致性，建議全部統一成 Vue3 寫法較為一致。Vue2 Optio......
Vue3
程式設計 程式設計 Vue2 nextTick 遇到什麼問題，為何 Vue3 要改成 Ref reactivity響應式系統架構
在前面的文章我們提到，Vue 是用自已的 MVVM 架構配合 Virtual DOM 來更新真實的 HTML DOM 物件樹。 Vue 2 中的 nextTick 問題在於，因為是使用 Options API + Vue 自己的 Virtu......
程式設計 Vue3 Provide/Inject 何時使用如何使用？它解決了什麼問題？
情境：當你有一個父元件（App.vue），要把資料（例如使用者資訊）傳給子孫元件（GrandChild.vue），但利用 props 時每次都要一層層向下傳遞，超容易漏看搞混的。或著是有個props資料要傳給一個孫子與一個子女 (Child......
程式設計 Vue3 reactivity 的大地雷 – API 在背景偷偷送出新的資料
在介紹 Vue 的文章「開始使用 VueJS – MVVM 架構」中我們說明了 Vue 如何使用 Virtual DOM 架構自動追蹤資料的變化並更新 UI 頁面。這個機制與概念在 Vue3 中以新的實作方法 JavaScript Prox......
程式設計 於 Vue3 專案中以原生方法或利用 yup 與 vee-validate 實作Form表單的驗證
個人是不喜歡使用外掛或一堆套件來實作功能的，因為外掛通常有很多 wrapper, listener 與轉換，使用過頭會對效能有一定程度的影響。實作上也可能會造成太過依賴外掛而導致忘記基礎邏輯的寫法。而且使用外掛還會增加學習曲線，要另外花時間......
程式設計 使用 Vue3 部份讀取檔案並繪至頁面上避免UI卡頓 partially loading data and rendering on page
在做前端畫面時，常常會遇到資料量過多而造成卡頓，但問題其實不是資料量大而是渲染太多筆資料導致瀏覽器無法負荷。最常見的就是整個瀏覽器因此當機而必須重啟。🧠 問題核心是什麼？畫面卡頓問題: 其實不是因為「資料量太大」本身，而是「畫面上一次性渲染......
程式設計 Vue3 defineExpose 如何使用及什麼情境下使用？How and when using Vue3 defineExpose
在 Vue3 的開發中常有 View 依賴子元件 (Child Component) 的情境，例如母元件的 VIew 有某個參數改變後，子元件中的資料要重新讀取。一般而言會用 props 屬性直接轉入子元件即可，但若專案有用到 vuex 等......
程式設計 [HTML5] 強制 input 只能輸入數字、指定type=number 與 pattern=[0-9]是不足的 Specify input to accept number only, type=number is inefficient
在「 iOS Android 只顯示數字鍵盤的 input 輸入元件寫法」與「為何 e 可以輸入 input type=number 的標籤中?」我們提到 HTML5 中雖然已經有提供 <input type="number" patter......
程式設計 Vue3 Composable 函數跟 Vue2 Mixins 函數有什麼根本上的異同？Difference between Vue Composable and Mixins
在 Vue 3 裡，Composable 函式（可組合函式）跟 Vue 2 的 Mixins（混入） 功能類似，都是用來封裝可重複使用的邏輯與狀態，並混入 Components (元件)，但 Composable 比 Mixins 更靈活、......
程式設計 [HTML5] iOS Android 只顯示數字鍵盤的 input 輸入元件寫法
在「 強制 input 只能輸入數字、指定type=number 與 pattern=是不足的」的文章中我們針對 PC 實作了客制化的 sanitize 方法讓 input 輸入欄只能接收數字。而對於行動裝置我們也知道了只使用 HTML t......
程式設計 Vue Angular React 中監看變數是否有變化的方法
在 ES6 中，JavaScript 提供了新的物件 Proxy 可用來監看變數的變化，但是在 Vue, Angular, React 中其實早已內建一種機制可以用來監看變數。Getter & Setter三種前端框架都有提到 Getter......
程式設計 從零開始 Nuxt 3 – nuxt.js
有別於 Vue 3 (vue.js)，Nuxt 是另一個包裝 vue.js 的一個框架，除了保有 vue.js 的各種方便功能還可以自動引入 components 元件、整合 server-side rendering (後端繪圖) 等讓開......
程式設計 VueJS Components 元件間溝通傳遞值的方法
VueJS中，可以想成每一個 .vue 檔案都是一個物件，負責 UI 畫面上的一個大區塊與小區塊，物件之間彼此有父子層級的階層性。這邊以 Vue2 與 Vue3 做說明。語法糖標準的 Vue 元件傳值是採用一進一出的方式，傳入子元件用 :p......
程式設計 開始使用 VueJS – MVVM 架構
有兩種方式可以使用 VueJs 框架在 VueJS 的 EcoSystem 中，有非常多的外掛、套件與開發應用可以自行安裝，我們使用最為便利的 @vue/cli 套件，因為它已經結合 webpack, minitify 這類打包與壓縮等開發......
程式設計 Vue3 專案加入 CSS Stylelint
Lint 是一種檢測與訂定團隊 code style 的規則，讓成員可以用相同的 style 撰寫程式。常聽到的 ESLint 多用在 JavaScript 等程式上，CSS 的部份 Stylelint 是目前最紅的套件且支援外掛擴充，開發......
程式設計 VueJS 3 使用 Ref 綁定元件 – TypeScript篇
分享綁定元件後操作 HTML DOM 的方法Vue 2 / Options API<div ref=someRefName>Hello World</div>const refVar = "someRefName"(this.$refs[r......
程式設計 Vue 父子元件傳值
Hint為了共用，子元件製作時儘可能做 loose coupling、才不會有多個子元件共同修改同一個值的問題loose coupling 的架構下，【父 ➞ 子】用 props 單向傳入、【子 ➞ 父】用 emits 單向傳出不希望元件中......
程式設計 Vue3 使用 CSSProperties 傳入 CSS
傳入CSS值import type { CSSProperties } from "vue";interface CheckboxProps { modelValue: boolean; checkboxStyle?: CSSPropert......
程式設計 Nuxt3 如何引入環境變數切分不同的UI或計算
在 Vue2 或 Vue3 的專案中，我們常常會引入環境變數，例如 process.env.NODE_ENV === 'development'、process.env.NODE_ENV === 'production'，來區分不同工作環境......
程式設計 Vue3 無法watch string型態的 prop
在子元件中，若想監看傳入的 props 有無變化時，我們會使用 watch( ) 。但是若 prop 是 primitive type 的時候，會出現下列的錯誤 (以 string為例)Argument of type 'string' i......