Vue官网todoMVC示例代码

Vue官网todoMVC示例代码

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

要实现的功能

单条添加todo

单条删除todo

双击编辑todo

单条todo已完成相应样式状态改变

全部todo是已完成相应样式状态改变

清除全部已完成todos

待办todos数量显示

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

单条添加todo

@keyup.enter="addTodo($event.target)" //绑定enter事件

ref="currentInput">//操作input元素使enter一下之后清空输入框内容

data() {//一些初始化数据

return {

todolists: [],

dataStatus: ["All", "Active", "Completed"],

dataStatusIndex: 0,

whichShow: true,

defaultShow: true

}

},

addTodo(e) { //添加todo

var val = e.value

if (val === "") {return} //如果输入内容为空则立即返回

this.todoLists = this.todoLists.concat({//使用concat这个api添加todo

value: val, //输入内容

isEditing: false, //是否在编辑状态

isActive: false, //删除X图标是否激活

isChecked: false //是否已完成

})

this.$refs.currentInput.value = "" //按下enter添加todo之后把输入框value清零

window.localStorage.setItem("content",jsON.stringify(this.todoLists))//使用localStorage以JSON格式存储数据

},

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

单条删除todo

v-for="(list,index) in todoLists"

@mouseover="list.isActive = true" //鼠标移入todo改变对应todo的isActive状态

@mouseleave="list.isActive=false" //鼠标移出todo改变对应todo的isActive状态

:class="{show: list.isActive}" //动态绑定class使鼠标移动到某一todo显示X图标

@click="deleteTodo(index)"> //绑定删除单条todo事件

:class="{show: list.isActive}" //动态绑定class使鼠标移动到某一todo显示X图标

@click="deleteTodo(index)"> //绑定删除单条todo事件

deleteTodo(index) { //删除单条todo

this.todoLists.splice(index, 1)//使用splice的api

window.localStorage.setItem("content",JSON.stringify(todoLists)) //以JSON格式存储数据//localStorage存储数据

},

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

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

v-model="list.isChecked">//双向绑定isChecked

@dblclick="toEdit(list)" //双击事件

v-show="!list.isEditing" //切换元素

:class="{deleted:list.isChecked}"> //动态绑定class该表已完成todo样式

{{list.value}}

v-model="list.value" //双向绑定可输入value

v-show="list.isEditing" //切换元素

v-todo-focus="list.value" //自定义指令，双击之后自动focus对焦

@blur="unEdit(list)"> //绑定blur失去焦点事件

methods: {

toEdit(obj) { //使添加的todothing可编辑

obj.isEditing = true

},

unEdit(obj) { //使添加的todothing不可编辑

obj.isEditing = false

},

}

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

class="icon-down el-icon-arrow-down" //使用element库做向下箭头icon

v-show="todoLists.length>0" //通过todoLists控制是否显示向下箭头icon

@click="selectAllTodos">

class="icon-down el-icon-arrow-down" //使用element库做向下箭头icon

v-show="todoLists.length>0" //通过todoLists控制是否显示向下箭头icon

@click="selectAllTodos">

selectAllTodos() { //设置所有todo为已完成,使用map的api通过todo的isChecked属性操作

this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)

}

待办todos数量显示

{{times}}&nbsp item left

{{times}}&nbsp items left

computed: {

times() { //使用计算属性计算待办todos的次数

let todoArr = this.todoLists

let times = 0

for (let i = 0; i < todoArr.length; i++) {

if (todoArr[i].isChecked === false) {

times++

}

}

return times

}

},

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

清除全部已完成todos

@click="clearTodos"

v-show="times < todoLists.length"> //如果待办事件次数小于总todoLists长度就显示“clear completed”

clear completed

@click="clearTodos"

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

clearTodos() { //清空已完成的todoLists，使用filter的api进行筛选

this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)

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

},

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

三种状态筛选

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

v-show="defaultShow || (whichShow?list.isChecked:!list.isChecked)">

:class="{active: index === dataStatusIndex}" //动态class实现tab切换

v-for="(item ,index) in dataStatus" v-for循环

@click="switchStatus(index)" //切换不同tab显示内容

:key="index">

{{item}}

:class="{active: index === dataStatusIndex}" //动态class实现tab切换

v-for="(item ,index) in dataStatus" v-for循环

@click="switchStatus(index)" //切换不同tab显示内容

:key="index">

{{item}}

switchStatus(index) { //通过if条件判断操作

this.dataStatusIndex = index

if (this.dataStatus[index] === "Active") {

this.defaultShow = false

this.whichShow = false

} else if (this.dataStatus[index] === "Completed") {

this.defaultShow = false

this.whichShow = true

} else if (this.dataStatus[index] === "All") {

this.defaultShow = true

}

},

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

完整代码

v-show="todoLists.length>0"

@click="selectAllTodos">

v-show="todoLists.length>0"

@click="selectAllTodos">

@keyup.enter="addTodo($event.target)"

ref="currentInput">

@mouseover="list.isActive = true"

@mouseleave="list.isActive=false"

v-show="defaultShow || (whichShow?list.isChecked:!list.isChecked)">

{{list.value}}

v-model="list.value"

v-show="list.isEditing"

v-todo-focus="list.value"

@blur="unEdit(list)">

{{times}}&nbspitem left

{{times}}&nbspitems left

{{item}}

clear completed

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。