Hello, I am Xiao Suoqi. The carefully crafted Vue tutorials are constantly updated. If you want to learn & consolidate & avoid pitfalls, just learn together~
MVVM model
Although Vue does not fully follow the MVVM model, the design of Vue has also been inspired by it. The variable name VM (abbreviation for ViewModel) is also used in the document to represent the Vue instance (the author of Vue referred to the MVVM model, not created it)
img
Model description
-
M: Model Model-corresponds to the data in data
-
V: View View-corresponding template code
-
VM: View model ViewModel-corresponding Vue instance object
-
Data Bingdings: Data binding places data at the specified location of the View
-
DOM Listeners: DOM listeners monitor changes in the view and map them to data
-
All attributes in data will eventually appear on the VM.
-
All properties on the VM and all properties on the Vue prototype can be used directly in the Vue template.
The object in the Vue instance datarepresents the data model in this ViewModel (VM), which is used to store the business data of the application.
In Vue, templateit represents the view layer (View), which is used to define the interface display effect of the application.
-
This layer can be understood as an element in an html page, such as:
<div id="app">{
{ message }}
</div>
All the code written here will be found on the VM. For example, @click = '可以引用VM的内容&简单表达式'if it is written @click = 'alert(1)'incorrectly, it belongs to window. If it is not found on the VM, it will cause an undefined error.
expand
Here is a brief expansion: MVC in Java (Model-View-Controller-an architectural pattern)
MVC: M represents the Model data layer, V represents the View layer, and C represents the Controller control layer (intermediary). The user sends a request, and the Control View transmits instructions to the Controller. After the Controller completes the business logic, the Model changes state and the Model sends new data. Go to View and the user gets feedback (actually more complicated, if you need in-depth understanding, it is recommended to read more relevant information)
image-20230814104731446
Expand Springboot+Vue architecture
image-20230915014353293
code example
// View
<div id="root">
<h1>{
{name}}</h1>
<!-- 只要是VM上面的（包括原型）都可以直接写，f12可以查看到我们写的name、add、官方自带的属性等 -->
<h1>{
{$options}}</h1>
<h1>{
{$emit}}</h1>
</div>
<script type="text/JS">
Vue.config.productionTip = false
// new Vue 这整个就是最重要的ViewModel
new Vue({
el: '#root',
// Model ，数据经过ViewModel就去了View更新
data: {
name: "小索奇",
add: "shanghai"
}
})
</script>
If it is useful to you, please give me a free thumbs up~