加入 CSS
- 安装
css-loader，npm i -D css-loader - 直接在
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
TodoItem.vue模板处添加删除按钮。
<button @click="deleteTodo">删除</button>TodoItem.vue脚本中添加处理方法。
deleteTodo():void{
this.$emit('deleteTodo')
}
主要是通过 $emit 事件来发送事件通知。
- 父组件注册
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 指令注册事件处理函数。
