github:https://github.com/1287642889/todolist.git

1、构建项目结构

1、新建todolist文件夹。
2、在该文件夹目录下，cmd输入命令：vue init webpack todolist
3、切换到todolist目录下：cd todolist，然后输入npm run dev开启服务，在项目中输入网址，即可看到效果。
项目结构如下：

image.png

2、开发TodoList项目，主要是修改以下几个文件：

1、main.js

import Vue from 'vue'
import TodoList from './TodoList'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  components: { TodoList },
  template: '<TodoList/>'
})

2、TodoList.vue

<template>
  <div id="app">
    <input v-model="inputValue"/>
    <button @click="handleSubmit">提交</button>
    <ul>
      <todo_item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete"></todo_item>
    </ul>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem'

export default {
  components:{
    todo_item:TodoItem
  },
  data () {
    return {
      inputValue:'',
      list:[]
    }
  },
  methods:{
    //handleSubmit(){}是 handleSubmit:function(){}的简写
    handleSubmit () {
      this.list.push(this.inputValue);
      this.inputValue = '';
    },
    //接收子组件传递过来的参数
    handleDelete (index) {
      this.list.splice(index,1);
    }
  }
}
</script>

<style scoped>

</style>

3、TodoItem.vue

<template>
  <div>
    <li @click="handleDelete" class="item">{{content}}</li>
  </div>
</template>

<script>
export default {
  //props用来接收父组件传递过来的参数
  props:['content','index'],
  methods:{
    handleDelete () {
      //子组件与父组件通信
      this.$emit('delete',this.index);
    }
  }
}
</script>

<!--scoped:该样式是局部样式，只对本文件有效-->
<style scoped>
  .item {
    color:red;
  }
</style>

测试页面

image.png