(尚023)Vue_案例_交互添加
最终达到效果:
1.做交互,首先需要确定操作哪个组件?
提交------操作组件Add.vue
2.从哪开始做起呢?
从绑定事件监听开始做起,确定你跟谁绑定事件监听,在回调函数中做什么,
===================================================================
1.绑定事件监听
(1).跟button绑定,怎么绑呢?@click="add"
(2).最终将自己的数据收集起来,添加到conmments中去
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
(3).App.vue中的方法addComment()在当前组件中不调用,所以需要将这个方法传递给子组件Add.vue，怎样传呢？
:addComment="addComment"
(4)Add.vue这个组件需要接收addComment这个属性
(5).进行调用
===================================================================================
(4).数据在哪个组件,更新数据的行为(函数或方法),就应该定义在哪个组件
===================================================================================================================================
===================================================================================================================================
(1).input想到自动收集指令v-model
(2).一旦写上v-model,马上就写data
===============================================================================================================================================
===============================================================================================================================================
最终数据展示截图:
(尚023)Vue_案例_交互添加的更多相关文章
- (尚027)Vue_案例_交互添加
TodoHeader.vue组件 写交互: 第一步:跟目标元素绑定监听 (1).按回车键确认@keyup.enter="add" (2). 注意:数据在哪个组件,更新数据的行为就应 ...
- (尚029)Vue_案例_交互footer组件功能
需要实现界面截图: 难点分析:sAllCheck必须定义为计算属性 1.想到问题: 一旦写一个组件,需要接收哪些属性?? 因为只有属性确定了,标签才好写 todos属性可以确定三个方面的显示 2.做交 ...
- (尚024)Vue_案例_交互删除
注意:本总结中最终会删除不成功 ,原因是Item.vue中方法methods单词拼写错误!!! 首先明白,删除在Item.vue中交互 1.写交互,首先写监听@click="deleteIt ...
- (尚028)Vue_案例_交互删除
删除一条;1.鼠标移入移除这一条时颜色有变化 2.删除当前的todo ================================================================= ...
- (尚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 ...
- (尚030)Vue_案例_存储数据(localStorage本地存储技术)
当刷新页面时,会变为原来的状态 1.问题:当我刷新是不希望改变原来状态 需要缓存我当前的数据 2.究竟是缓存在内存里还是在文件里??? 缓存在文件里,因为浏览器关闭了,内存就没了;而我们需要重新打开浏 ...
- (尚026)Vue_案例_动态初始化显示(尚025)
(1).当前页面需要变化什么样的数据? 答:列表;应该有个todos:[]数组;数组中包含每个元素均为一个对象;有数据titles:'xxx';(勾不勾选)complete:'布尔类型' (2).数组 ...
随机推荐
- day23——继承
day23 初识继承 字面意思:儿子可以完全使用父亲的所有内容 专业角度:如果B类继承A类, B类就称为子类.派生类 A类就称为父类.基类.超类 面向对象三大特性:继承.封装.多态 继承:单继承.多继 ...
- Django框架之第三篇（路由层）--有名/无名分组、反向解析、路由分发、名称空间、伪静态
一.Django请求生命周期 二.路由层 urls.py url()方法 第一个参数其实就是一个正则表达式,一旦前面的正则匹配到了内容,就不会再往下继续匹配,而是直接执行对应的视图函数. djang ...
- C++实现 企业信息管理系统
2.1总体需求 2.2管理需求 3.总体架构 由于代码量比较大,请移步GitHub或码云 码云:传送门 , GitHub:传送门 话不多说,直接上效果 我是在Linux Ubuntu1 ...
- 【实战经验】Xilinx时钟从普通IO输出问题
Xilinx芯片的时钟信号从普通IO输出时,在map过程中会出错,对此有两种解决方案: 1.在ucf文件中,添加对应的约束文件: 例如[PIN "U0_1/clkout2_buf.O&quo ...
- MongoDB 概述
一.概述: 1.NoSQL数据库(非关系型数据库) 2.文档存储 3.格式类似JSON,BSON 4.最终一致性(非ACID) , CAP定理(C 一致性,A 高可用,P 分区性) 5.高可扩展性(分 ...
- mongoDB 分组并对分组结果筛选类似于SQL中的(group by xxx having ) 附带Java代码
今天需要做一个筛选程序,因为数据放在mongodb中,没写过分组的查询语句,查了一些资料,终于写出来了,分享给各位小伙伴 需求是 查询 学员 在2019-07-29之后未同步的数据(同一个学员需要2条 ...
- 获取本机的IP地址和mac地址
1. 以前一直用ipconfig来查看ip地址,哈哈哈,现在发现挺好玩 #获取本机的IP地址和mac地址 import uuid import socket def get_mac_address() ...
- Python进阶----异常处理
Python进阶----异常处理 一丶错误和异常 错误: 语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) #语法错误示范一 if #语法错误示范二 ...
- Python进阶(三)----函数名,作用域,名称空间,f-string,可迭代对象,迭代器
Python进阶(三)----函数名,作用域,名称空间,f-string,可迭代对象,迭代器 一丶关键字:global,nonlocal global 声明全局变量: 1. 可以在局部作用域声明一 ...
- js基本包装类型及Math对象(八)
一.基本包装类型[继承于Object类型]1.Number().String().Boolean()引用数据类型[包装类型]分别对应的基本数据类型为number.string.boolean. 2.当 ...