程式設計 Vue3中props定義的2種寫法 – 可延用Vue2定義
Vue3中，定義元件 (component) 的 props 時，為了讓已用習慣 Vue2 的開發者及專案移轉順利，Vue3保留了兩種寫法：Vue2寫法與Vue3寫法。為了一致性，建議全部統一成 Vue3 寫法較為一致。Vue2 Optio......
VueJS
程式設計 程式設計 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......
程式設計 [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 更靈活、......
程式設計 Vue Script 中使用 SCSS/CSS 變數的方法
通常在寫 Vue 的程式時會將 SCSS/CSS 的部份寫在 `<style>` 裡面，但是實際運用上應該會有很多 SCSS/CSS 變數放在不同的目錄之中，例如在 css/colors.scss 中定義了SCSS色彩變數。這時可以用標準的......
程式設計 [HTML5] 利用 Svg 與 CSS 自製顯示上傳比例的 spinner 進度條
雖然專案採用的是 Vue3 / Nuxt3 的框架，但程式碼都儘量維持 Pure HTML5 的寫法不隨意安裝外掛。利用原生的 SVG 與 CSS 就能實現進度條的實作比較不會將自已陷入只會用外掛或只會特殊框架寫法的情況，未來也可以快速移植......
程式設計 [HTML5] 利用 FontFaceObserver 檢測 Material Icons Web fonts 有沒有正確讀取
目前的程式開發，越來越多人使用 Web Fonts 例如 Google Material Icons 來顯示圖示圖標，以取代以前要請美術組準備一大堆 svg, png 的檔案。但使用 Web Fonts 固然方便也會有個致命的缺點，就是網路......
程式設計 Vue JavaScript開發前端Web時，如何避免 propagation 與 default 事件
propagation 與 default 事件是HTML規範裡元件傳遞事件時的標準流程，不論是使用原生 HTML5的開發或是利用框架 React, Vue, Angular 等都會遇到。沒有理解的話很容易引發重複的事件觸發造成不可預測的b......
程式設計 中止 HTML anchor 連結標籤的預設動作 prevent default
使用 Vue, Angular 等開發框架時，常常會用到自訂的函數來開啟頁面而不用原生的 href 方法。不過由於 HTML 規定 anchor 標籤一定要有 href 屬性，所以利用 javascript:void(0) 可以避免預設的動......
程式設計 VueJS MVVM 模型與 Pure HTML5 的比較
Vue.js 與 Native HTML5 的不同點現在有很多方法和框架可以建立網頁前端系統，例如 React、AngularJS、Vue.js 等等。使用原生的 HTML5 與 JavaScript 絕對可以建立一個系統，但通常使用一個好......
程式設計 從零開始 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 是目前最紅的套件且支援外掛擴充，開發......
程式設計 利用 JavaScript ES6 與 GraphemeSplitter 判斷字串長度
在顏文字盛行的時代，字串判斷的時候最好也一起加入計算。而 JavaScript 本身即可針對 ASCII 與 Unicode 字元做基本的判斷，但是對於顏文字還沒有辦法完美處理。據說在 ES2021 版的 JavaScript 中將會針對 ......
程式設計 可讀寫的 Vue Writable computed
限制：getter的返回值與setter 的參數要一致。e.g. 下例都是 string、不然 editor compiler 會叫錯<script setup>import { ref, computed } from 'vue'cons......
程式設計 Vue Computed vs Methods 兩者概念有什麼不一樣
差異同一個 component 中、Computes 有在內部作 cache，Methods 沒有，所以 template 在 render 時不用每次呼叫，計算成本較低// template{{ urlMap[item.id] }}// ......
程式設計 Vue 建立很多 child-components 對效能的影響??
因為每一個 Vue 元件都會有一個對應的 watcher 來查看 Virtual DOM 與 Real DOM 的關聯，建立很多個子元件時也表示會建立很多個 Vue Instance關於會不會影響到效能或吃掉大量記憶體，目前還不完全清楚如果......
程式設計 利用 Vue inheritAttrs: false 繼承屬性到第二層子元件
用在：html 有複數層的子元件，加上inheritAttrs: false 的話才能將 native attribute 透過 $attr 傳入第二層的 html tag 中、且不會影響第一層的 labelVue2例如下方範例的 requ......