Is vue in mvvm mode?-Front-end Q&A-php.cn

Is vue in mvvm mode?

WBOY

Release： 2022-04-08 11:33:18

Original

4212 people have browsed it

vue is mvvm mode. The two-way binding supported in Vue uses the mvvm mode. When the m layer data is modified, the vm layer will detect the change and notify the v layer to make corresponding modifications. That is, the data affects the view, and the view affects the data. It greatly improves development efficiency.

Is vue in mvvm mode?

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

Is vue in mvvm mode?

MVVM is Model-View-ViewModel, and vue is in mvvm mode.

#Model is the data model (also refers to the 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), which is mainly used to display information to users.
ViewModel in vue refers to the vue instance (also refers to the data model layer) that acts as a bridge for communication between View and Model.

ViewModel is the core of Vue.js, it is a Vue instance. The Vue instance acts on a certain HTML element. This element can be the HTML body element or an element with a specified id.

Is vue in mvvm mode?

The two-way binding is achieved after creating the ViewModel

First, we regard the DOM Listeners and Data Bindings in the above figure as two tools. It is the key to achieving two-way binding.

Looking from the View side, the DOM Listeners tool in ViewModel will help us monitor changes in DOM elements on the page. If there are changes, change the data in the Model;

Looking from the Model side, When we update the data in the Model, the Data Bindings tool will help us update the DOM elements in the page.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- div铺满全屏而不是缩放网页  -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，
        这实际上破坏了“锁定”模式。即如果你有IE9的话说明你有IE789，那么就调用高版本的那个也就是IE9。
     -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生实现js实现M-V-VM</title>
    <script>
        /*
          MVVM : model 模型对象--》指的是构成界面内容的相关数据
                 view  视图对象--》指的给给用户或者开发者展示数据的界面
                 viewmodel 视图模型对象--》 指的是view与model之间的桥梁
        */
        let msg="Hello world!";//相当于model
        window.onload=function(){
            let h4Dom = document.getElementById("h4Dom");
            let inputDom = document.getElementById("inputDom");
            h4Dom.innerHTML=msg;
            inputDom.value=msg;
            
            //通过对事件源的监听来实现，为js对象实现动态事件监听
            //input输入事件
            inputDom.addEventListener("input",function(){
                msg=this.value;
                h4Dom.innerHTML=msg;
            });
        }
    </script>
</head>
<body>
    <div>
        <h4 id="h4Dom"></h4>
        <input type="text" value="" id="inputDom"/>
    </div>
</body>
</html>

Copy after login

Achievement effect:

Is vue in mvvm mode?