My Vue Learning Demo Repos
Continuing on in learning Vue!
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
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
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.
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:
Normally when a URL has a slash in it, or a path, it sends a request to the server:
Vue by default allows for routing in “hash mode”…the hash is used to prevent the browser from making a new server request:
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.