Vue学习完成Todo List网页

来源：互联网发布：1060剑灵优化编辑：程序博客网时间：2024/06/16 07:43

Vue学习完成Todo List网页

todolist
跟着老师学习Vue，我喜欢清爽的界面，就自己改了样式，看起来还不错，以后就用来记录要做的事情，实用性还蛮强。

Vue非常容易上手，运用到了双向绑定机制，即HTML里的DOM元素与JS里的Vue实例进行双向绑定，只要Vue实例中的代理数据改变，HTML中的实际数据就会跟着变，这和原生的Js的命令驱动模式不同，它是数据驱动模式，通过数据的改变来控制DOM的变化。什么意思呢？我们会在接下去的学习中慢慢实践。

Todo List这个网页用到了很多Vue的指令，在这里我贴出一部分代码，全部代码请戳我的Github

以下是HTML部分

<div class="main">    <h3 class="big-title">添加任务：</h3>    <input          placeholder="在此添加任务"         class="task-input"         type="text"        v-model="things"        @keyup.enter="addTodo"    />    <ul class="task-count" v-show="list.length">        <li>            {{unCheckedLength}}个任务未完成</li>        <li class="action">            <a :class="{active: visibility == 'all'}" href="#all">所有任务</a>            <a :class="{active: visibility == 'unfinished'}"href="#unfinished">未完成任务</a>            <a :class="{active: visibility == 'finished'}"href="#finished">完成任务</a>        </li>    </ul>    <div class="tasks">        <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>        <ul class="todo-list">            <li class="todo" v-for="item in filteredList" :class="{completed: item.isChecked,editing:item === editItem}" >                <div class="view">                    <div class="word">                        <input class="toggle" type="checkbox" v-model="item.isChecked" >                        <label @dblclick="editTodo(item)">{{item.title}}</label>                    </div>                    <button class="destroy" type="text" @click="deleteTodo(item)">×</button>                </div>                <input                     v-focus="editItem === item"                     class="edit"                     type="text"                     v-model="item.title"                    @blur="edited"                    @keyup.enter="edited"                    @keyup.esc="cancel(item)"                />            </li>        </ul>    </div></div>

Vue实例部分

var vm = new Vue({    el: ".main",    data: {        list:list,        things:"",        editItem:"",        beforeTitle:"",        visibility:"all",        inputId:"",    },      watch:{        list:{            handler:function(){                store.save("todolist",this.list)            },            deep:true        }    },    computed:{        unCheckedLength(){            return this.list.filter(function(item){                return item.isChecked == false            }).length        },        filteredList(){                     return filter[this.visibility] ? filter[this.visibility](this.list) : list        }    },    methods: {        addTodo(ev){            if(this.things !== ""){                var item = {                    title:this.things,                    isChecked:false,                    }                this.list.push(item)            }                           this.things = "";        },        deleteTodo(item){            var index = this.list.indexOf(item);            this.list.splice(index,1);        },        editTodo(item){             this.beforeTitle = item.title;            this.editItem = item        },        edited(item){            this.editItem = ""        },        cancel(item){            item.title =  this.beforeTitle;            this.editItem = "";            this.beforeTitle = ""        }    },    directives:{        "focus":{                                               update(el,binding){                if(binding.value){                    el.focus()                }            }        }    }});

这是一个基本的Vue实例，el是和DOM元素连接的挂载点，data是代理数据，在DOM的内容中如果要用到代理数据就用{{xxx}}表示，比如{{list}}，{{visibility}}，而当data中的代理数据出现在DOM标签里的时候就不需要用花括号。

new Vue({    el: ".main",    data: {        list:list,        things:"",        editItem:"",        beforeTitle:"",        visibility:"all",        inputId:"",    }}）

Vue要用大的方法都放在methods部分

methods: {            addTodo(ev){                if(this.things !== ""){                    var item = {                        title:this.things,                        isChecked:false,                        }                    this.list.push(item)                }                               this.things = "";            },            deleteTodo(item){                var index = this.list.indexOf(item);                this.list.splice(index,1);            },            editTodo(item){                 this.beforeTitle = item.title;                this.editItem = item            },            edited(item){                this.editItem = ""            },            cancel(item){                item.title =  this.beforeTitle;                this.editItem = "";                this.beforeTitle = ""            }    }

还有计算属性

computed:{        unCheckedLength(){            return this.list.filter(function(item){                return item.isChecked == false            }).length        },        filteredList(){                     return filter[this.visibility] ? filter[this.visibility](this.list) : list        }}

观察属性

watch:{        list:{            handler:function(){                store.save("todolist",this.list)            },            deep:true        }}

自定义属性

directives:{        "focus":{                                               update(el,binding){                if(binding.value){                    el.focus()                }            }        }}

在HTML中要绑定这些数据，Vue也提供了一套指令：

v-bind绑定一个或多个特性，一般用于绑定class和style， v-on 绑定事件， v-show，v-if都是根据条件渲染元素，v-for是渲染列表…等等，我就不一一赘述了。可以去Vue中文官网看，讲的很详细。

0 0