<template>
????<section??class="real-app">
????????<input?type="text"
?class="add-input"
?autofocus="autofocus"
?placeholder="接下來(lái)做什么?"
?@keyup.enter="addTodo">
????????<item?:todo="todo"
?v-for="todo?in?todos"
?:key="todo.id"/>
????????<tabs?:filter="filter"></tabs>
????</section>
</template>

<script>
?import?Item?from?'./item.vue'
?import?Tabs?from?'./tabs.vue'
?let?id?=?0
?export?default?{
????????data(){
??????????return{
??????????????todos:[],
?filter:'all'
?}
????????},
?components:?{
????????????Item,
?Tabs
????????},
?methods:{
????????????addTodo(e){
????????????????this.todos.unshift({
????????????????????id:id++,
?content:e.target.value.trim(),
?completed:false
?})
????????????}
????????}
????}
</script>

<style?lang="stylus"?scoped>
?.real-app{
????????width?600px
?margin?0?auto
?box-shadow?0?0?5px?#666
?}
????.add-input{
????????position:?relative;
?margin:?0;
?width:?100%;
?font-size:?24px;
?font-family:?inherit;
?font-weight:?inherit;
?line-height:?1.4em;
?border:?0;
?outline:?none;
?color:?inherit;
?padding:?6px;
?border:?1px?solid?#999;
?box-shadow:?inset?0?-1px?5px?0?rgba(0,?0,?0,?0.2);
?box-sizing:?border-box;
?font-smoothing:?antialiased;
?padding:?16px?16px?16px?60px;
?border:?none;
?box-shadow:?inset?0?-2px?1px?rgba(0,0,0,0.03);
?}
</style>