20.使用Vue-cli完成todoList案例

todoList案例功能介绍：

1. 输入框输入待办事项后点击添加，该事项会出现在todo区域内，输入框内的文字消失
2. todo区域内的事项为待办事项，点击某一事项后，该事项移入done区域
3. done区域内的事项为完成事项，点击某一事项后，该事项消失

20.1.工程目录结构

1. 主组件App.vue
2. 共通组件：AddNew.vue、ToDoList.vue,DoneList.vue

20.2.组件代码

共通组件 Input.vue

<template>
  <div>
	  
	  <input type="text" v-model="inp" placeholder="请输入内容" /> <button @click="add"> 添加</button>
	  
	  
  </div>
</template>

<script>
  export default {
    name: 'Template',
    components: {

    },
    data() {
      return {
		  inp:''
      }
    },
    methods: {
		add(){
			this.$emit('get',this.inp);
			this.inp = '';
		}
    },
    created() { }
  }
</script>

<style>
</style>

共通组件 ToDoList.vue

<template>
  <div>
	  
	  <ol class="list">
		  <li v-for="(todo ,index) in todolist"  >{{todo}}  <button @click="rm(index)">×</button>  </li>
	  </ol>
	  
	  
  </div>
</template>

<script>
  export default {
    name: 'ToDoList',
	props:['todolist'],
    components: {

    },
    data() {
      return {
      }
    },
    methods: {
		rm(index){
			
			this.$emit('rm',index);
		}
    },
    created() { }
  }
</script>

<style scoped>
	
	.list li{
		font-size: 30px;
	}
	
	
</style>

组件DoneList.vue

<template>
  <div>
	  
	  <ol>
	  		<li v-for="(todo ,index) in list"  >{{todo}}    </li>
	  </ol>
	  
  </div>
</template>

<script>
  export default {
    name: 'DoneList',
	props:['list'],
    components: {

    },
    data() {
      return {
      }
    },
    methods: {

    },
    created() { }
  }
</script>

<style>
</style>

主组件App.vue

<template>
	<div id="app">
		
		<Input  @get="get"></Input>
		待处理任务:<br/>
		
		<ToDoList @rm="rm" :todolist="todolist"></ToDoList>
		已完成任务:<br/>
		<DoneList :list="doneList"></DoneList>
	</div>
</template>

<script>
	//@    src  
	import Input from '@/components/Input'
	import ToDoList from '@/components/ToDoList'
	import DoneList from '@/components/DoneList'

	export default {
		name: 'App',
		components: {
			Input,
			ToDoList,
			DoneList
		},
		data() {
			return {
				todolist:[],
				doneList:[]
			}
		},
		methods:{
			get(inp){
				this.todolist.push(inp)
			},
			rm(index){
				// alert("parent: "+index);
				this.doneList.push(this.todolist.splice(index,1)[0])
			}
		}
	}
</script>

<style>

</style>