Vue学习完成Todo List网页

Vue学习完成Todo List网页

跟着老师学习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中文官网看，讲的很详细。