Chapter 1. Introducing Vue.js
Figure 1.1. The roles of the model, view, and controller as described by the MVC pattern.
Figure 1.2. The components of the Model–View–ViewModel pattern.
Figure 1.3. Side-by-side comparison of a reactive calculator written using vanilla JavaScript (on the left) and Vue (on the right).
Figure 1.4. A typical Vue instance binds HTML markup to data in a view-model by creating a data binding between them.
Chapter 2. The Vue instance
Figure 2.1. A preview of our humble webstore’s beginnings.
Figure 2.2. The JavaScript console with no errors or warnings.
Figure 2.3. Using the webstore variable to display a representation of the Vue instance and explore its properties.
Figure 2.4. The vue-devtools window with nothing selected.
Figure 2.5. The root instance selected in vue-devtools with a variable dynamically assigned to the instance.
Figure 2.6. Our sitename property displayed in the header of our webstore.
Figure 2.7. Using the console and vue-devtools, we can check on our sitename property.
Figure 2.8. Using Vue’s property getter and setter to print and update the sitename property, respectively.
Figure 2.9. Diagram of the Vue lifecycle, divided into four phases.
Figure 2.10. Output from some of our lifecycle functions can be seen in the console.
Figure 2.11. Setting the sitename property triggers the update lifecycle callbacks.
Figure 2.12. Calling the destroy instance method triggers the final pair of lifecycle callbacks.