使用Vue开发项目(二)

旧城等待， 2022-05-28 12:58 189阅读 0赞

## 项目：任务计划列表 ##

### 项目目录： ###

![70][]

app.js

// 业务逻辑不要放在htmml模板中，以免后期维护过于繁琐
    
    // 数据
    var  list =	[
    	{
    		title:"吃饭打豆豆",
    		isChecked:false		//状态为false不选中
    	},
    	{
    		title:"hehe",
    		isChecked:true		//状态为true选中
    	}
    ];
    
    // vm实例
    new Vue({
    	el:".main",
    	data:{
    		list:list,
    		todo:"",
    		edtorTodos:'',	//记录正在编辑的数据
    		beforeTitle:''//记录之前的数据
    	},
    	computed:{            //显示多少个任务未完成
    		noCheckeLength:function(){
    			return this.list.filter(function(item){
                            return !item.isChecked
                    }).length
    		}
    	},
    	methods:{
    		addTodo(){//添加任务
    
    				this.list.push({
    					title:this.todo,
    					isChecked:false
    				});
    				this.todo = '';
    		},
    		deleteTodo(todo){	//删除任务
    			var index = this.list.indexOf(todo);
    			this.list.splice(index,1);
    		},
    		edtorTodo(todo){	//编辑任务
    			console.log(todo);
    			//编辑任务的时候，记录一下编辑这条任务的title，方便在取消编辑的时候重新给之前的title
    			this.beforeTitle = todo.title;
    
    			this.edtorTodos = todo;
    
    
    		},
    		edtorTodoed(todo){	//编辑任务成功
    			this.edtorTodos =  '';
    		},
    		cancelTodo(todo){	//取消编辑任务
    			todo.title = this.beforeTitle;
    
    			todo.beforeTitle = '';
    
    			//让div显示出来，input隐藏
    			this.edtorTodos='';
    		}
    
    
    	},
    	directives:{              //双击获取焦点
    		"foucs":{
    			update(el,binding){
    				if(binding.value){
    					el.focus()
    				}
    			}
    		}
    	}
    });

todos.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="index.css">
        <script src="./vue.js"></script>
    </head>
    <body>
        <div class="page-top">
            <div class="page-content">
                <h2>任务计划列表</h2>
            </div>
        </div>
        
        <div class="main">
            <h3 class="big-title">添加任务：</h3>
            <input 
                placeholder="例如：吃饭睡觉打豆豆；    提示：+回车即可添加任务" 
                class="task-input" 
                type="text"
                v-model="todo"
                v-on:keyup.enter="addTodo(123,$event)"
            />
            <ul class="task-count" v-show="list.length" >
                <li>
                     {
       {noCheckeLength}}个任务未完成
                </li>
                <li class="action">
                    <a class="active" href="#">所有任务</a>
                    <a href="#">未完成的任务</a>
                    <a href="#">完成的任务</a>
                </li>
            </ul>
            <h3 class="big-title">任务列表：</h3>
            <div class="tasks">
    
                <span class="no-task-tip" v-show="! list.length">还没有添加任何任务</span>
                <ul class="todo-list">
                    <li class="todo" :class="{completed:item.isChecked,editing: item === edtorTodos}" v-for="item in list" >
                        <div class="view">
                            <input class="toggle" type="checkbox" v-model="item.isChecked" />
                            <label @dblclick="edtorTodo(item)">{
       { item.title }}</label>
                            <button class="destroy" @click="deleteTodo(item)"></button>
                        </div>
                        <input v-foucs="edtorTodos === item" 
                        class="edit" 
                        type="text" 
                        v-model="item.title"
                        @blur="edtorTodoed(item)"
                        @keyup.13="edtorTodoed(item)"
                        @keyup.esc="cancelTodo(item)"
    
                        />
                    </li>
                </ul>
            </div>
        </div>
        <script src="./app.js"></script>
    </body>
    </html>

index.css

body {
        margin:0;
        background-color: #fafafa;
        font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    
    h2{
        margin:0;
        font-size: 12px;
    }
    a {
        color: #000;
        text-decoration: none;
    }
    
    input {
        outline: 0;
    }
    
    button {
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        font-size: 100%;
        vertical-align: baseline;
        font-family: inherit;
        font-weight: inherit;
        color: inherit;
        outline: 0;
    }
    
    ul {
        padding:0;
        margin:0;
        list-style: none;
    }
    
    .page-top {
        width: 100%;
        height: 40px;
        background-color: #db4c3f;
    }
    
    .page-content {
        width: 50%;
        margin: 0px auto;
    }
    
    .page-content h2{
        line-height: 40px;
        font-size: 18px;
        color: #fff;
    }
    
    .main {
        width: 50%;
        margin: 0px auto;
        box-sizing:border-box;
    }
    
    .task-input {
        width: 99%;
        height:30px;
        outline: 0;
        border: 1px solid #ccc;
    }
    
    .task-count{
        display: flex;
        margin:10px 0;
    }
    
    .task-count li {
        padding-left: 10px;
        flex: 1;
        color: #dd4b39;
    }
    
    .task-count li:nth-child(1){
        padding: 5px 0 0 10px;
    }
    
    .action {
        text-align: center;
        display: flex;
    }
    .action a {
        margin: 0px 10px;
        flex: 1;
        padding: 5px 0;
        color: #777;
    
    }
    
    .action a:nth-child(3){
        margin-right: 0;
    }
    
    .active {
        border: 1px solid rgba(175, 47, 47, 0.2);
    }
    
    .tasks {
        background-color: #fff;
    }
    .no-task-tip {
        padding:10px 0 10px 10px;
        display: block;
        border-bottom: 1px solid #ededed;
        color:#777;
    }
    
    .big-title {
        color: #222;
    }
    
    
    .todo-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .todo-list li {
        position: relative;
        font-size: 16px;
        border-bottom: 1px solid #ededed;
    }
    
    .todo-list li:hover {
        background-color: #fafafa;
    }
    
    
    .todo-list li.editing {
        border-bottom: none;
        padding: 0;
    }
    
    .todo-list li.editing .edit {
        display: block;
        width: 506px;
        padding: 13px 17px 12px 17px;
        margin: 0 0 0 43px;
    }
    
    .todo-list li.editing .view {
        display: none;
    }
    
    .todo-list li .toggle {
        text-align: center;
        width: 40px;
        /* auto, since non-WebKit browsers doesn't support input styling */
        height: auto;
        position: absolute;
        top: 5px;
        bottom: 0;
        margin: auto 0;
        border: none; /* Mobile Safari */
        -webkit-appearance: none;
        appearance: none;
    }
    
    .toggle {
        text-align: center;
        width: 40px;
        /* auto, since non-WebKit browsers doesn't support input styling */
        height: auto;
        position: absolute;
        top: 5px;
        bottom: 0;
        margin: auto 0;
        border: none; /* Mobile Safari */
        -webkit-appearance: none;
        appearance: none;
    }
    
     .toggle:after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="40" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
    }
    
    .toggle:checked:after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="40" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
    }
    
    .todo-list li label {
        white-space: pre-line;
        word-break: break-all;
        padding: 15px 60px 15px 15px;
        margin-left: 45px;
        display: block;
        line-height: 1.2;
        transition: color 0.4s;
    }
    
    .todo-list li.completed label {
        color: #d9d9d9;
        text-decoration: line-through;
    }
    
    /*.tip-toggle {
        padding-left: 0;
        position: relative;
    }
    
    .tip-toggle .toggle {
        top: -2px;
    }
    
    .tip-toggle span {
        margin-left: 45px;
    }*/
    
    .todo-list li .destroy {
        display: none;
        position: absolute;
        top: 0;
        right: 10px;
        bottom: 0;
        width: 40px;
        height: 40px;
        margin: auto 0;
        font-size: 30px;
        color: #cc9a9a;
        margin-bottom: 11px;
        transition: color 0.2s ease-out;
    }
    
    .todo-list li .destroy:hover {
        color: #af5b5e;
    }
    
    .todo-list li .destroy:after {
        content: '×';
    }
    
    .todo-list li:hover .destroy {
        display: block;
    }
    
    .todo-list li .edit {
        display: none;
    }
    
    .todo-list li.editing:last-child {
        margin-bottom: -1px;
    }

vue.js

在官网下载： [点击进入][Link 1]

[70]: /images/20220528/5c921f8f35e14642aa1bfaf79704e912.png
[Link 1]: https://vuejs.bootcss.com/v2/guide/installation.html