Vue开发todolist的开发文档

todoList

// 以下是开发所用到的一些文件 ( SUI Mobile, jquery, Vue )
<link rel="stylesheet" href="https://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="./css/todilist.css">
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script type='text/javascript' src='https://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script src="./vue.js"></script>

需要实现的功能:
1. 开关的切换
inputflag:false ( 切换输入框的开关 )
makesure:false ( 切换确定是否删除的开关 )
save:false ( 切换存入本地数据的开关 )

<div class="maskbox_input" v-show="inputflag"  @click="maskInput">
<div class="maskbox_input-bg">
<div class="userbox_input">
<p>请输入您想添加的事件</p>
<input type="text" v-model="task" @keyup.enter="addTodos">
<div class="userbox_btn">
<button class="button button-pramise" @click="addTodos">确定</button>
<button class="button button-success" @click="cancleAdd">取消</button>
</div>
</div>
</div>
</div>

1. 点击编辑,出现一个弹框(通过一个数据来决定弹框的出现或者隐藏),
   inputflag 就是输入框的开关
2. 当我们键盘输入时(数据跟文本框内容双向绑定,绑定在task上),把输入进去的数据渲染在页面上.

<div class="content">
<div class="card" v-for="(item,index) in newTodos">
<div class="card-content">
<div class="card-content-inner">
{{ item.text }}
</div>
<div class="pull-right lwj-btn">
<button class="button button-success" @click="item.flag=!item.flag"
:class="{'button-fill':item.flag}">
<span class="icon icon-check"></span>
</button>
<button class="button button-danger" @click="check(index)">
<span class="icon icon-remove"></span>
</button>
</div>
</div>
</div>
</div>

4.   当任务已完成时,  点击 删除按钮 直接删除(将这条数据从数组中删除) ,
当任务未完成时, 应该先发出用户友好提示(通过一个开关数据,决定显示或者隐藏), 如
果点击了确定, 在删除 ,如果不点击确定,不删除.

<button class="button button-success" @click="makesure=!makesure">取消</button>
<button class="button button-pramise" @click="removeBtn(activeIndex)">确定</button>

<div class="maskbox_remove" v-show="makesure" @click="remove">
<div class="maskbox_remove-bg">
<div class="maskbox_makesure">
<p>您确定要删除吗?</p>
<button class="button button-success" @click="makesure=!makesure">取消</button>  ( 点击取消删除框消失 )
<button class="button button-pramise" @click="removeBtn(activeIndex)">确定</button>  ( 通过一个动态的index值,删除掉数据 )
</div>
</div>
</div>

6. 底部的按钮拥有不同的内容 (将类名存储在数组中,通过循环遍历得到类名)
7.  底部的按钮点那个那个激活(通过一个与按钮内容相同的数据做判断(三目表达式),如果内容相同则添加这个类名)

<button class="button button-success" @click="item.flag=!item.flag"
:class="{'button-fill':item.flag}">

<ul class="footer_list">
<li v-for="item in btnList">
<button class="button"
:class="['button-'+item.className,type==item.text?'button-fill':'']"
@click="type = item.text">
{{ item.text }}
</button>
</li>
</ul>

9.  将数据进行分类(用computed,每次挑选出不用的数据进行渲染)

new 出来的Vue()对象

//JS代码
function Fn(){
let arr = JSON.parse(localStorage.getItem('todos'));
new Vue({
el: "#app",
data: {
inputflag:false,
makesure:false,
save:false,
task:'',
activeIndex:0,
type:'A',
todos: arr,
done:[],
unfin:[],
btnList:[
{
id:1,
text:"A",
className:"success"
},{
id:2,
text:"F",
className:"primary"
},{
id:3,
text:"U",
className:"danger"
}
]
},
methods:{
//取消功能
cancleAdd(){
this.inputflag = !this.inputflag;
this.task="";
},
//输入框的显示隐藏
maskInput(e){
if(e.target.className=="maskbox_input-bg"){
this.inputflag=!this.inputflag;
}
},
//添加要做的事情
addTodos(){
this.todos.push({
id:this.todos.length+1,
text:this.task,
flag:false
});
this.task="";
this.inputflag=false;
},
//删除事情
removeBtn(index){
this.todos.splice(index,1);
this.makesure=false;
},
//删除的取消功能
remove(e){
if(e.target.className=="maskbox_remove-bg"){
this.makesure=!this.makesure;
}
},
//检测一个事情有没有完成
check(index){
this.activeIndex=index;
if(this.todos[index].flag){
this.removeBtn(index);
}else{
this.makesure=!this.makesure;
}
},
//存入做好的事情
setDone(){
this.done = this.todos.filter((item)=>{
return item.flag ? item : null;
});
localStorage.setItem('done',JSON.stringify(this.done));
}
,
//存入没做好的事情
setUnfin(){
this.unfin = this.todos.filter((item)=>{
return !item.flag ? item : null;
});
localStorage.setItem('unfin',JSON.stringify(this.unfin));
},
//存入所有的事情
setTodos(){
localStorage.setItem('todos',JSON.stringify(this.todos));
},
//存入本地存储
setCk(){
this.setDone();
this.setUnfin();
this.setTodos();
this.save=true;
}
},computed:{
//完成的事情
finished(){
return this.todos.filter((item)=>{
return item.flag?item : null;
});
},
//未完成的事情
unfinished(){
return   this.unfin = this.todos.filter((item)=>{
return !item.flag? item :null;
});
},
//不同视图所需要的数据
newTodos(){
switch( this.type ){
case "A":
return this.todos;
break;
case "F":
return this.finished;
break;
default :
return this.unfinished;
}
}
}
});
}
Fn();