(尚026)Vue_案例_动态初始化显示(尚025)
(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)的更多相关文章
- (尚030)Vue_案例_存储数据(localStorage本地存储技术)
当刷新页面时,会变为原来的状态 1.问题:当我刷新是不希望改变原来状态 需要缓存我当前的数据 2.究竟是缓存在内存里还是在文件里??? 缓存在文件里,因为浏览器关闭了,内存就没了;而我们需要重新打开浏 ...
- (尚029)Vue_案例_交互footer组件功能
需要实现界面截图: 难点分析:sAllCheck必须定义为计算属性 1.想到问题: 一旦写一个组件,需要接收哪些属性?? 因为只有属性确定了,标签才好写 todos属性可以确定三个方面的显示 2.做交 ...
- (尚028)Vue_案例_交互删除
删除一条;1.鼠标移入移除这一条时颜色有变化 2.删除当前的todo ================================================================= ...
- (尚027)Vue_案例_交互添加
TodoHeader.vue组件 写交互: 第一步:跟目标元素绑定监听 (1).按回车键确认@keyup.enter="add" (2). 注意:数据在哪个组件,更新数据的行为就应 ...
- (尚024)Vue_案例_交互删除
注意:本总结中最终会删除不成功 ,原因是Item.vue中方法methods单词拼写错误!!! 首先明白,删除在Item.vue中交互 1.写交互,首先写监听@click="deleteIt ...
- (尚034)Vue_案例_数据存储优化(代码优化!!!)
最好能将上述代码抽取成一个模块(读json数据+写json数据) 1.在src下新建文件夹util(util文件夹用于放入工具的模块) 2.*使用localStorage存储数据的工具模块* 一个模块 ...
- (尚032)Vue_案例_消息订阅与发布(组件订阅与发布(PubSubJS库))
组件订阅与发布(PubSubJS库) npm info pubsub-js 安装库 npm install --save pubsub -js ============================ ...
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...
- (尚023)Vue_案例_交互添加
最终达到效果: 1.做交互,首先需要确定操作哪个组件? 提交------操作组件Add.vue 2.从哪开始做起呢? 从绑定事件监听开始做起,确定你跟谁绑定事件监听,在回调函数中做什么, ====== ...
随机推荐
- Python知识点总结篇(三)
文件操作 对文件操作流程 打开文件,得到文件句柄并赋值给一个变量: 通过句柄对文件进行操作: 关闭文件: with:自动关闭文件: with open('log', 'r') as f: ... 文件 ...
- elasticsearch内存不断增长问题
经过一段时间运行,es的索引已经达到数十G以上.es采用mmap的方式将索引文件映射到内存中,随着检索的次数增加,越来越多的数据被操作系统读入到内存中.这部分内存位于系统中,但是又不归es管理,也就是 ...
- Macvlan 和 IPvlan
介绍 macvlan 本身是 linxu kernel 模块,其功能是允许在同一个物理网卡上配置多个 MAC 地址,即多个 interface,每个 interface 可以配置自己的 IP.macv ...
- 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) 通过这个类指定一个 ...
- Matlab策略模式
策略模式的意图是定义一系列算法,把它们一个一个封装起来,并且使它们可以互相替换.通常每个策略算法不可抽象再分.本人仿照https://www.runoob.com/design-pattern/str ...
- 填坑——audio不能正常播放,控制台报错 Uncaught (in promise) DOMException
原文:https://blog.csdn.net/Mariosss/article/details/87861167 用chrome调试页面时,发现audio控件有时不能正常播放音频,控制台报错 Un ...
- Java 之 request 案例——用户登录
用户登录案例需求: 1.编写login.html登录页面 username & password 两个输入框 2.使用Druid数据库连接池技术,操作mysql,db1数据库中user表 3. ...
- TOEFL词汇笔记英语托福英语
conjectural-based on guessing 推测的-给予猜测的 consciously-on purpose 有意识地-有目的地 conserve-retain保存-保存 conspi ...
- Maven父子工程,子项目变灰,提示该项目已被移除出maven父工程
最近使用maven的父子工程结构搭建微服务架构时,不知道什么原因, 子工程总是被莫名移除出父工程,然后打包处的项目名变成了灰色, 重启该项目时会提示,“该子项目已被移除,是否删除该项目”,这个 当然不 ...
- python模块之json pickle
1.json模块 功能:将其他形式的数据类型转化为json字符串类型,将json字符串转化为其他对应的数据类型 方法:json.dumps() 作用:将所有单引号变成双引号:将所有数据类型变成字符串 ...