作为vue在路上,虽然已经接触很久了,尼玛打包工具都用起了,还是又了次todo demo
感觉很多的js框架,都喜欢搞个todo mvc出来,比比谁的代码短。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todo MVC</title>
<script src="../vue.js"></script>
<style>
body{
background: #eee;
}
#app{margin: 0 auto;width: 700px;}
#app h1{font-size: 40px;color: #ffa600;text-align: center}
#app input{width: 100%;height: 55px;border: 1px solid #ccc;box-sizing: border-box;padding: 0 15px;line-height: 55px;font-size: 20px;color: #999}
[v-cloak] { display: none; }
ul,li{list-style: none;margin: 0; padding: 0}
li{line-height: 50px;border-bottom: 1px solid #ddd;background: #fff;padding: 0 1rem;position: relative}
li span{display: inline-block;width: 70%}
li.isedit input{display: block}
li input{display: none}
#app li input {position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 1px solid blue}
.close{position: absolute;right: 1.5rem;top: 0}
.empty{text-align: center;font-size: 30px;color: #aaa}
</style>
</head>
<body>
<div id="app">
<h1>TODO MVC</h1>
<input type="text" value="" name="input" placeholder="需要添加点什么?" v-model="input" @keyup.enter="add" />
<section>
<ul v-cloak v-if="list">
<li v-for="it of list"
:class="{isedit:it.isEdit}"
>
<span :id="it.id" @click="edit(it)">{{it.name}}</span>
<a href="javascript:;" class="close" @click="close(it)">close</a>
<input type="text"
v-model="it.name"
v-to-focus="it.isEdit"
@blur="editsuccess(it)"
@keyup.enter="editsuccess(it)"
@keyup.esc="editsuccess(it)"
/>
</li>
</ul>
<div class="empty" v-if=" list == '' ">空空的~~</div>
</section>
</div>
<script>
var app = new Vue({
data : {
input: "",
editItem : null,
list : [
{
id : 1,
name: "颉要城呆地厅需要",
isEdit: false
},
{
id : 2,
name: "哈士奇不老大哥城要",
isEdit:false
}
]
},
methods : {
add : function () {
var text = this.input && this.input.trim();
if(!text) return;
this.list.push({
name : text,
id : text,
isEdit:false
});
this.input = "";
},
close : function (it) {
this.list.splice(this.list.indexOf(it),1);
},
edit : function (it) {
it.isEdit = true;
},
editsuccess: function (it) {
if(it.name.trim() ==""){
this.close(it);
}
it.isEdit = false;
},
},
directives : {
"to-focus" : function (el,binding) {
if(binding.value){
el.focus();
}
}
}
});
app.$mount('#app')
</script>
</body>
</html>