Learn why JS frameworks are popular and used in modern web-development.
JS frameworks typically help with two issues: reactivity and componentization.
Reactivity is the ability of the user interface to update when the application state has changed, and also vice versa.
Compartmentalization is how to modularize user interaction interface into components.
Pros: It is easier to learn than Angular or React.
Cons: It is less popular than React, especially in terms of jobs (2020).
Personal bias: I like Vue's progressive philiosophy better.
There are many ways of installing Vue, but the simplest (for learning) is just embed it in a script tag.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Other useful tools for development:
Get a syntax text-editor mark-up for Vue (e.g. Vetur for VSC)
Setup Chrome Vue.js devtools - for debugging
Warning: Vue 3 officially launched on 18th September 2020. It is super new.
The code here is based on Vue 2, because a lot of 3rd party libraries / tools have not been updated yet.
Let's start with a very simple example template.
"Hello World" is a classic but not very interesting and doesn't show off reactivity very well.
So let's modify this a bit...
More reading: Template syntax
...And showcase the power of 2-way data binding.
Change the model, and the view updates. Change the view, and the model updates.
A lot of magic for very little code.
Here's a simple example.
More reading: Vue reactivity in depth
A third example that showcases reactivity.
Let's do some quick code along as we see why data binding is so powerful.
You can easily render a list of objects in an array using the v-for directive.
More reading: List rendering
If you need conditional rendering you can use the v-if directive.
More reading: Conditional rendering
In-template expressions are very convenient, but they are meant for simple operations.
Putting too much logic in your templates can make them bloated and hard to maintain.
Therefore the idea behind computed properties.
More reading: Computed and watched properties
As your events get more complicated, you will often call a method for handling the event instead of putting all the logic in the template.
More reading: Events and methods
In a large application, the DOM tree can be huge.
Manipulating this is expensive. You can use a JSON structure to represent DOM nodes instead
This virtual DOM is faster, and how Vue tackles manipulations under the hood. (similar to React. Angular uses its own change detection mechanism)
More reading: Render functions and virtual DOM
More reading: Vue Instance
The lifecycle hook most often used is on mounted. This is when the binding is done with the virtual DOM and everything is setup.
To be completed by 9-11-2020(Mon) 2359hrs
When you submit, add the results to a table. Here's a screenshot.
Extra Challenge: Add in a method to delete rows from the table, and hook it to the UI.
Will show in class how to use and mock-up a simple backend using restdb.io
Chi-Loong | V/R