Home > Article > Web Front-end > Is vue in mvvm mode?

Is vue in mvvm mode?

WBOYOriginal: 2022-04-08 11:33:184158browse

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.

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>

Achievement effect:

Is vue in mvvm mode?

[Related recommendation: "vue.js Tutorial"]

The above is the detailed content of Is vue in mvvm mode?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the function of symbols in es6Next article：What is the function of symbols in es6

See more

Is vue in mvvm mode?

Is vue in mvvm mode?

Related articles