todoList

三种框架实现TodoList

最新推荐文章于 2024-01-02 22:20:33 发布

原创最新推荐文章于 2024-01-02 22:20:33 发布 · 744 阅读

0 ·

CC 4.0 BY-SA版权

前端开发同时被 2 个专栏收录

18 篇文章

订阅专栏

前端框架

10 篇文章

订阅专栏

本文通过三种不同的前端框架（jQuery, Angular 和 Avalon）实现了TodoList应用，展示了如何使用这些框架进行数据绑定、事件处理及列表操作等基本功能。

jquery--->todoList

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>todolist</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5">
<form action="" id="todoForm">
<label for="">将下面输入的文字放到todolist</label>
<input type="text" id="todoInput" class="form-control" />
</form>
<p id="todoCount"></p>
<ol id="todoList"></ol>
</div>
</div>
</div>

</body>
<script src="js/jquery-3.0.0.min.js"></script>
</html>
<script>
    var $todoForm = $('#todoForm');
    var $todoInput = $('#todoInput');
    var $todoList = $('#todoList');
    var $todoCount = $('#todoCount');
    function count(){
        var len = $todoList.children().length;
        $todoCount.html(len>0?'现有'+len+'项todo list':'');
    }
    $todoForm.submit(function(e){
        e.preventDefault();
        var input_value = $todoInput.val();
        !!$todoInput.val().trim()&&$todoList.append('<li>'+input_value+'&nbsp;<a                             href="#" class="todoDelete">X</a></li>');
        $todoInput.val('');
        count();
    })
    $todoList.on('click','.todoDelete',function(){
        $(this).parent().remove();
        count();
    })
</script>


<style>
*{
    margin:0;padding:0;
}
#todoList{
    width:94%;
    margin:0 auto;
}
#todoList li{
    line-height: 40px;
    border-bottom:1px solid #eee;
}
#todoList a{
    float: right;
}



</style>

angular--->todoList

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>todolist</title>
</head>
<body>
<div class="container" ng-controller='todos'>
<div class="row">
<div class="col-md-5">
<form action="" ng-submit="add()">
<label for="">将下面输入的文字放到todolist</label>
<input type="text" ng-model="txt" class="form-control" />
</form>
<p ng-hide="todoList.length===0">现有{{todoList.length}}项todo list</p>
<ol id="todoList">
<li ng-repeat="todo in todoList track by $index">
{{todo}}
<a href="#" ng-click="todoList.splice($index,1)">X</a>
</li>
</ol>
</div>
</div>
</div>

</body>
<script src="js/angular.min.js"></script>
</html>
<script>
angular.module('todoApp',[])
.controller('todos',['$scope',function($scope){
$scope.todoList=[];
$scope.add = function(){
!!$scope.txt.trim()&&$scope.todoList.push($scope.txt);
$scope.txt='';
}
}],)
</script>
<style>
*{
margin:0;padding:0;
}
#todoList{
width:94%;
margin:0 auto;
}
#todoList li{
line-height: 40px;
border-bottom:1px solid #eee;
}
#todoList a{
float: right;
}
</style>

avalon --->todoList

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<title>todolist</title>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-md-5" ms-controller='todos'>
<form action="" ms-on-submit="@add">
<label for="">将下面输入的文字放到todolist</label>
<input type="text" ms-duplex="@txt" class="form-control" />
</form>
<p ms-if="@todoList.size>0">现有{{@todoList.size}}项todo list</p>
<ol id="todoList">
<li ms-for="($index,el) in @todoList">
{{el}}
<a href="#" ms-click="@remove($index)">删除</a>
</li>
</ol>
</div>
</div>
</div>
<script src="js/avalon.js"></script>
</body>

<script>
var vm = avalon.define({
$id:'todos',
txt:'',
todoList:[],
add:function(e){
e.preventDefault();
!!vm.txt.trim()&&vm.todoList.push(vm.txt);
vm.txt='';
},
remove:function(index){
avalon.Array.removeAt(vm.todoList,index)
}
})
console.log(vm)


</script>
</html>
<style>
*{
margin:0;padding:0;
}
#todoList{
width:94%;
margin:0 auto;
}
#todoList li{
line-height: 40px;
border-bottom:1px solid #eee;
}
#todoList a{
float: right;
}
</style>