Vue官网todoMVC示例代码

发布时间：2020-12-17 02:37:06 所属栏目：百科来源：网络整理

导读：这个示例是模仿官网示例样式和功能用我自己的方式写的，基本上没有看官网的源码，只参考自定义指令。让我们一步步来探讨一下。要实现的功能单条添加todo 单条删除todo 双击编辑todo 单条todo已完成相应样式状态改变全部todo是已完成相应样式状态改变清除

这个示例是模仿官网示例样式和功能用我自己的方式写的，基本上没有看官网的源码，只参考自定义指令。让我们一步步来探讨一下。

要实现的功能

单条添加todo
单条删除todo
双击编辑todo
单条todo已完成相应样式状态改变
全部todo是已完成相应样式状态改变
清除全部已完成todos
待办todos数量显示
所有todos，已完成todos，未完成todos筛选

单条添加todo

把每条todo的对应状态都存在同一个对象当中，在操作改变todo状态的时候不会被统一处理，使得每条todo都有单独的状态。

单条删除todo

在每个li元素上绑定了鼠标移入和移除的事件来动态的改变每个todo的isActive，然后再使用isActive动态显示class。

双击编辑todo&&单条todo已完成

<div class="content_todoList_main"
@dblclick="toEdit(list)" //双击事件
v-show="!list.isEditing" //切换元素
:class="{deleted:list.isChecked}"> //动态绑定class该表已完成todo样式
{{list.value}}

<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失去焦点事件

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已完成

//全部已完成事件

todo.isChecked = todo.isChecked ? false : true) }

待办todos数量显示

{{times}} item left

{{times}} items left

使用了计算属性对todoLists计算，用for循环刷选出idChecked为true的累加，最后返回times。

清除全部已完成todos

<div class="data_clearTodos"
@click="clearTodos"
v-show="times === todoLists.length"> //如果待办事件次数等于总todoLists长度就显示“clear completed”

todo.isChecked === false) window.localStorage.setItem("content",JSON.stringify(this.todoLists)) //以json格式存储数据 },

如果待办todos的times小于todoLists长度，就证明有已完成的todo，就可以显示“clear completed”，如果相等就说明没有已完成的todo。

三种状态筛选

所有todos，已完成todos，未完成todos筛选

<div class="data_status">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
:class="{active: index === dataStatusIndex}" //动态class实现tab切换
v-for="(item,index) in dataStatus" v-for循环
@click="switchStatus(index)" //切换不同tab显示内容
:key="index">
{{item}}

我这里是同时if条件句判断操作，有点麻烦，目前还没有想出来其他方案。在li元素使用三元运算符和或运算符进行操作显示不同状态的todos。

完整代码

* { 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.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);
font-weight: 700;
}

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

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

:-ms-input-placeholder {
color: rgb(221,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);
}

.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;
}