这次给大家带来vue的todomvc使用详解，vue的todomvc使用注意事项有哪些，下面就是实战案例，一起来看一下。
这个示例是模仿官网示例样式和功能用我自己的方式写的，基本上没有看官网的源码，只参考自定义指令。让我们一步步来探讨一下。官网demo
要实现的功能
单条添加todo
单条删除todo
双击编辑todo
单条todo已完成相应样式状态改变
全部todo是已完成相应样式状态改变
清除全部已完成todos
待办todos数量显示
所有todos，已完成todos，未完成todos筛选
单条添加todo
<input type="text" class="todos_add" placeholder="what needs to be done?"
@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
<li class="content_todolist"
v-for="(list,index) in todolists"
@mouseover="list.isactive = true" //鼠标移入todo改变对应todo的isactive状态
@mouseleave="list.isactive=false" //鼠标移出todo改变对应todo的isactive状态
<span class="el-icon-close content_todolist_delete"
:class="{show: list.isactive}" //动态绑定class使鼠标移动到某一todo显示x图标
@click="deletetodo(index)"> //绑定删除单条todo事件
</span>
</li>
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已完成
<input type="checkbox" class="checkbox"
v-model="list.ischecked">//双向绑定ischecked
<p class="content_todolist_main"
@dblclick="toedit(list)" //双击事件
v-show="!list.isediting" //切换元素
:class="{deleted:list.ischecked}"> //动态绑定class该表已完成todo样式
{{list.value}}
</p>
<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失去焦点事件
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和是否可编辑两个状态，双击p之后改变当前todo的isediting为true，从而显示为input，input失去焦点之后再通过blur事件改为false。
通过todo的idchecked来控制是否已完成，从而动态改变样式。
全部todos已完成
<span
class="icon-down el-icon-arrow-down" //使用element库做向下箭头icon
v-show="todolists.length>0 //通过todolists控制是否显示向下箭头icon
@click=selectalltodos></span> //全部已完成事件
selectalltodos() { //设置所有todo为已完成,使用map的api通过todo的ischecked属性操作
this.todolists.map(todo => todo.ischecked = todo.ischecked ? false : true)
}
待办todos数量显示
<p class="data_times" v-show="times === 0"> //times为0显示item，大于0显示items，细节注定成败
<span>{{times}}</span> item left
</p>
<p class="data_times" v-show="times > 0>
<span>{{times}}</span> items left</p>
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
<p class="data_cleartodos"
@click="cleartodos"
v-show="times < todolists.length"> //如果待办事件次数小于总todolists长度就显示“clear completed”
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >clear completed</a>
</p>
<p class="data_cleartodos"
@click="cleartodos"
v-show="times === todolists.length"> //如果待办事件次数等于总todolists长度就显示“clear completed”
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
</p>
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筛选
<li class="content_todolist"
v-show="defaultshow || (whichshow?list.ischecked:!list.ischecked)">
<p 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}}
</a>
</p>
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。
完整代码
<style>
* {
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, 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, 0);
font-weight: 700;
}
::-moz-placeholder {
color: rgb(221, 218, 218);
}
::-webkit-input-placeholder {
color: rgb(221, 218, 218);
}
:-ms-input-placeholder {
color: rgb(221, 218, 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, 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;
}
</style>
<body>
<p id="app">
<header class="header">todos</header>
<p class="content">
<span class="icon-down el-icon-arrow-down"
v-show="todolists.length>0
@click=selectalltodos>
</span>
<input type="text" class="todos_add" placeholder="what needs to be done?"
@keyup.enter="addtodo($event.target)"
ref="currentinput">
<ul class="content_todolists">
<li v-for="(list,index) in todolists" class="content_todolist"
@mouseover="list.isactive = true"
@mouseleave="list.isactive=false"
v-show="defaultshow || (whichshow?list.ischecked:!list.ischecked)">
<input type="checkbox" class="checkbox" v-model="list.ischecked">
<p class="content_todolist_main" @dblclick="toedit(list)" v-show="!list.isediting" :class="{deleted:list.ischecked}">
{{list.value}}
</p>
<input type="text" class="content_todolist_main main_input"
v-model="list.value"
v-show="list.isediting"
v-todo-focus="list.value"
@blur="unedit(list)">
<span class="el-icon-close content_todolist_delete" :class="{show: list.isactive}" @click="deletetodo(index)"></span>
</li>
</ul>
<p class="data" v-show="todolists.length>0>
<p class="data_times" v-show="times === 0">
<span>{{times}}</span> item left
</p>
<p class="data_times" v-show="times > 0>
<span>{{times}}</span> items left
</p>
<p 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}" v-for="(item,index) in datastatus" @click="switchstatus(index)" :key="index">
{{item}}
</a>
</p>
<p class="data_cleartodos" @click="cleartodos" v-show="times < todolists.length">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >clear completed</a>
</p>
<p class="data_cleartodos" @click="cleartodos" v-show="times === todolists.length">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
</p>
</p>
</p>
</p>
</body>
<script>
let vm = new vue({
el: #app,
data() {
return {
todolists: [],
datastatus: [all, active, completed],
datastatusindex: 0,
whichshow: true,
defaultshow: true
}
},
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
}
},
methods: {
toedit(obj) { //使添加的todo可编辑
obj.isediting = true
},
unedit(obj) { //使添加的todo不可编辑
obj.isediting = false
},
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格式存储数据
},
deletetodo(index) { //删除todo
this.todolists.splice(index, 1)
window.localstorage.setitem("content", json.stringify(this.todolists)) //以json格式存储数据
},
switchstatus(index) { //试下下方三个状态切换，略麻烦
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
}
},
cleartodos() { //清空已完成的todolists
this.todolists = this.todolists.filter(todo => todo.ischecked === false)
window.localstorage.setitem(content, json.stringify(this.todolists)) //以json格式存储数据
},
selectalltodos() { //设置所有todo为已完成
this.todolists.map(todo => todo.ischecked = todo.ischecked ? false : true)
}
},
directives: { //自定义focus指令
todo-focus: function (el, binding) {
if (binding.value) {
el.focus()
}
}
},
created() {
let mystorage = window.localstorage.getitem('content')
this.todolists = json.parse(mystorage) || [] //因为todolists初始值是null,使用或运算符，如果为null设为空数组
}
})
</script>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
angular2 父子组件通信方式
javascript的代码优化详解
以上就是vue的todomvc使用详解的详细内容。