Vue全家桶--06 ToDoMVC

6.1 專案介紹與演示

6.2 需求說明

6.3 下載與匯入模板

6.4 初始化專案

6.5 資料列表渲染

6.5.1 功能分析

6.5.2 有資料列表功能實現

app.js宣告一個儲存任務資料的陣列items，並初始化一些資料，注意ES6的寫法

(function (Vue) {//表示依賴了全域性的 Vue, 其實不加也可以，只是更加明確點
    
    //const 表示申明的變數是不可變得，ES6
    const items=[
        {
            id:1,
            content:'Vue/js',
            completed:
 
false
        },
        {
            id:2,
            content:'java',
            completed:false
        },
        {
            id:3,
            content:'C#',
            completed:true
        }
    ]

    new Vue({
        el:'#todoapp',
        data:{
            title:'Hello,todos',
            items 
 
// 物件屬性簡寫，等價於items: items
        }

    });

})(Vue);

修改html頁面

<ul class="todo-list">
                    <!-- 
                        三種狀態：未完成(沒有樣式)，已完成(.completed)，編輯中(.editing)
                     -->
                     <!-- 修改1.v-for迭代;2.:class={key為class樣式名，value為獲取的資料true或false} 
 
-->
                    <li v-for='(item,index) in items' :class="{completed:item.completed}">
                        <div class="view">
                            <!-- 修改：1.v-model繫結狀態值是否選中 -->
                            <input class="toggle" type="checkbox" v-model="item.completed">
                            <!-- 修改：1.{{content}}顯示內容 -->
                            <label>{{item.content}}</label>
                            <!-- 修改：1. :value 繫結id刪除 -->
                            <button class="destroy" :value="item.id"></button>
                        </div>
                        <input class="edit" value="Create a TodoMVC template">
                    </li>
                </ul>

6.5.3 無資料列表功能實現

**原標籤直接新增 v-show 方式

<!-- item.length 當值為0時，表示false,則不顯示 -->
            <section class="main" v-show="items.length">
                <input id="toggle-all" class="toggle-all" type="checkbox">
                <label for="toggle-all">Mark all as complete</label>
                <ul class="todo-list">
                    <!-- 
                        三種狀態：未完成(沒有樣式)，已完成(.completed)，編輯中(.editing)
                     -->
                     <!-- 修改1.v-for迭代;2.:class={key為class樣式名，value為獲取的資料true或false} -->
                    <li v-for='(item,index) in items' :class="{completed:item.completed}">
                        <div class="view">
                            <!-- 修改：1.v-model繫結狀態值是否選中 -->
                            <input class="toggle" type="checkbox" v-model="item.completed">
                            <!-- 修改：1.{{content}}顯示內容 -->
                            <label>{{item.content}}</label>
                            <!-- 修改：1. :value 繫結id刪除 -->
                            <button class="destroy" :value="item.id"></button>
                        </div>
                        <input class="edit" value="Create a TodoMVC template">
                    </li>
                </ul>
            </section>
            <!-- item.length 當值為0時，表示false,則不顯示 -->
            <footer class="footer" v-show="items.length">

**新增一個div標籤 再加上v-show 方式

<!-- item.length 當值為0時，表示false,則不顯示 -->
        <div v-show="items.length">
            <section class="main">
                <input id="toggle-all" class="toggle-all" type="checkbox">
                <label for="toggle-all">Mark all as complete</label>
                <ul class="todo-list">
                    <!-- 
                        三種狀態：未完成(沒有樣式)，已完成(.completed)，編輯中(.editing)
                     -->
                    <!-- 修改1.v-for迭代;2.:class={key為class樣式名，value為獲取的資料true或false} -->
                    <li v-for='(item,index) in items' :class="{completed:item.completed}">
                        <div class="view">
                            <!-- 修改：1.v-model繫結狀態值是否選中 -->
                            <input class="toggle" type="checkbox" v-model="item.completed">
                            <!-- 修改：1.{{content}}顯示內容 -->
                            <label>{{item.content}}</label>
                            <!-- 修改：1. :value 繫結id刪除 -->
                            <button class="destroy" :value="item.id"></button>
                        </div>
                        <input class="edit" value="Create a TodoMVC template">
                    </li>
                </ul>
            </section>
            <footer class="footer">
                <!-- This should be `0 items left` by default -->
                <span class="todo-count"><strong>0</strong> item left</span>
                <!-- Remove this if you don't implement routing -->
                <ul class="filters">
                    <li>
                        <a class="selected" href="#/">All</a>
                    </li>
                    <li>
                        <a href="#/active">Active</a>
                    </li>
                    <li>
                        <a href="#/completed">Completed</a>
                    </li>
                </ul>
                <!-- Hidden if no completed items are left ↓ -->
                <button class="clear-completed">Clear completed</button>
            </footer>
        </div>

**template 與 v-if 結合使用的方式

<!-- template元素，頁面渲染之後這個template元素就不會有，
        需要使用 v-if 與 template搭配，如果使用 v-show 是不行的 -->
        <template v-if="items.length">
            <section class="main">
                <input id="toggle-all" class="toggle-all" type="checkbox">
                <label for="toggle-all">Mark all as complete</label>
                <ul class="todo-list">
                    <!-- 
                        三種狀態：未完成(沒有樣式)，已完成(.completed)，編輯中(.editing)
                     -->
                    <!-- 修改1.v-for迭代;2.:class={key為class樣式名，value為獲取的資料true或false} -->
                    <li v-for='(item,index) in items' :class="{completed:item.completed}">
                        <div class="view">
                            <!-- 修改：1.v-model繫結狀態值是否選中 -->
                            <input class="toggle" type="checkbox" v-model="item.completed">
                            <!-- 修改：1.{{content}}顯示內容 -->
                            <label>{{item.content}}</label>
                            <!-- 修改：1. :value 繫結id刪除 -->
                            <button class="destroy" :value="item.id"></button>
                        </div>
                        <input class="edit" value="Create a TodoMVC template">
                    </li>
                </ul>
            </section>
            <footer class="footer">
                <!-- This should be `0 items left` by default -->
                <span class="todo-count"><strong>0</strong> item left</span>
                <!-- Remove this if you don't implement routing -->
                <ul class="filters">
                    <li>
                        <a class="selected" href="#/">All</a>
                    </li>
                    <li>
                        <a href="#/active">Active</a>
                    </li>
                    <li>
                        <a href="#/completed">Completed</a>
                    </li>
                </ul>
                <!-- Hidden if no completed items are left ↓ -->
                <button class="clear-completed">Clear completed</button>
            </footer>
        </template>

6.6 新增任務

文字框中可新增新的任務；內容不能為空；enter新增，新增完清空文字框

<!-- 新增任務，keyup.enter 回車鍵監聽 -->
            <input class="new-todo" @keyup.enter="addItem" placeholder="What needs to be done?" autofocus>

new Vue({
        el: '#todoapp',
        data: {
            title: 'Hello,todos',
            items // 物件屬性簡寫，等價於items: items
        },
        methods: {
            addItem(event) { //物件屬性函式簡寫,等價於addItem:function(){} ES6
                
                const content = event.target.value.trim();//獲取文字框輸入的資料,去除空格
                const id = this.items.length;//生成id

                if (content.length > 0) {//輸入框不為空新增到陣列中
                    this.items.push({
                        id,//ES6 等價於id:id
                        content,
                        completed: false
                    });
                } else { return; }

                event.target.value='';//清空文字

            }
        }

    });

6.7 顯示所有未完成任務數

計算屬性來完成

<span class="todo-count"><strong>{{remaining}}</strong> item{{remaining === 1?'':'s'}} left</span>

new Vue({
        el: '#todoapp',
        data: {
            title: 'Hello,todos',
            items // 物件屬性簡寫，等價於items: items
        },
        computed: {
            remaining() {
                const unItems =
                    this.items.filter(item => {
                        return !item.completed;
                    });
                //console.log(unItems);
                return unItems.length;
            }
        },
        methods: {
            addItem(event) { //物件屬性函式簡寫,等價於addItem:function(){} ES6
                const content = event.target.value.trim();//獲取文字框輸入的資料,去除空格
                const id = this.items.length;//生成id
                if (content.length > 0) {//輸入框不為空新增到陣列中
                    this.items.push({
                        id,//ES6 等價於id:id
                        content,
                        completed: false
                    });
                } else { return; }
                event.target.value = '';//清空文字
            }
        }

    });

6.8 切換所有任務狀態

計算屬性--toggleAll

雙向繫結計算屬性

<input id="toggle-all" v-model="toggleAll" class="toggle-all" type="checkbox">

toggleAll: {
                //當任務列表 中的狀態發生變化之後，則更新複選框的狀態
                get() {
                    return this.remaining === 0;
                },
                //當複選框的狀態更新之後，則將任務列表中的狀態更新
                set(newValue) { //newValue 當計算屬性toggleAll改變時，newValue獲取改變後的值

                    //當點選複選框之後，複選框的值會發生改變，就會觸發set方法呼叫
                    //將迭代出陣列中的所有任務項，然後將當前複選框的狀態值賦值給每一個任務的狀態值
                    this.items.forEach(item => {
                        item.completed = newValue;
                    });
                }
            }

6.9 移除任務項

removeItem函式

<button class="destroy" :value="item.id" @click="removeItem(index)"></button>

    //移除任務項
            removeItem(index) { 
                console.log(index);
                this.items.splice(index, 1);
            }

6.10 清楚所有已完成的任務

新增一個removecompleted 函式繫結到 清楚已完成任務按鈕上，並且新增v-show標籤

<button v-show="items.length > remaining" @click="removecompleted" class="clear-completed">Clear completed</button>

removecompleted(){
               this.items =    this.items.filter( item => !item.completed);
            }

6.11 編輯任務項

6.12 路由狀態切換(過濾不同狀態資料)

6.13 資料持久化