(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. MySQL多表查询,Navicat使用,pymysql模块,sql注入问题

    一.多表查询 #建表 create table dep( id int, name varchar(20) ); create table emp( id int primary key auto_i ...

  2. Python 基础 编码

    Python 基础 编码 咱们的电脑,存储和发送文件,发送的是什么?电脑里面是不是有成千上万个二极管,亮的代表是1,不亮的代表是0,这样实际上电脑的存储和发送是不是都是010101啊 我们发送的内容都 ...

  3. PS 有哪些小技巧让你好用到哭?

    作者:bart链接:https://www.zhihu.com/question/328895616/answer/763462289来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  4. python之数据解构和算法进阶

    1.解压赋值多个变量 采用解构的方法.可迭代对象才可以,变量数量与元素个数要一一对应,或者采用*万能接收. 2.解压可迭代对象赋值多个变量 如果一个可迭代对象的元素个数超过变量个数时,会抛出一个 Va ...

  5. SpringBoot获得application.properties中数据的几种方式

    转:https://blog.csdn.net/qq_27298687/article/details/79033102 SpringBoot获得application.properties中数据的几 ...

  6. 【Rust】使用cargo创建项目及cargo源的替换

    ---------------------------------参考文档------------------------------- https://rustlang-cn.org/office/ ...

  7. Macvlan 和 IPvlan

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

  8. Windows 上的应用程序在运行期间可以给自己改名(可以做 OTA 自我更新)

    原文:Windows 上的应用程序在运行期间可以给自己改名(可以做 OTA 自我更新) 程序如何自己更新自己呢?你可能会想到启动一个新的程序或者脚本来更新自己.然而 Windows 操作系统允许一个应 ...

  9. 华为交换机配置Telnet步骤

    通过Telnet方式登录交换机进行设备查询管理为各网络管理员提供了便利,不需要成天拎着console线夹着笔记本蹲在机房里,只要在能连接到相应网络的电脑上Telnet连接即可. 前提条件是该交换机已经 ...

  10. oracle基础知识语法大全

    ORACLE支持五种类型的完整性约束NOT NULL (非空)--防止NULL值进入指定的列,在单列基础上定义,默认情况下,ORACLE允许在任何列中有NULL值.CHECK (检查)--检查在约束中 ...