<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TodoList</title>
<!-- <script src="vue.js"></script> -->
<!-- <script src="jquery.js"></script> -->
</head>
<body>
<div>
<input id="input" type="text" />
<button class="" 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 inputValue = $("#input").val();
var inputelem = $("#input");
var ulelem = $("#list");
ulelem.append('<li>'+inputValue+'</li>');
inputelem.val('');
}
});
var pages = new page();
pages.init();
</script>
<!-- <script src="jquery.js"></script> -->
<script src="jquery-1.7.1.min.js"></script>
</body>
</html>
