VUE小案例---todolist

1. 模块拆分

2.静态页面搭建

2.1.案例目录

2.2.主页 index.html

2.3.main.js

2.4.App.vue

2.5.MyHeader.vue

2.6.MyList.vue

2.7.MyItem.vue

2.8.MyFooter.vue

2.9.静态页面效果展示

3.动态组件

3.1动态显示初始化数据

3.1.1 MyList.vue

定义数据：数组 todos {title, done}数组是存储要做的事的量，对象存储要做的事。
接收数据，v-for遍历数组

<template>
  <ul class="todo-main">
    <MyItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj"/>
  </ul>
</template>
<script>
    import MyItem from './MyItem.vue'
    export default {
   
      name: 'MyList',
      components: {
   MyItem},
      data(){
   
        return{
   
          todos:[
              {
   id:'001',title:'drinking',done:true},
              {
   id:'002',title:'smoking',done:true},
              {
   id:'003',title:'driving',done:true}
          ]
        }
      }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

3.1.2 MyItem.vue

得到数据，已完成事项可选

<template>
     <li>
      <label>
         <input type="checkbox" :checked="todo.done"/        <span>{
   {
   todo.title}}</span>
      </label>
      <button class="btn btn-danger" style="display:none">删除</button>
    </li>
</template>
<script>
    export default {
   
      name: 'MyItem',
      //声明接受todo对象
      props:['todo']
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>...

3.1.3 效果展示

3.2动态交互

3.2.1实现子组件向父组件传数据

基本实现方法：在父组件先写一个接受函数，再把这个接受函数传给子组件，子组件利用这个函数接收数据，从而实现传递。

3.2.1.1父组件：App

<template>
  <div id="root">
    <div class="todo-container">
        <div class="todo-wrap">
          <MyHeader : addTodo="addTodo"/>
          <MyList :todos="todos" />
          <MyFooter />
      </div>