vue入门简单的todos（父子组件之间的通信）

父组件代码

html部分

<template>
  <section class="todoapp">
    <!-- 头部+输入框 -->
    <header class="header">
      <h1>todos</h1>
      <input
        v-model="input"
        @keyup.enter="add"
        autocomplete="off"
        placeholder="What needs to be done?"
        class="new-todo"
      />
    </header>
    <!-- 列表 -->
    <section class="main">
      <ul class="todo-list">
        <itemtodos 
          v-for="(item, index) in list" 
          :key="item.id" 
          :content="item" 
          :index="index"
          @delete="handledelete"
        >
        </itemtodos>  
      </ul>
    </section>
    <!-- 统计 -->
    <footer class="footer" v-show="list.length != 0">
      <span class="todo-count"><strong>{{ list.length }}</strong> item left</span>
    </footer>
  </section>
</template>

js部分

<script type="text/javascript">
import itemtodos from './itemtodos'
export default {
  components:{itemtodos},
  data() {
    return {
      list: [],
      input: "",
    };
  },
  methods: {
    add: function () {
      this.list.push(this.input);
      this.input="";
    },
    handledelete(index){
      this.list.splice(index,1);
    }，
  },
};
</script>

css部分

<style>
body {
  background: #f5f5f5;
}
/* 头部+输入框 */
.todoapp {
  position: relative;
}
.todoapp h1 {
  position: fixed;
  left: 43%;
  margin-top: 20px;
  font-size: 80px;
  font-weight: 400;
  color: rgba(175, 47, 47, 0.15);
}
.new-todo {
  padding: 16px 16px 16px 60px;
  background: rgba(0, 0, 0, 0.003);
}
.new-todo {
  position: relative;
  margin: 0;
  width: 650px;
  left: 630px;
  top: 150px;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  color: inherit;
  border: 1px solid rgb(221, 217, 217);
  box-shadow: 0 2px 7px 0 rgb(152 133 133);
  box-sizing: border-box;
  background: white;
}

.index {
  visibility: hidden;
}
/* 统计 */
.footer {
  color: #777;
  position: relative;
  left: 630px;
  top: 120px;
  width: 650px;
  height: 40px;
  background: white;
  box-shadow: 0 2px 7px 0 rgb(152 133 133);
}
.todo-count {
  float: left;
  padding-top: 10px;
  padding-left: 10px;
}
</style>

子组件代码

html部分

<template>
    <li>
    {{content}}
    <button class="destroy"  @click="handleclick"></button>
    </li>
</template>

js部分

<script>
export default {
    props:['content','index'],
    data(){
        return{}
    },
    methods:{
        handleclick(){
            this.$emit("delete",this.index)
        }
    }
}
</script>

css部分

<style>
li{
  position: relative;
  left: 590px;
  top: 135px;
  width: 650px;
  height: 40px;
  font-size: 24px;
  border-bottom: 1px solid #ededed;
  display: block;
  box-shadow: 0 2px 7px 0 rgb(152 133 133);
  background: white;
}
.destroy:after {
  content: "x";
}
.destroy {
  position: absolute;
  top: 0px;
  left: 600px;
  font-size: 25px;
  color: #ffffff;
  border: 0;
}
.destroy:hover {
  color: #cc9a9a;
}
</style>

记录一下自己刚开始的步伐，只是一个简单的番茄todos，还有很多不足啦