用一个例子对比Jquery和Vue理解面向对象编程

通过实现一个点击一个按钮，将input框中输入的内容放到ul列表里

首先，jq的通常写法

$('#btn').click(function(){
    $('#list').append("<li>" + $('#input').val() + "</li>");
    $('#input').val('');
});

jq通常写法就是按钮点击时将input输入的内容append至ul列表中

jq面向对象的写法如下

function Page() {}
$.extend(Page.prototype, {
    init: function(){
        this.handleBtnClick();
    },
    handleBtnClick: function(){
        var btn = $('#btn');
        btn.on('click', $.proxy(this.handleBtnFn, this));
    },
    handleBtnFn: function () {
        var input = $('#input');
        var list = $('#list');
        var inputValue = input.val();
        list.append('<li>' + inputValue + '</li>');
        input.val('');
    }
});
var page