Vuejs学习(一)简要的TODOList

这几天都在看vuejs的相关教程，配合着后面实例进行学习。本来昨天已经写了第一篇，但是后来发现官网API 之后，果断删掉了。自己在编写时遇到的各种问题，对着API基本可以找到原因及解决办法。以下部分以官方实例的todoMVC为例，记录自己的思路。

Vuejs简化了DOM操作，基本数据绑定在html上，提供一个Vue实例来实现数据、方法等的定义。在这个过程中，基本不会涉及到js中常见的作用域问题，作用域链也无需考虑。在声明的Vue实例中使用this关键字可以容易的得到其中的数据，而在所在的html中，可以直接使用定义在实例中的各种字段。

分析这个TODOList，不难发现其中有三个部分，上面的输入和下面的展示的详细内容，剩余最后的一个归总部分。其中中间部分由于和实际数据相关，复用可能较大，需要使用组件实现。这里，我直接使用默认，不涉及到具体组件定制。整个html的代码如下：

<div id="demo">
<input type="text" placeholder="what needs to be done?" v-model="newLabel"><button @click="add(newLabel)">add</button><br>
<template v-for="item in remains|filterBy newLabel">
<button @click="finish(item)">Y</button><span :class="ifContains(item,completed)?'finished':'no'">{{item}}</span><button @click="del(item)">X</button><br>
</template>
<h4>{{remains.length}} left undeleted.   {{active.length}} left to deal. {{completed.length}} has been done.</h4>
</div>

接下来按照所需绑定数据即可：

var vm=new Vue({
el:'#demo',
data:{
remains:[],
completed:[],
newLabel:'',
active:[]/*这里不能讲active数组注册为计算属性，否则两者将同步变化*/
},
methods:{
del:function(item){
if(this.ifContains(item,this.completed)){
this.completed.$remove(item);
}
this.remains.$remove(item);
},
finish:function(item){
if(!this.ifContains(item,this.completed)){
this.active.$remove(item);
this.completed.push(item);
}
},
add:function(item){
if(!this.ifContains(item,this.remains)){
this.remains.push(item);
this.active.push(item);
this.newLabel='';
}
},
ifContains:function(item,items){/*由于html中要使用此方法判断是否已完成来实现动态CSS，否则建议定义在外部*/
for(var i of items)
if(item===i) return  true;
return false;
}
}
});

本例中，实现了以下功能：

* 动态添加需要做的事情;

* 利用filterBy过滤器实现输入时查询已有数据，确保新加任务不存在；

* 支持事件的已完成标注和删除标注；

最终结果如下图：