欢迎使用CSDN-markdown编辑器

来源：互联网发布：ip地址及端口号编辑：程序博客网时间：2024/06/05 00:42

感想

最近开始学习veu.js，小白一个，配置环境花了很多时间都没弄好，最后一步npm run dev 始终有问题，没办法只能先在script添加一个vue的src放在同一个文件夹里先用着，学习的目的是为了把不懂的弄懂，看了很多其他人的代码，发现自己css排版也是纸上谈兵的水平，只能说要继续努力，加油每一天不荒度！！
下面贴上主要html和app.js代码

<div class="page-top">    <div class="top-bg">        <h2 id="hideshow">IMWEB-作业（1）</h2>    </div></div><div class="main">    <h3 class="big-title">添加任务：</h3>    <input            placeholder="加油！"            class="task-input"            type="text"            v-model="todo"            v-on:keyup.13="addTodo"    />    <ul class="task-count" v-show="list.length">        <li>{{noCheckeLength}}个任务未完成</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>

/** * Created by Administrator on 2017/4/20. */var list = [    {        title:"白日依山尽",        isChecked:false    },    {        title:"黄河入海流",        isChecked: true    },    {        title:"欲穷千里目",        isChecked:true    },    {        title:"更上一层楼",        isChecked:true    },];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});            alert('成功输入新任务')            this.todo = '';        },        deleteTodo(todo){            var index = this.list.indexOf(todo);            this.list.splice(index,1);alert('恭喜完成任务！')        },        edtorTodo(todo){            console.log(todo);            this.beforeTitle = todo.title;            this.edtorTodos = todo;        },        edtorTodoed(todo){            this.edtorTodos = '';        },        cancelTodo(todo){            todo.title = this.beforeTitle;            this.beforeTitle = '';            this.edtorTodos = '';        }    },    directives:{        "foucs":{            update(el,binding){                if(binding.value){                    el.focus();                }            }        }    }});

效果图

添加任务完成任务
删除任务

                                                                      20170420                                                                           lcl

0 0