IMWeb训练营作业【Vue 完成一个TodoList小玩意儿】
这是参加Vue课程的第四天，上了四节课之后对Vue的原理以及用法有了基本的了解，并跟着老师做了一个ToDoList的东西。在学习过程中，感触最深的是： 与原生js 或者jQuery 不同，Vue完全是数据驱动的一个JS框架，即所有页面的改动，都要考虑如何与数据绑定并且如何去操作数据，从而改变页面的视图。
首先，说一下这个ToDoList的功能：
界面如下图所示：
没有添加任务时：
添加了任务之后：
在图中的输入框可以输入任务，回车之后就会添加到下方的任务列表中；
在任务列表中，可以勾选表示任务已完成，勾选之后任务被划掉；
也可以点删除按钮，删除之后任务列表中就不存在该任务了;
双击任务之后还可以编辑，可通过编辑动态改变任务名称。
思路：
Vue是数据驱动的框架，因此考虑到页面有动态变化的地方都要思考如何去绑定数据？
比如，输入框input的输入数据，可以用v-model来进行数据的双向绑定;
列表的数据可以将其存在一个数组中，然后用v-for指令来渲染到<ul><li></li></ul>中；
当添加了任务之后，“XX个任务已添加”也需要动态改变。
Show you the Code:
<body>
<div id="title">
任务计划列表
</div>
<div id="demo">
<p id="insert">添加列表</p>
<input id="content" type="text" v-on:focus = "clc()" @keyup.13 = "handle($event)" v-model = "message" />
<div id="tip" v-show = "list.length">
<span id="Num">{{itemNum}}个任务已添加</span>
<span v-bind:class="{tips: true}">所有任务</span>
<span v-bind:class="{tips: true}">已完成任务</span>
<span v-bind:class="{tips: true}">未完成任务</span>
</div>
<div id="lis" v-show = "!list.length">还没有添加任何任务</div>
<!-- <span >还没有添加任何任务</span> -->
<ul>
<li v-for = "item in list">
<input type="checkbox" v-model = "item.isChecked" />
<span v-show = "!item.ifEdit" id="item" :class="{completed: item.isChecked}" v-on:keyup.13 = "change(item, $event)" v-on:dblclick = "test(item)">{{item.title}}</span>
<input
v-focus = "item.ifEdit"
type="text"
v-show = "item.ifEdit"
v-model = "item.title"
@blur = "recover(item)" />
<input id="btn" type="button" v-model="btnval" v-on:click = "del(item)" />
</li>
</ul>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> <!-- 引入vue.js -->
<script>
//数据
var list = [
];
var data = {
message: "例如：吃饭睡觉打豆豆 提示 + 回车即可添加任务",
itemNum: 0,
list : list,
btnval: "删除",
Ifcheck : false, //可以利用它来实现全选
ifShow: true,
todoes : "" //编辑的数据
}
//实例
var vm = new Vue({
el: "#demo",
data: data,
methods: {
test : function(){
alert("Yes");
},
clc : function(){
this.message = "";
},
handle : function(e){
//按下回车，将input里面的数据push到list里面，然后一一渲染list里面的数据
if(this.message)
{
this.list.push({title: this.message, isChecked : false, isShow: true, ifEdit: false});
this.itemNum++;
}
this.message = "";
},
del : function(e){ //找到item是在list 中的第几项，然后删除该项就可以
/*console.log(e);
e.isShow = false;*/
var index = this.list.indexOf(e);
this.list.splice(index, 1); //splice不是原生的js，这个会触发视图更新的
},
test : function(e)
{
e.ifEdit = true;
this.todoes = e.title;
},
change : function(data, e){
/*console.log(e.type);
console.log(data.ifEdit);*/
e.ifEdit = false;
},
recover : function(e)
{
e.ifEdit = false;
}
},
//要使得新增加的input文本框获取焦点，需要自定义指令
directives: {
"focus" : {
update(el, binding){
console.log(el);
console.log(binding);
if(binding.value)
{
el.focus();
}
} //钩子函数update函数，表示在input 框中的内容发生变化更新时，执行
}
}
});
</script>
</head>
</body>
存在的问题：
利用自定义指令来实现当双击任务时，使得显示的Input框获取焦点。
首先在选项对象中添加directives属性，定义focus:{ update : function(el , binding){ if(binding.value) { el.focus(); } } }
然后在 input 中设置 v-focus属性为true ，但并不会在input上获取焦点，不知道是什么情况？
- 上一篇： 利用vue做一个简单的todolist
- 下一篇： APMServer配置多个站点
