todolist（vue），版本0.2（仅支持pc，无响应式）

Git

git clone https://github.com/DrBallon/TodoList.git -b vue

流程

确定结构

顶部标题栏
	标题
	输入框
展示区
	分组1
		标题栏
			标题
			个数
		任务组
			任务条1
				状态框
				内容区、编辑区
				删除按钮
			任务条2
			任务条3
			。。。
	分组2
		。。。
清空按钮

分离组件

<!--读，写，清空localstorage数据。新增，删除，编辑任务条，更新数据。 -->
<app>
    
    <!--获取输入内容，触发新增任务条事件。 -->
	<top></top>
    
    <!--渲染item。中转item组件的事件。 -->
    <!--渲染标题和计数条。 -->
    <list>
        
        <!--触发单条数据的删除，编辑的事件 -->
        <!--根据数据的类型（todo/done）动态渲染（任务条颜色不同） -->
    	<item></item>
    	<item></item>
    	<item></item>
    </list>
    
    <list>
    	<item></item>
    	<item></item>
    	<item></item>
    </list>
    
    <!--触发清空数据事件。 -->
    <clear></clear>
</app>

各组件框架

App

<template>
  <div id="app">
    <!-- top组件 -->
    <!-- 绑定事件：新增-->
    <top @add-item="addItem" />
    <!-- list组件 -->
    <!-- 绑定事件：修改状态、编辑内容、删除 -->
    <!-- 传入prop：分组数据，分组标题  -->
    <list
      :list="todoList"
      :title="listTitles['todo']"
      @change-state="changeState"
      @edit-item="editItem"
      @del-item="delItem"
    />
    <list
      :list="doneList"
      :title="listTitles['done']"
      @change-state="changeState"
      @edit-item="editItem"
      @del-item="delItem"
    />
    <!-- clear组件 -->
    <!-- 绑定事件：清空数据-->
    <clear @clear="clearData" />
  </div>
</template>

<script>
  data() {
    return {
      //任务数据
      list: [],
      listTitles: {
        todo: '正在进行',
        done: '已完成',
      },
    }
  },
  methods: {
    //保存，读取，清空数据
    //当前数据保存位置是localstorage
    getData() {},
    saveData() {},
    clearData() {},
   	//任务条数据编辑方法
    delItem(id) {},
    addItem(content) {},
    changeState(id) {},
    editItem(newItem) {},
  },
  computed: {
    //根据 数据完成状态 分组
    todoList() {},
    doneList() {},
  },
  created() {/*读取数据，赋值到组件data*/},
</script>

Top

<template>
  <div id="header">
    <div class="inner">
      <h1>TodoList</h1>
      <!-- 绑定键盘按键事件 -->
      <input
        id="add-todo"
        v-model="newContent"
        @keyup.enter="addItem"
        placeholder="添加Todo"
      />
    </div>
  </div>
</template>

<script>
  data() {
    return {
      newContent: '',
    }
  },
  methods: {
     //触发新增任务条事件
    addItem() {},
  },
</script>

List

<template>
  <div class="list">
    <h2>
      {{ listTitle }}
      <span class="count">{{ listCount }}</span>
    </h2>
    <ul>
        <!-- item组件 -->
        <!-- 绑定事件：修改状态、编辑内容、删除 -->
        <!-- 传入prop：单个任务条数据  -->
          <item
            v-for="item in list"
            :key="item.id"
            :data="item"
            @change-state="changeState"
            @edit-item="editItem"
            @del-item="delItem"
          ></item>
    </ul>
  </div>
</template>

<script>
  props: ['list', 'title'],
  data() {
    return {
      listData: [],
      listTitle: '',
    }
  },
  methods: {
    //仅仅是中转item组件的事件
    changeState(id) {},
    editItem(item) {},
    delItem(id) {},
  },
  computed: {
    //计数条数据
    listCount() {},
  },
  watch:{
    //监听 list 变化
    //否则，父组件数据变化时，子组件不更新
    list(){
      this.listData=this.list
    }
  },
  created() {
    this.listData=this.list
    this.listTitle = this.title
  },
}
</script>

Item

<template>
  <li class="item" :class="{'done-item':itemData.done}">
    <!-- 状态区，点击触发状态改变事件 -->
    <input
      type="checkbox"
      class="item-state"
      @click="changeState"
      :checked="itemData.done"
    />
    <!-- 内容区。仅显示，单击切换至可编辑状态-->
    <p v-if="!editable" class="item-content" @click="toggleContent">
      {{ itemData.content }}
    </p>
    <!-- 编辑区。可编辑内容，失去焦点时切换至内容区，并触发内容修改事件-->
    <input
      v-else
      type="text"
      ref="editPanel"
      class="item-input"
      v-model="newContent"
      @blur="toggleContent"
    />
    <!-- 删除按钮，点击触发删除任务条事件 -->
    <span class="del-btn" @click="delItem">X</span>
  </li>
</template>

<script>
  props: ['data'],
  data() {
    return {
      //储存新内容数据，失去焦点时若为空或者与旧内容相同，不触发事件
      newContent: '',
      itemData: {},
      //当前任务条展示的是内容区还是编辑区
      editable: false,
    }
  },
  methods: {
    //删除，修改内容，修改状态。
    //触发相应事件
    delItem() {},
    changeState() {},
    changeContent(){},
    //内容区和编辑区切换
    //内容区=》编辑区：内容区隐藏，编辑区显示并获得焦点
    //编辑区=》内容区：根据内容判断是否触发修改内容事件
    toggleContent() {},
  },
  created() {},
</script>