作為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: auto;width: px;}
#app h1{font-size: px;color: #ffa600;text-align: center}
#app input{width: %;height: px;border: px solid #ccc;box-sizing: border-box;padding: px;line-height: px;font-size: px;color: #999}
[v-cloak] { display: none; }
ul,li{list-style: none;margin: ; padding: }
li{line-height: px;border-bottom: px solid #ddd;background: #fff;padding: rem;position: relative}
li span{display: inline-block;width: %}
li.isedit input{display: block}
li input{display: none}
#app li input {position: absolute;left: ;top: ;width: %;height: %;border: px solid blue}
.close{position: absolute;right: rem;top: }
.empty{text-align: center;font-size: px;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 : ,
name: "颉要城呆地廳需要",
isEdit: false
},
{
id : ,
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),);
},
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>
![vue-cli3配置生産的環境變量和開發的環境變量小記[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)