vue之TodoMVC项目实战

一、初始化项目

1、下载模板

进入github中https://github.com/tastejs/todomvc-app-template，并且在命令行将其clone下来

git clone https://github.com/tastejs/todomvc-app-template.git

2、安装依赖

进入项目目录中安装依赖

npm install

3、引入vue.js文件

首先在命令行中安装vue

npm install vue

然后再index.html中引入

然后再app.js文件中写入相应的逻辑代码

二、实现功能

1、数据列表渲染功能

1.1 功能分析

• 有数据

每一个数据对象：
{
  id:1,
 content:'',
complated:''  #表示是否已经完成的任务true（false）  

}
并且每一个数据对象有三个状态：
　　　　　　　　　　　　未完成（没有样式）
　　　　　　　　　　　　已完成（.completed ）
　　　　　　　　　　　　编辑中( .editing )

• 无数据

输入框下面的部分应该隐藏起来

1.2 实现

• 创建一个数据源

                    items:[
                    {id:1,content:'dddd',completed:false},
                    {id:2,content:'aaaa',completed:false},
                    {id:3,content:'bbbb',completed:false},
                    {id:4,content:'cccc',completed:false},
                ]

• 处理有数据的情况

<ul class="todo-list">
            <!-- These are here just to show the structure of the list items -->
            <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
                    <!-- 根据不同状态获取相应的样式，三种状态  -->
            <li v-for="(item,index) in items" :class="{completed:item.completed}">
                <div class="view">
                    <!-- v-model进行双向绑定，checkbox是否选中  -->
                    <input class="toggle" type="checkbox" v-model="item.completed">
                    <!-- 获取对应对象的内容  -->
                    <label>{{item.content}}</label>
                    <!-- 将id传入用于删除对应的数据  -->
                    <button class="destroy" :value="item.id"></button>
                </div>
                <input class="edit" value="Create a TodoMVC template">
            </li>

        </ul>

• 处理无数据的情况

利用v-show指令判断数组长度是否为0，也就是是否为false

<footer class="footer" v-show="items.length">
        <!-- 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>

2、添加任务功能

2.1 功能分析

• 将输入的内容添加到任务列表中
• 如果输入为空，不做任何事情
• 按enter键添加到任务列表，并清空输入框

2.2 实现

<header class="header">
        <h1>todoapp</h1>
        <!--绑定键盘事件添加数据-->
        <input @keyup.enter="addItem" class="new-todo" placeholder="What needs to be done?" autofocus>
    </header>

在app.js文件的methods参数写入方法

                addItem(event){
                    //获取文本框中的值
                    const newValue=event.target.value.trim();
                    //判断是否为空，如果为空什么也不做
                    if(!newValue.length){
                        return
                    }
                    //如果不为空将新值添加到数组中
                    newObject={
                        id:this.items.length+1, //生成一个新的id
                        content:newValue,
                        completed:false
                    };
                    this.items.push(newObject);
                    //将文本框置空
                    event.target.value=''
                }

3、显示所有未完成任务数功能

3.1 功能分析

• 当数组发生变化时计算内部对象的个数，可通过计算属性
• 利用filter函数筛选出未完成任务的个数
• 任务数量为单数时为item,为复数时为items

3.2 实现

    <!-- 返回所有未完成任务的数量，并且如果为单数就为item,否则为items -->
        <span class="todo-count"><strong>{{ incomplete }}</strong> item{{ incomplete===1? '' : 's' }} left</span>

在app.js文件的computed参数中写入对应的方法

    incomplete(){
                    //箭头函数返回未完成任务的个数
                    return this.items.filter(item=>!item.completed).length
                    // this.items.filter(function (item) {
                    //     return !item.completed
                    // }).length
                }

4、切换所有任务状态

4.1 功能分析

• 点击输入框前面的复选框后，将所有任务标记为与复选框相同的状态

　　　　　（1）使用计算属性中的set方法，此时需要v-model进行数据的双向绑定，通过监听数据属性，获取新的checkbox的值

　　　　　（2）将获取的值赋给每一个任务项

• 当 选中/取消 某个任务后，复选框 也应同步更新状态

　　　　　（1）使用计算属性的get方法，判断所有incomplete是否为 0 ，

　　　　　（2）绑定了 incomplete，当 incomplete发生变化后， 自动更新复选框状态（如果为0说明任务已经全部完成，复选框会自动选中，反之不选中

4.2 实现

index.html

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

app.js

    isSelectAll:{
                    //循环数据源中的每一个对象，并且将通过v-model双向绑定获取的值赋给每一个item中的状态，从而根据input checkbox的状态去顶任务的状态
                    set:function (newState) {
                        this.items.forEach(function (item) {
                            item.completed=newState;
                        })
                    },

                    //根据任务完成的状态完成绑定v-model的input checkbox框的状态获取
                    get:function () {

                        return this.incomplete===0
                    }

                }

5、删除任务项

5.1 功能分析

• 悬停在某个任务项上显示 X 移除按钮，可点击移除当前任务项

　　　　　　　　（1） 移除按钮处添加点击事件

　　　　　　　　（2）通过数组函数 splice 移除任务

5.2 实现

index.html

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

app.js

//移除对象 splice()，传入移除对象的索引，以及从此处开始完后删掉的数量
                removeItem(index){
                    this.items.splice(index,1)

                },

6、编辑任务项

6.1 功能分析

• 双击 <label> （某个任务项）进入编辑状态（在 <li> 上通过 .editing 进行切换状态）
• 进入编辑状态后输入框显示原内容，并会自动获取编辑焦点
• 输入状态按 Esc 取消编辑，editing 样式应该被移除
• 按 Enter 键 或 失去焦点时 保存改变数据，移除 editing 样式

6.2 实现

• 双击 <label> （某个任务项）进入编辑状态（在 <li> 上通过 .editing 进行切换状态）

<!-- 获取对应对象的内容，在内容的标签上绑定双击事件--> 
　　<label @dblclick="toEdit(item)">{{item.content}}</label>

                //双击进入编辑模式，也就是加入.editing样式
                toEdit(item){
                    this.currentItem=item
                },

• 进入编辑状态后输入框显示原内容，并会自动获取编辑焦点

    <!-- 显示点击编辑后的默认值:value="item.content"  -->
                <input class="edit" v-todo-focus="item===currentItem"  :value="item.content"  >

    //自定义局部指令，用于聚焦编辑框修改内容，当进入编辑模式的对象与传入的对象是同一个时聚焦，防止聚焦到别处
            directives:{
                "todo-focus":{
                    //当指令的值更新后会调用此方法
                    update(el,binding){
                        //el表示作用的元素
                        //binding表示指令后输入的内容
                        if(binding.value){
                            el.focus()
                        }

                    }

                }
            },

• 输入状态按 Esc 取消编辑，editing 样式应该被移除

    <!-- 显示点击编辑后的默认值:value="item.content"  -->
                <input class="edit" @keyup.esc="cancelEdit"
                       v-todo-focus="item===currentItem"
                       :value="item.content"  >

                //点击键盘的esc取消编辑
                cancelEdit(){
                    this.currentItem=null
                },

• 按 Enter 键 或 失去焦点时 保存改变数据，移除 editing 样式

    <!-- 显示点击编辑后的默认值:value="item.content"  -->
                <input class="edit" @keyup.esc="cancelEdit"
                       @keyup.enter="saveData(item,index,$event)"
                       @blur="saveData(item,index,$event)"
                       v-todo-focus="item===currentItem"
                       :value="item.content"  >

    //通过enter以及blur事件，保存数据，只有当获取焦点才会触发该事件
                saveData(item,index,event){
                    //获取对应文本框中去除空格后的内容
                    const content=event.target.value.trim();
                    //判断内容是否为空，如果为空，删除任务项
                    if(!content){
                        //重用removeItem函数删除
                        this.removeItem(index)
                    }
                    //否则对数据进行更新
                    item.content=content;
                    //更新后移除编辑样式，.editing
                    this.currentItem=null

                },

7、清除所有任务项

7.1 功能分析

• 单击右下角 Clear completed 按钮时，移除所有已完成任务
• 当列表中没有已完成的任务时，应该隐藏 Clear completed 按钮

7.2 实现

• 单击右下角 Clear completed 按钮时，移除所有已完成任务

在index.html添加点击事件，然后再app.js中通过filter函数锅炉出所有未完成任务，并且赋给items

index.html

    <!-- Hidden if no completed items are left ↓ -->
<!--在对应的地方添加点击事件-->
        <button @click="removeAllCompleted" class="clear-completed">Clear completed</button>

app.js

                //过滤出所有未完成的任务项,并且将过滤后的数据赋值给items
                removeAllCompleted(){
                    this.items= this.items.filter((item)=>!item.completed)
                },

• 当列表中没有已完成的任务时，应该隐藏 Clear completed 按钮

判断总的任务数与没有完成任务数的大小，如果当总任务数 ( items.length ) > 未完成数 ( incomplete) ，说明列表中还有已完成数据，则是显示按钮；反之不显示。

index.html

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

app.js

//计算属性
incomplete(){
                    //箭头函数返回未完成任务的个数
                    return this.items.filter(item=>!item.completed).length
                    // this.items.filter(function (item) {
                    //     return !item.completed
                    // }).length
                },

8、 过滤出不同状态 的数据

8.1 功能分析

• 根据点击的状态不同，获取不同状态下的数据
• 改变不同状态下的样式

8.2 实现

• 根据点击的状态不同，获取不同状态下的数据

　　　　　　（1）在 data 中定义接收状态变化的值filterStatus

　　　　　　（2）通过 window.onhashchange 获取点击的路由 hash （# 开头的），来获取对应的那个状态值，并将状态值赋值给 filterStatus

　　　　　　（3）定义一个计算属性 filterItems 用于过滤出目标数据, 用于感知 filterStatus 的状态值变化，当变化后，通过 switch-case + filter 过滤出目标数据。

app.js

//1、定义变量
data:{
        filterState:'all',

            },

//2、获取路由hash值,并且截取需要的路由，当截取的为空时返回‘all’
        window.onhashchange=function () {
        // window.location.hash  获取的是这样的数据 #/active
            const hash=window.location.hash.substr(2) || 'all';
            //将状态值赋值给vm实例中的filterState
            vm.filterState = hash
        };

　　　　//第一次访问生效，手动调用一次
        window.onhashchange()

//3、定义计算属性filterItems
                //过滤出不同状态下的数据，以this.filterState为过滤条件
                filterItems(){
                    switch (this.filterState) {
                        case "active":
                            return this.items.filter(item=>!item.completed);
                            break
                        case "completed":
                            return this.items.filter(item=>item.completed);
                            break
                        default:
                            return this.items;
                            break
                    }

                },

index.html

<!--将v-for循环的items替换为filterItems-->
<li v-for="(item,index) in filterItems" :class="{completed:item.completed,editing:item===currentItem}">

• 改变不同状态下的样式

        <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>

将上述被选中的样式切换为：

class="selected"

如下：

        <ul class="filters">
            <li>
                <a :class="{selected:filterState === 'all'}" href="#/">All</a>
            </li>
            <li>
                <a :class="{selected:filterState === 'active'}" href="#/active">Active</a>
            </li>
            <li>
                <a :class="{selected:filterState === 'completed'}" href="#/completed">Completed</a>
            </li>
        </ul>

9、数据持久化（localStorage）

9.1 功能分析

目前数据只是单纯的放在内存中，自己定义的数组：

data:{
                items:[
                    {id:1,content:'dddd',completed:false},
                    {id:2,content:'aaaa',completed:false},
                    {id:3,content:'bbbb',completed:false},
                    {id:4,content:'cccc',completed:false},
                ],
                currentItem:null,
                filterState:'all',

            },

如果需要保存在本地，可以使用localStorage ，它主要是用于本地存储数据。语法如下：

//保存数据语法：
localStorage.setItem("key", "value");

//读取数据语法：
var data= localStorage.getItem("key");

//删除数据语法：
localStorage.removeItem("key");

本项目中使用的步骤如下：

• 定义 itemStorage 数据存储对象，内部自定义 fetch 获取本地数据 ，save 存数据到本地。
• 修改 Vue 实例中 data 选项的 items 属性，通过 itemStorage.fetch() 方法初始化数据
• Vue 实例中增加一个 watch 选项，用于监听 items 的变化，一旦变化通过 itemStorage.save() 重新保存数据到本地

9.2 实现

• 定义 itemStorage 数据存储对象，里面自定义 fetch 获取本地数据 ，save 存数据到本地。

var STOREGE_KEY = "todo-items";

    //定义localstorege对象，注意是在Vue实例外面定义的
    const itemStorage = {
        //获取本地数据的方法
        fetch:function () {
            //获取数据并且数据反序列化，变成数组对象，如果为空，则是空数组
            return JSON.parse(localStorage.getItem(STOREGE_KEY) || '[]')
        },
        //保存数据到本地，items就是需要保存的数据源,并且以JSON字符串的格式存储
        save:function (items) {
            localStorage.setItem(STOREGE_KEY,JSON.stringify(items))
        }

    };

• 修改 Vue 实例中 data 选项的 items 属性，通过 itemStorage.fetch() 方法初始化数据

var vm = new Vue({
            el:'#todoapp',
            data:{
                // items:[
                //     {id:1,content:'dddd',completed:false},
                //     {id:2,content:'aaaa',completed:false},
                //     {id:3,content:'bbbb',completed:false},
                //     {id:4,content:'cccc',completed:false},
                // ],
                //从本地获取数据
                items:itemStorage.fetch(),

                currentItem:null,
                filterState:'all',

            },

• Vue 实例中增加一个 watch 选项，用于监听 items 的变化，一旦变化通过 itemStorage.save() 重新保存数据到本地

//监听器，用于本地化数据的存储，一旦数组对象有变化，立即存储
            watch:{
            //监听items,一旦items发生变化就会执行
            items:{
                deep:true,//需要监听数组对象内部的变化，需要指定deep:true
                handler(newitems,olditems){
                    // newitems:新的数组对象
                    // olditems：之前的数组对象
                    itemStorage.save(newitems)
                }
            }
            },

项目地址：https://github.com/ShenJianPing0307/todo-demo