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>