vue学习3:什么是mvp?

通过一张图,大致可以看出什么是传统的mvp模式了。

那么下面还有一段代码,我们可以看一下jQuery是怎么实现之前的todoList功能的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <input type="text" id="input">
        <button id="btn">提交</button>
        <ul id="list"></ul>
    </div>
    <script>
        function Page () {};
        $.extend(Page.prototype, {
            init: function() {
                this.bindEvents()
            },
            bindEvents: function() {
                var btn = $('#btn');
                btn.on('click', $.proxy(this.handleBtnClick, this))
            },
            handleBtnClick: function() {
                var inputElem = $('#input');
                var inputValue = inputElem.val();
                var ulElem = $('#list');
                ulElem.append('<li>'+ inputValue +'</list>');
                inputElem.val('');

            }
        })
        var page = new Page();
        page.init();
    </script>
</body>
</html>


猜你喜欢

转载自blog.csdn.net/weixin_40814356/article/details/80153026
今日推荐