vue之TodoMVC项目实战

  • Z时代
  • 2024-01-10
  • 分类：综合

coding

一、初始化项目

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"><span>0</span> 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"><span>{{ incomplete }}</span> item{{ incomplete===1? '' : 's' }} left</span>

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

    incomplete(){
//箭头函数返回未完成任务的个数
returnthis.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 () {
returnthis.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(){
//箭头函数返回未完成任务的个数
returnthis.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":
returnthis.items.filter(item=>!item.completed);
break
case "completed":
returnthis.items.filter(item=>item.completed);
break
default:
returnthis.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

以上是 vue之TodoMVC项目实战 的全部内容， 来源链接： utcz.com/z/508768.html

回到顶部