(1).当前页面需要变化什么样的数据?

答:列表;应该有个todos:[]数组;数组中包含每个元素均为一个对象;有数据titles:'xxx';(勾不勾选)complete:'布尔类型'

(2).数组todos究竟放在哪个组件中保存?

看某个组件需要还是某些组件需要;分析各个组件都需要,故放在父组件中App.vue

(3)在App.vue组件中初始化数据,

<1>.先摆好结构

<2>.写入数组数据

<3>.将组件交给<TodoList/>使用

实现初始化显示<TodoList :todos="todos"/>

<4>.TodoList中声明接收属性

<5>.在TodoList.vue中声明接收属性(ctrl+鼠标左键跳转)

<6>.指定属性名和属性类型

<7>.将TodoList.vue中的li和样式,抽取到TodoItem.vue组件

<8>.在TodoList.vue中使用TodoItem.vue

传递给TodoItem.vue两个属性

:key="index" :todo="todo" :index="index"

<9>.在TodoItem.vue中声明接收属性

<10>.页面显示数据

注意如果不显示数据:F12,首先看是否报错,然后看数据显示vue

===============================================================

(尚026)Vue_案例_动态初始化显示(尚025)的更多相关文章

  1. (尚030)Vue_案例_存储数据(localStorage本地存储技术)

    当刷新页面时,会变为原来的状态 1.问题:当我刷新是不希望改变原来状态 需要缓存我当前的数据 2.究竟是缓存在内存里还是在文件里??? 缓存在文件里,因为浏览器关闭了,内存就没了;而我们需要重新打开浏 ...

  2. (尚029)Vue_案例_交互footer组件功能

    需要实现界面截图: 难点分析:sAllCheck必须定义为计算属性 1.想到问题: 一旦写一个组件,需要接收哪些属性?? 因为只有属性确定了,标签才好写 todos属性可以确定三个方面的显示 2.做交 ...

  3. (尚028)Vue_案例_交互删除

    删除一条;1.鼠标移入移除这一条时颜色有变化 2.删除当前的todo ================================================================= ...

  4. (尚027)Vue_案例_交互添加

    TodoHeader.vue组件 写交互: 第一步:跟目标元素绑定监听 (1).按回车键确认@keyup.enter="add" (2). 注意:数据在哪个组件,更新数据的行为就应 ...

  5. (尚024)Vue_案例_交互删除

    注意:本总结中最终会删除不成功 ,原因是Item.vue中方法methods单词拼写错误!!! 首先明白,删除在Item.vue中交互 1.写交互,首先写监听@click="deleteIt ...

  6. (尚034)Vue_案例_数据存储优化(代码优化!!!)

    最好能将上述代码抽取成一个模块(读json数据+写json数据) 1.在src下新建文件夹util(util文件夹用于放入工具的模块) 2.*使用localStorage存储数据的工具模块* 一个模块 ...

  7. (尚032)Vue_案例_消息订阅与发布(组件订阅与发布(PubSubJS库))

    组件订阅与发布(PubSubJS库) npm info pubsub-js 安装库 npm install --save pubsub -js ============================ ...

  8. (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)

    自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...

  9. (尚023)Vue_案例_交互添加

    最终达到效果: 1.做交互,首先需要确定操作哪个组件? 提交------操作组件Add.vue 2.从哪开始做起呢? 从绑定事件监听开始做起,确定你跟谁绑定事件监听,在回调函数中做什么, ====== ...

随机推荐

  1. Python知识点总结篇(三)

    文件操作 对文件操作流程 打开文件,得到文件句柄并赋值给一个变量: 通过句柄对文件进行操作: 关闭文件: with:自动关闭文件: with open('log', 'r') as f: ... 文件 ...

  2. elasticsearch内存不断增长问题

    经过一段时间运行,es的索引已经达到数十G以上.es采用mmap的方式将索引文件映射到内存中,随着检索的次数增加,越来越多的数据被操作系统读入到内存中.这部分内存位于系统中,但是又不归es管理,也就是 ...

  3. Macvlan 和 IPvlan

    介绍 macvlan 本身是 linxu kernel 模块,其功能是允许在同一个物理网卡上配置多个 MAC 地址,即多个 interface,每个 interface 可以配置自己的 IP.macv ...

  4. Source roots (or source folders) Test source roots (or test source folders; shown as rootTest)Resource rootsTest resource roots

    idea中Mark Directory As里的Sources Root.ReSources Root等的区别 1.Source roots (or source folders) 通过这个类指定一个 ...

  5. Matlab策略模式

    策略模式的意图是定义一系列算法,把它们一个一个封装起来,并且使它们可以互相替换.通常每个策略算法不可抽象再分.本人仿照https://www.runoob.com/design-pattern/str ...

  6. 填坑——audio不能正常播放,控制台报错 Uncaught (in promise) DOMException

    原文:https://blog.csdn.net/Mariosss/article/details/87861167 用chrome调试页面时,发现audio控件有时不能正常播放音频,控制台报错 Un ...

  7. Java 之 request 案例——用户登录

    用户登录案例需求: 1.编写login.html登录页面 username & password 两个输入框 2.使用Druid数据库连接池技术,操作mysql,db1数据库中user表 3. ...

  8. TOEFL词汇笔记英语托福英语

    conjectural-based on guessing 推测的-给予猜测的 consciously-on purpose 有意识地-有目的地 conserve-retain保存-保存 conspi ...

  9. Maven父子工程,子项目变灰,提示该项目已被移除出maven父工程

    最近使用maven的父子工程结构搭建微服务架构时,不知道什么原因, 子工程总是被莫名移除出父工程,然后打包处的项目名变成了灰色, 重启该项目时会提示,“该子项目已被移除,是否删除该项目”,这个 当然不 ...

  10. python模块之json pickle

    1.json模块 功能:将其他形式的数据类型转化为json字符串类型,将json字符串转化为其他对应的数据类型 方法:json.dumps()  作用:将所有单引号变成双引号:将所有数据类型变成字符串 ...