Vue全家桶--06 ToDoMVC

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 数据持久化