Building Fast and Semantic Input Masks in VueJS
summary
Builds a working currency input mask for Vue that keeps the last two digits as cents and inserts thousands separators using simple utilities wearMask and removeMask plus regex. Validation uses keydown for validation because key codes are available there and formatting runs on input for formatting so the code unformats then reformats the value. Implements a reusable renderless component and a v-mask directive (bind and componentUpdated) and shows a computed getter/setter pattern with v-model and experimental composition hooks.
AI-written summary · about
chapters (5)
related talks
13mUsing and creating Vue directives
38mBuilding Forms for an Engaging User Experience in Vue.js
34mConquering Forms in Vue
01h 08mVue.js: Forms & validations in the composition age
36mHow to Create 'Vuetiful' Data-Driven User Interfaces
24mScalable Forms in Vue
28mBuilding reusable UI components in Vue
24mVue js in Practice: Hybridizing Objects and Functions