欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

初识 Vue(03)---(MVVM 设计模式)

程序员文章站 2024-02-08 21:57:52
...

MVP 设计模式

初识 Vue(03)---(MVVM 设计模式)

Model 层:模型层

Presenter 层:呈现层(业务逻辑控制层)

View 层:视图层(DOM 展示)

过程:视图层(V)发出一个事件交给控制器(P 呈现层),控制器调用 Ajax 去模型层(M)获取数据 ; 或者直接去视图层(V)进行DOM 操作。控制器(P 呈现层)是核心,是模型层(M)和 视图层(V) 的中转站,其中大部分代码在进行 DOM 操作

(面向 DOM 开发)。模型层(M)比较边缘。

实例:

用 jQuery 实现 todo-list 功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList Jquery</title>
    <script src = './jquery.js'></script>
</head>
<body>
    <div>
        <input id='input' type="text" >
        <button id="btn">提交</button>
        <ul id = 'list'></ul>  
    </div>

    <script>
        function Page() {

        }

        $.extend(Page.prototype,{
            init:function(){          // 控制器 P
                this.bindEvents()
            },
            bindEvents:function(){
                var btn = $('#btn'); 
            },
            handleBtnClick:function(){
                var inptutValue = $("#input").val();
                var ulElem = $("#list");
                ulElem.append('<li>' + inputValue + '</li>'):
                inputElem.val('');
            }
            })
            
            var page =  new Page();
            page.init();        
    </script>   
</body>
</html>
 init:function(){          // 控制器 P
                this.bindEvents()
            },
            bindEvents:function(){
                var btn = $('#btn'); 
            },
            handleBtnClick:function(){
                var inptutValue = $("#input").val();
                var ulElem = $("#list");
                ulElem.append('<li>' + inputValue + '</li>'):
                inputElem.val('');
            }
            })
            
            var page =  new Page();
            page.init();        
    </script>   
</body>
</html>

输出:

初识 Vue(03)---(MVVM 设计模式)

 

本段代码采用 MVP 的设计模式,并没有用 ajax 获取内容 ,故 M(模型层)被省略,通过控制器(P)来改变视图(V)

MVVM 设计模式

初识 Vue(03)---(MVVM 设计模式)

Model 层:模型层(存储数据)

View 层:视图层(显示数据)

ViemModel层:Vue 自带的,开发时无需关注具体如何实现

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>                                       V 层
        <input type="text" v-model="inputValue"/>
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>  
    </div>

    <script>
        var app = new Vue({                               M 层
            el: '#app',
            data:{
                list: [],
                inputValue:''
            },
            methods:{
                handleBtnClick:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        })
    </script>  
</body>
</html>
  <div id ='app'>                                       V 层
        <input type="text" v-model="inputValue"/>
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>  
    </div>

    <script>
        var app = new Vue({                               M 层
            el: '#app',
            data:{
                list: [],
                inputValue:''
            },
            methods:{
                handleBtnClick:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        })
    </script>  
</body>
</html>

通过操纵 M(模型层) 层 ,然后 V(视图层) 层会自动跟着变化 ,是通过 VM 层(API:Object.define.protein 和 虚拟DOM机制来实现)来实现的。 M(模型层) 层 与  V(视图层)之间双向联系,好处是在开发过程中只需关注 M(模型层)即可,M(模型层)是核心(面向数据开发),极大减少DOM 开发,减少代码量。