Tip

Note: This chapter contains the author's Vue study notes, based on the official documentation (opens new window).

MVVM Pattern

The MVVM pattern: M stands for Model (data model), V stands for View, and VM stands for View-Model.

Understanding

First, the data Model is bound to the View through Data Bindings.

When the View has interactions (changes), DOM listeners automatically detect them and update the data Model.

Q: What is the MVVM pattern?

A: In the MVVM pattern, the first M stands for data model, V stands for view, and VM stands for view-model. How it works in practice: backend data is rendered into the view (i.e., the page) through the view-model. When the user interacts with the page, the view-model automatically detects the user's actions and updates the backend data accordingly.