table of Contents
Fourth, the realization principle of MVVM:
1. The composition of MVVM:
It is composed of Model, View, and ViewModel.
Model: Represents data model, data object (data), data and business logic are all defined in the Model layer.
View: Represents the UI view, template page, and is responsible for data display.
ViewModel: View model, the relationship mapping between View and Model. The database structure often cannot directly correspond to the interface controls one by one, and a data object needs to be defined specifically to correspond to the view controls on the View. The responsibility of ViewModel is to encapsulate Model objects into interface data objects that can display and accept input.
Under the MVVM architecture, there is no direct connection between View and Model. They exchange data through ViewModel, which is between ViewModel and Model. ViewModel connects the View layer and Model layer through two-way data binding, and the synchronization between View and Model is completely automatic, so developers only need to pay attention to business logic, not manual DOM manipulation, and no need to pay attention to data status. For synchronization issues, complex data state maintenance is managed uniformly by ViewModel.
2. Code display:
<!--View-->
<div id="app">
<p>Hello {
{username}}</p>
</div>
</body>
<script src="http://cdn.bootcss.com/vue/1.0.25/vue.js"></script>
<script>
const vm = new Vue({ //VM :new出来的实例
el:"#app", //element：选择器字符串，表明将表面哪个元素交给Vue管理
data:{ //数据(Model)
username:'Vue!'
}
})
</script>
3. Picture display:
Fourth, the realization principle of MVVM:
1. Responsive: How to monitor data changes.
2. Template analysis: how the template is parsed.
3. Rendering: How the template is rendered into HTML.