Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "whether vue is mvvm mode". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope this article "vue is not mvvm mode" can help you solve the problem.

Vue is the mvvm mode. The bi-directional binding supported in vue uses mvvm mode. When the m-layer data is modified, the vm layer will detect the change and notify the v-layer to make corresponding changes, that is, the data affects the view, and the view affects the data, which greatly improves the development efficiency.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

Is vue in mvvm mode?

MVVM is Model-View-ViewModel,vue, which is mvvm mode.

Model is the data model (also the exponential data layer). It can be our fixed data, or it can be data requested from the server.

View is the page DOM (also refers to the view layer) is mainly to show information to the user.

ViewModel in vue means that the vue instance (also referred to as the data model layer) acts as a bridge between View and Model.

ViewModel is the core of Vue.js, which is an instance of Vue. The Vue instance acts on a HTML element, which can be a body element of HTML or an element that specifies id.

Two-way binding after the creation of ViewModel

First of all, we think of DOM Listeners and Data Bindings in the above figure as two tools, which are the key to implementing two-way binding.

From the view side, the DOM Listeners tool in ViewModel will help us monitor the changes of DOM elements on the page, and if there is any change, change the data in Model.

From the Model side, when we update the data in Model, the Data Bindings tool will help us update the DOM element in the page.

Native implementation js implementation M-V-VM / * MVVM: model model objects-- "refers to the relevant data view view objects that make up the content of the interface--" refers to the interface viewmodel view model objects that show data to users or developers-- "refers to the bridge between view and model * / let msg=" Hello world! " / equivalent to model _ window.onload=function () {let h5Dom = document.getElementById ("h5Dom"); let inputDom = document.getElementById ("inputDom"); h5Dom[ XSS _ clean] = msg; inputDom.value=msg / / implement dynamic event listening for js objects by listening to event sources / / input input event inputDom.addEventListener ("input", function () {msg=this.value; h5Dom[ XSS _ clean] = msg;});}

Achieve results:

This is the end of the content about "whether vue is mvvm mode". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.