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

MVP 设计模式

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>

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

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>

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

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

猜你喜欢