完善 Vue + TypeScript 自定义 Componen

加入 CSS

1. 安装 css-loader ， npm i -D css-loader
2. 直接在 TodoItem.vue 文件中添加 style 标签块即可：

<style>
    .done-marker,.todo-marker{font-size:1.3rem}
    .todo-list-item{ list-style: none;} 
</style>

将整个 App 使用 .vue 文件包装。

原 app.ts 修改如下：

import Vue from "vue"
import TodoApp from "./TodoApp.vue"
const app = new Vue({ 
  el: '#app',
  render: f => f(TodoApp)
 })

注意其中 render 的参数是： (createElement: () => VNode) => VNode
并且注意，render 函数的优先级比 template 等指定自定义渲染内容的优先级高。

支持删除 Todo

1. TodoItem.vue 模板处添加删除按钮。
   <button @click="deleteTodo">删除</button>

2. TodoItem.vue 脚本中添加处理方法。

  deleteTodo():void{
    this.$emit('deleteTodo')
  }

主要是通过 $emit 事件来发送事件通知。

3. 父组件注册 TodoItem.vue 发送的事件处理器。
   即 使用 @deleteTodo="deleteTodo(index)" 来注册。为了方便删除对应的 todo 项，需要使用 v-for 来得到对应的 index。

      <todo-item v-for="(todo,index) in todos" :todo="todo" :key="todo.content"
      @deleteTodo="deleteTodo(index)"
      > </todo-item>

也就是说父组件可以直接在使用时通过 v-on 指令注册事件处理函数。