程式設計 Vue3中props定義的2種寫法 – 可延用Vue2定義
Vue3中，定義元件 (component) 的 props 時，為了讓已用習慣 Vue2 的開發者及專案移轉順利，Vue3保留了兩種寫法：Vue2寫法與Vue3寫法。為了一致性，建議全部統一成 Vue3 寫法較為一致。Vue2 Optio......
Vue2
程式設計 程式設計 Vue2 nextTick 遇到什麼問題，為何 Vue3 要改成 Ref reactivity響應式系統架構
在前面的文章我們提到，Vue 是用自已的 MVVM 架構配合 Virtual DOM 來更新真實的 HTML DOM 物件樹。 Vue 2 中的 nextTick 問題在於，因為是使用 Options API + Vue 自己的 Virtu......
程式設計 Vue3 Composable 函數跟 Vue2 Mixins 函數有什麼根本上的異同？Difference between Vue Composable and Mixins
在 Vue 3 裡，Composable 函式（可組合函式）跟 Vue 2 的 Mixins（混入） 功能類似，都是用來封裝可重複使用的邏輯與狀態，並混入 Components (元件)，但 Composable 比 Mixins 更靈活、......
程式設計 VueJS Components 元件間溝通傳遞值的方法
VueJS中，可以想成每一個 .vue 檔案都是一個物件，負責 UI 畫面上的一個大區塊與小區塊，物件之間彼此有父子層級的階層性。這邊以 Vue2 與 Vue3 做說明。語法糖標準的 Vue 元件傳值是採用一進一出的方式，傳入子元件用 :p......
程式設計 開始使用 VueJS – MVVM 架構
有兩種方式可以使用 VueJs 框架在 VueJS 的 EcoSystem 中，有非常多的外掛、套件與開發應用可以自行安裝，我們使用最為便利的 @vue/cli 套件，因為它已經結合 webpack, minitify 這類打包與壓縮等開發......
程式設計 Vue 父子元件傳值
Hint為了共用，子元件製作時儘可能做 loose coupling、才不會有多個子元件共同修改同一個值的問題loose coupling 的架構下，【父 ➞ 子】用 props 單向傳入、【子 ➞ 父】用 emits 單向傳出不希望元件中......
程式設計 利用 Vue inheritAttrs: false 繼承屬性到第二層子元件
用在：html 有複數層的子元件，加上inheritAttrs: false 的話才能將 native attribute 透過 $attr 傳入第二層的 html tag 中、且不會影響第一層的 labelVue2例如下方範例的 requ......
程式設計 VueJS v-model 語法糖
v-model 只是語法糖，省去每次寫 :value="xxx" @input="ooo" 這些語法，用來自動處理 input / outputv-model 預設的 prop: value, emit-event: inputexport......
程式設計 VueJs delay input search 延遲搜尋
一般的實作會用 v-model="searchedEmail"，然後 listen inputed 的變化後向 server 發送值問題點：每輸入一個字元就向自已的 server 發送 request，連續一直輸入，其實就是自體DDoS攻擊......
程式設計 VueJs Dynamic components & import 動態元件
不用寫一堆 v-ifv-if-else 來區分元件，一個 component 元件就可以<component v-bind:is="currentTabComponent"></component>const currentTabComp......
程式設計 VueJS Event Bus
Vue2利用 vue 本身 global 的物件產生通道傳值// defineimport Vue from 'vue';const EventBus = new Vue();export default EventBus// usagei......