vue实现todolist笔记

---

前言

使用Vue实现简单的todo-list案例

🌴学习Vue只用通过不断的练习，和使用代码才能够熟记，我跟着视频敲了一遍后，想着要自己再敲一遍，捋一下逻辑，让自己记得更熟。

---

一、静态页面

🌾首先已经有了todolist的静态页面的html以及css文件，想办法用组件来实现就要进行拆分，看着静态页面思考一下拆分几个子组件，最后都放入父组件App.vue

🌾分好之后，确定哪个组件包含其他组件，将html以及css样式分别粘贴到属于它的地方
例如：MyList包含MyItem

<template>
  <ul class="todo-main">
    <MyItem/>
    <MyItem/>
    <MyItem/>
  </ul>
</template>

<script>
  import MyItem from './MyItem'
  export default {
    
    name:'MyList',
    components:{
    MyItem}
  }
</script>

<template>
   <li>
      <label>
        <input type="checkbox">
        <span>xxxx</span>
      </label>
      <button class="btn btn-danger" style="display: none;">删除</button>
    </li>
</template>

<script>
  export default {
    
    name:'MyItem'
  }
</script>

慢慢把静态页面布置好

二、初始化列表

🌾将页面内的列表xxx的每一项填充进去显示具体的待办事项文字。
🌾此时数据可以放在MyList然后利用props属性传给MyItem遍历显示即可。但是到时候再MyHear中输入的数据要加入到MyList和MyItem，所以直接将数据放入到App中，然后利用props传给它的子元素。
🌾还有MyList中的MyItem的个数应该通过v-for遍历数据 动态生成。

🌾具体实现：
App.vue(将数据传给MyList)

<MyList :todos="todos"/>

data() {
   
      return {
   
        todos:[
          {
   id:'001',title:'抽烟',done:true},
          {
   id:'002',title:'学习',done:false},
          {
   id:'003',title:'开车',done:true}
        ]
      }
    },

🌙MyList.vue(接收数据，并传给MyItem)

props:['todos'],

<MyItem 
  v-for="todoObj in todos" 
  :key="todoObj.id" 
  :todo="todoObj"
/>

🌾MyItem接收数据

props:['todo']

<template>
   <li>
      <label>
        <input type="checkbox">
        <span>{
  {todo.title}}</span>
      </label>
      <button class="btn btn-danger" style="display: none;">删除</button>
    </li>
</template>

三、添加

🌾输入框里面输入文字，包装成一个对象，添加到数据里面，MyList中的v-for自然会将数据显示出来，因为要操作数据，数据在App.vue里面，所以要写一个方法。
🌾首先要获取到用户输入的文字，即title可以使用v-model双向绑定
具体实现：
⭐️MyHeader.vue

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add">
  </div>
</template>

<script>
  import {
    nanoid} from 'nanoid'
  export default {
    
    name:'MyHeader',
    props:['addTodo'],
    data() {
    
      return {
    
        title:''
      }
    },
    methods: