vue开发todolist

todolist 开发流程

1. 框架： Vue.js
2. 组件库：SUI-mobile
   SUI pc： http://sui.taobao.org/sui/docs/gallery.html
   • 移动： http://m.sui.taobao.org/

tips

1. 利用事件冒泡来实现mask的关闭
2. tab选项卡效果切换–使用计算属性过滤值
3. 减少使用margin，多使用padding，因为移动端有时会失效
4. 弹出框绝对居中

   position: absolute;
   left:0;top:0;right:0;bottom:0;
   margin:auto;

5. css类名规则：BEM,OOCSS
6. .circle.circle-success 两个类名中间没有空格，是捆绑类名，即两个类型同时存在才生效
7. input自动获得焦点html中autofocus属性
8. 短路操作性能比三元运算高

   <p :class = "[size, flag?bg:color ]"></p>
   <p :class = "[size, flag && bg || color ]"></p>

html代码

<div class="page-group">
<div class="page page-current">
<!-- 你的html代码 -->
<!-- header -- start -->
<header class="bar bar-nav">
<a class="icon icon-star pull-left"></a>
<a class="icon icon-edit pull-right"
@click = "inputFlag = !inputFlag"
></a>
<h1 class="title"> todolist </h1>
</header>
<!-- header -- end -->

<!-- content --  start  -->
<section>
<div class="content">
<input type="text"
v-show = "inputFlag"
v-model = 'val'
placeholder="请输入代办事项"
@keyup.13 = "addItem"
>
<div class="card"
v-for = "( item,index ) in newTodos"
>
<div class="card-content">
<div class="card-content-inner">
<p> {{ item.task }} </p>
<div class="btn-box">
<button class = "button button-danger pull-right"
@click = "check( index )"
>
<i class = "icon icon-remove"></i>
</button>
<button class = "button button-success pull-right"
:class = "[ item.flag && 'button-fill' ]"
@click = " item.flag = !item.flag "
>
<i class = "icon icon-check"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- content --  end  -->

<div class="mask-box"
v-show = "maskFlag"
@click = "maskFlag = false"
>
<div class="mask-bg"></div>
<div class="mask-content">
<p> 您确定要删除吗？ </p>
<button class = "button button-fill button-danger pull-right"
@click = "ensure( activeIndex )"
> 确定 </button>
</div>
</div>

<!-- tabbar -- start  -->
<div class="tab-bar">
<ul>
<li class = "circle"
v-for = " item in tabbars "
:class = "[ 'circle-'+item.style, type === item.text && 'circle-fill'  ]"
@click = " type = item.text "
>
{{ item.text }}
</li>
</ul>
</div>
<!-- tabbar -- end -->

</section>
</div>

js代码

new Vue({
el: '.page-group',
data: {
todos: [
{
id: 1,
task: '任务一',
flag: true
},
{
id: 2,
task: '任务二',
flag: true
}
],
inputFlag: false,
val: '',
maskFlag: false,// 遮罩的开关
activeIndex: 0,
type: 'A',
tabbars: [
{
id: 1,
text: 'A',
style: 'all'
},
{
id: 2,
text: 'F',
style: 'finish'
},
{
id: 3,
text: 'U',
style: 'unfinish'
}
]
},
methods: {
flagChange ( i ) { //是用来切花卡片 中的 开关
this.todos[ i ].flag = !this.todos[ i ].flag
},
check ( index ) { // 当我们点击删除按钮时，判断用户任务完成状态
if ( this.todos[index].flag ) {
//证明已经完成了，可以直接删除

this.remove( index )

} else {
// 证明是没有完成的，不可以直接删除，我们得出用户友好提示
this.activeIndex = index
this.maskFlag = true

}
},
remove ( index ) {
this.todos.splice( index, 1 )
},
addItem () {
this.todos.push({
id: this.todos.length + 1,
task: this.val
})
this.val = ''
this.inputFlag = false
},
ensure ( index ) { //它是遮罩里面的确定按钮上执行的事件
this.remove( index )
}

},
computed: {
allTodos () {
// 所有任务
return this.todos
},
finishTodos () {
//表示已经完成的任务
return this.todos.filter( item => item.flag && item )
},
unfinishTodos () {
// 表示未完成的任务
return this.todos.filter ( item => !item.flag && item )
},
newTodos () {
switch ( this.type ) {
case 'A':
return this.allTodos
break;
case 'F':
return this.finishTodos
break;
case 'U':
return this.unfinishTodos
break;
default:
break;
}
}
}
})