Vue3 小白的学习笔记之todo 二

「这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战」

课程背景

• 我是一名前端小白 开发过程中用到了vue
• 所以我才来学习 了解一下vue3
• 这是一篇跟着教程走的笔记 不具备什么高深的操作
• 不过比你看官方教程应该能省点事

正文开始

1 通过props把父组件的值传递到子组件中

2 子组件中接收相应的值

3 遍历收到的数据到列表中

4 修改数据 子组件中，任务变成已完成。本质是修改父组件中的值 父组件只是把数据的引用传递给了子组件，而非拷贝了一份数据给子组件。

所以我们把down绑定到input属性中。

5 把已完成的样式绑定到文字上

.delete{
  color:gray;
  text-decoration: line-through;
  font-style: italic;
}

这样就完成了样式的绑定，当点击复选框完成当前任务时候，文字也发生变化。

6 创建todo-input组件 还是在组件文件夹下创建目录 然后创建index文件。跟todolist组件基本相同

7 todo input中添加相关样式

<template>
    <div class="todo-input">
    <form>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
            <span class="input-group-text">任务</span>
            </div>
            <input type="text" class="form-control" placeholder="请输入任务">

            <button type="button" class="btn btn-primary">添加</button>
        </div>
        </form>
    </div>
</template>

<script>
export default {

}
</script>

<style>
    .todo-input{
        width:400px;
    }
</style>

完成的效果图如下

这样就基本完成了我们input组件的ui了。