Vue官網todoMVC示例

這個示例是模仿官網示例樣式和功能用我本身的方式寫的，基本上沒有看官網的源碼，只參考自定義指令。讓咱們一步步來探討一下。官網demo

要實現的功能

1. 單條添加todo
2. 單條刪除todo
3. 雙擊編輯todo
4. 單條todo已完成相應樣式狀態改變
5. 所有todo是已完成相應樣式狀態改變
6. 清除所有已完成todos
7. 待辦todos數量顯示
8. 全部todos，已完成todos，未完成todos篩選

單條添加todo

<input type="text" class="todos_add" placeholder="What needs to be done?" 
@keyup.enter="addTodo($event.target)" //綁定enter事件
ref="currentInput">//操做input元素使enter一下以後清空輸入框內容

data() {//一些初始化數據
    return {
        todolists: [],
        dataStatus: ["All", "Active", "Completed"],
        dataStatusIndex: 0,
        whichShow: true,
        defaultShow: true
    }
},

addTodo(e) { //添加todo
    var val = e.value
    if (val === "") {return} //若是輸入內容爲空則當即返回
    this.todoLists = this.todoLists.concat({//使用concat這個api添加todo
        value: val, //輸入內容
        isEditing: false, //是否在編輯狀態
        isActive: false, //刪除X圖標是否激活
        isChecked: false //是否已完成
    })
    this.$refs.currentInput.value = "" //按下enter添加todo以後把輸入框value清零
    window.localStorage.setItem("content",JSON.stringify(this.todoLists))//使用localStorage以JSON格式存儲數據
},

把每條todo的對應狀態都存在同一個對象當中，在操做改變todo狀態的時候不會被統一處理，使得每條todo都有單獨的狀態。

單條刪除todo

<li  class="content_todoList"
 v-for="(list,index) in todoLists" 
 @mouseover="list.isActive = true" //鼠標移入todo改變對應todo的isActive狀態
 @mouseleave="list.isActive=false" //鼠標移出todo改變對應todo的isActive狀態
    <span class="el-icon-close content_todoList_delete" 
    :class="{show: list.isActive}" //動態綁定class使鼠標移動到某一todo顯示X圖標
    @click="deleteTodo(index)"> //綁定刪除單條todo事件
    </span>
</li>

deleteTodo(index) { //刪除單條todo
        this.todoLists.splice(index, 1)//使用splice的api
        window.localStorage.setItem("content",JSON.stringify(todoLists)) //以JSON格式存儲數據//localStorage存儲數據
},

在每一個li元素上綁定了鼠標移入和移除的事件來動態的改變每一個todo的isActive，而後再使用isActive動態顯示class。

雙擊編輯todo&&單條todo已完成

<input type="checkbox" class="checkBox" 
v-model="list.isChecked">//雙向綁定isChecked

<div class="content_todoList_main" 
@dblclick="toEdit(list)" //雙擊事件
v-show="!list.isEditing" //切換元素
:class="{deleted:list.isChecked}"> //動態綁定class該表已完成todo樣式
{{list.value}}
</div>

<input type="text" class="content_todoList_main main_input" 
v-model="list.value" //雙向綁定可輸入value
v-show="list.isEditing" //切換元素
v-todo-focus="list.value" //自定義指令，雙擊以後自動focus對焦
@blur="unEdit(list)"> //綁定blur失去焦點事件

methods: {
    toEdit(obj) { //使添加的todothing可編輯
        obj.isEditing = true
    },
    
    unEdit(obj) { //使添加的todothing不可編輯
        obj.isEditing = false
    },
}

directives: { //自定義focus指令,須要一個binding參數作判斷
    "todo-focus": function (el, binding) {
        if (binding.value) {
            el.focus()
        }
    }
}

經過每一個todo裏的isEditing屬性控制show和是否可編輯兩個狀態，雙擊div以後改變當前todo的isEditing爲true，從而顯示爲input，input失去焦點以後再經過blur事件改成false。
經過todo的idChecked來控制是否已完成，從而動態改變樣式。

所有todos已完成

<span 
class="icon-down el-icon-arrow-down" //使用element庫作向下箭頭icon
v-show="todoLists.length>0" //經過todoLists控制是否顯示向下箭頭icon
@click="selectAllTodos"></span> //所有已完成事件

selectAllTodos() { //設置全部todo爲已完成,使用map的api經過todo的isChecked屬性操做
    this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)
}

待辦todos數量顯示

<div class="data_times" v-show="times === 0"> //times爲0顯示item，大於0顯示items，細節註定成敗
    <span>{{times}}</span>&nbsp item left
</div>
<div class="data_times" v-show="times > 0">
<span>{{times}}</span>&nbsp items left</div>

computed: {
    times() { //使用計算屬性計算待辦todos的次數 
        let todoArr = this.todoLists
        let times = 0
        for (let i = 0; i < todoArr.length; i++) {
            if (todoArr[i].isChecked === false) {
                times++
            }
        }
        return times
    }
},

使用了計算屬性對todoLists計算，用for循環刷選出idChecked爲true的累加，最後返回times。

清除所有已完成todos

<div class="data_clearTodos" 
@click="clearTodos" 
v-show="times < todoLists.length"> //若是待辦事件次數小於總todoLists長度就顯示「clear completed」
    <a href="#">clear completed</a>
</div>

<div class="data_clearTodos" 
@click="clearTodos" 
v-show="times === todoLists.length"> //若是待辦事件次數等於總todoLists長度就顯示「clear completed」
    <a href="#"></a>
</div>

clearTodos() { //清空已完成的todoLists，使用filter的api進行篩選
    this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)
    window.localStorage.setItem("content",JSON.stringify(this.todoLists)) //以json格式存儲數據
},

若是待辦todos的times小於todoLists長度，就證實有已完成的todo，就能夠顯示「clear completed」，若是相等就說明沒有已完成的todo。

三種狀態篩選

全部todos，已完成todos，未完成todos篩選

<li class="content_todoList" 
v-show="defaultShow || (whichShow?list.isChecked:!list.isChecked)">

<div class="data_status">
    <a href="#" 
    :class="{active: index === dataStatusIndex}" //動態class實現tab切換
    v-for="(item ,index) in dataStatus" v-for循環
    @click="switchStatus(index)" //切換不一樣tab顯示內容
    :key="index">
        {{item}}
    </a>
</div>

switchStatus(index) { //經過if條件判斷操做
    this.dataStatusIndex = index
    if (this.dataStatus[index] === "Active") {
        this.defaultShow = false
        this.whichShow = false
    } else if (this.dataStatus[index] === "Completed") {
        this.defaultShow = false
        this.whichShow = true
    } else if (this.dataStatus[index] === "All") {
        this.defaultShow = true
    }
},

我這裏是同時if條件句判斷操做，有點麻煩，目前尚未想出來其餘方案。在li元素使用三元運算符和或運算符進行操做顯示不一樣狀態的todos。

完整代碼

<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    input {
        outline: none;
    }

    ul,
    li,
    ol {
        list-style: none;
    }

    #app {
        width: 800px;
        height: 900px;
        margin: 0 auto;
        text-align: center;
        background-color: rgb(245, 245, 245);
        padding: 24px 0;
    }

    #app .header {
        font-size: 48px;
    }

    .content {
        width: 72%;
        margin: 0 auto;
        box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.25);
        position: relative;
    }

    .icon-down {
        position: absolute;
        font-size: 24px;
        top: 16px;
        left: 16px;
        cursor: pointer;
    }

    #app .content .todos_add {
        width: 100%;
        height: 56px;
        padding: 16px 56px;
        font-size: 24px;
        border: 1px solid transparent;
    }

    .content_todoLists {
        position: relative;
        z-index: 3;
    }

    .content_todoList {
        display: flex;
        flex-direction: row;
        border-top: 1px solid #ccc;
        font-size: 24px;
        padding: 8px;
        background-color: white;
        align-items: center;
    }

    .checkBox {
        width: 20px;
        height: 20px;
        margin-left: 10px;
    }

    .content_todoList_main {
        flex: 1;
        text-align: left;
        margin-left: 16px;
        font-size: 20px;
        padding: 6px 0;
    }

    .main_input {
        position: relative;
        z-index: 1;
    }

    .content_todoList_delete {
        position: absolute;
        right: 16px;
        color: rgb(252, 55, 55);
        font-weight: 500;
        display: none;
        cursor: pointer;
    }

    .show {
        display: block;
    }

    .deleted {
        text-decoration-line: line-through;
        color: #bbb;
    }

    .show:hover {
        color: rgb(255, 0, 0);
        font-weight: 700;
    }

    ::-moz-placeholder {
        color: rgb(221, 218, 218);
    }

    ::-webkit-input-placeholder {
        color: rgb(221, 218, 218);
    }

    :-ms-input-placeholder {
        color: rgb(221, 218, 218);
    }

    .data {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        font-size: 14px;
        font-weight: 300;
        color: rgb(145, 145, 145);
    }

    a {
        text-decoration: none;
        color: rgb(145, 145, 145);
    }

    .data_times {
        width: 73px;
    }

    .data_clearTodos {
        width: 142px;
    }

    .data_status a {
        display: inline-block;
        border: 1px solid transparent;
        border-radius: 2px;
        padding: 1px 4px;
        margin: 0 2px;
    }

    .data_status a:hover {
        border-color: #bbb;
    }

    .data_clearTodos a:hover {
        text-decoration-line: underline;
    }

    .active {
        box-shadow: 0 0 1px black;
    }
</style>

<body>
    <div id="app">
        <header class="header">todos</header>
        <div class="content">
            <span class="icon-down el-icon-arrow-down" 
            v-show="todoLists.length>0" 
            @click="selectAllTodos">
            </span>
            <input type="text" class="todos_add" placeholder="What needs to be done?" 
            @keyup.enter="addTodo($event.target)" 
            ref="currentInput">
            <ul class="content_todoLists">
                <li v-for="(list,index) in todoLists" class="content_todoList" 
                @mouseover="list.isActive = true" 
                @mouseleave="list.isActive=false"
                v-show="defaultShow || (whichShow?list.isChecked:!list.isChecked)">
                    <input type="checkbox" class="checkBox" v-model="list.isChecked">
                    <div class="content_todoList_main" @dblclick="toEdit(list)" v-show="!list.isEditing" :class="{deleted:list.isChecked}">
                        {{list.value}}
                    </div>
                    <input type="text" class="content_todoList_main main_input" 
                    v-model="list.value" 
                    v-show="list.isEditing" 
                    v-todo-focus="list.value"
                    @blur="unEdit(list)">
                    <span class="el-icon-close content_todoList_delete" :class="{show: list.isActive}" @click="deleteTodo(index)"></span>
                </li>
            </ul>
            <div class="data" v-show="todoLists.length>0">
                <div class="data_times" v-show="times === 0">
                    <span>{{times}}</span>&nbspitem left
                </div>
                <div class="data_times" v-show="times > 0">
                    <span>{{times}}</span>&nbspitems left
                </div>
                <div class="data_status">
                    <a href="#" :class="{active:index === dataStatusIndex}" v-for="(item,index) in dataStatus" @click="switchStatus(index)" :key="index">
                        {{item}}
                    </a>
                </div>
                <div class="data_clearTodos" @click="clearTodos" v-show="times < todoLists.length">
                    <a href="#">clear completed</a>
                </div>
                <div class="data_clearTodos" @click="clearTodos" v-show="times === todoLists.length">
                    <a href="#"></a>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                todoLists: [],
                dataStatus: ["All", "Active", "Completed"],
                dataStatusIndex: 0,
                whichShow: true,
                defaultShow: true
            }
        },
        computed: {
            times() { //使用計算屬性計算待辦todos的次數 
                let todoArr = this.todoLists
                let times = 0
                for (let i = 0; i < todoArr.length; i++) {
                    if (todoArr[i].isChecked === false) {
                        times++
                    }
                }
                return times
            }
        },
        methods: {
            toEdit(obj) { //使添加的todo可編輯
                obj.isEditing = true
            },
            unEdit(obj) { //使添加的todo不可編輯
                obj.isEditing = false
            },
            addTodo(e) { //添加todo
                var val = e.value
                if (val === "") {
                    return
                } //若是輸入內容爲空則當即返回
                this.todoLists = this.todoLists.concat({ //使用concat這個api添加todo
                    value: val, //輸入內容
                    isEditing: false, //是否在編輯狀態
                    isActive: false, //刪除X圖標是否激活
                    isChecked: false //是否已完成
                })
                this.$refs.currentInput.value = "" //按下enter添加todo以後把輸入框value清零
                window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //使用localStorage以JSON格式存儲數據
            },
            deleteTodo(index) { //刪除todo
                this.todoLists.splice(index, 1)
                window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //以json格式存儲數據
            },
            switchStatus(index) { //試下下方三個狀態切換，略麻煩
                this.dataStatusIndex = index
                if (this.dataStatus[index] === "Active") {
                    this.defaultShow = false
                    this.whichShow = false
                } else if (this.dataStatus[index] === "Completed") {
                    this.defaultShow = false
                    this.whichShow = true
                } else if (this.dataStatus[index] === "All") {
                    this.defaultShow = true
                }
            },
            clearTodos() { //清空已完成的todoLists
                this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)
                window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //以json格式存儲數據
            },
            selectAllTodos() { //設置全部todo爲已完成
                this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)
            }
        },
        directives: { //自定義focus指令
            "todo-focus": function (el, binding) {
                if (binding.value) {
                    el.focus()
                }
            }
        },
        created() {
            let myStorage = window.localStorage.getItem('content')
            this.todoLists = JSON.parse(myStorage) || [] //由於todoLists初始值是null,使用或運算符，若是爲null設爲空數組
        }
    })
</script>