Vue Basics (Continued)
April 10, 2020
My Vue Learning Demo Repos
Continuing on in learning Vue!
Form Input Binding
I picked up with forms and input binding. One important thing to know: v-model overwrites the value attribute on text elements, so it’s not necessary to include.
Note: This is not true for checkboxes or radios, you still need the
valuethere.
I was used to doing this out of habit, and also Emmet auto-complete…must remember to remove this attribute when creating forms!
The same is true for adding the checked or selected attributes to checkboxes and selects. See docs.
By the way, I guess you don’t need the name element either? Since it’s used to organize data going to the serve, but with Vue the data model handles that instead.
.lazy Modifier is Great! Replaces Debouncing
In React (from what I know) it’s a complicated process to debounce user input, i.e. stop the form from acting on the input with every key press. Vue has this cool .lazy modifier which means it won’t react to the input data until focus changes away from the input. Example:
<label for="title">Title</label> |
How Routing Works in History Mode
Normally when a URL has a slash in it, or a path, it sends a request to the server:
www.imdb.com/movies
Vue by default allows for routing in “hash mode”…the hash is used to prevent the browser from making a new server request:
www.imdb.com/#/movies
But this is lame! So instead vue-router needs to be set up in history mode so that no matter the path, the index.html file will be loaded. See docs.
One important thing to note—history-mode routing works by default in development mode when running npm run serve, but in production there is some extra configuration to do depending on the production setup.