最终达到效果:

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_案例_交互添加的更多相关文章
	

    
								
  1. (尚027)Vue_案例_交互添加
		
    TodoHeader.vue组件 写交互: 第一步:跟目标元素绑定监听 (1).按回车键确认@keyup.enter="add" (2). 注意:数据在哪个组件,更新数据的行为就应 ...
    
		
    2. 
						
  2. (尚029)Vue_案例_交互footer组件功能
		
    需要实现界面截图: 难点分析:sAllCheck必须定义为计算属性 1.想到问题: 一旦写一个组件,需要接收哪些属性?? 因为只有属性确定了,标签才好写 todos属性可以确定三个方面的显示 2.做交 ...
    
		
    3. 
						
  3. (尚024)Vue_案例_交互删除
		
    注意:本总结中最终会删除不成功 ,原因是Item.vue中方法methods单词拼写错误!!! 首先明白,删除在Item.vue中交互 1.写交互,首先写监听@click="deleteIt ...
    
		
    4. 
						
  4. (尚028)Vue_案例_交互删除
		
    删除一条;1.鼠标移入移除这一条时颜色有变化 2.删除当前的todo ================================================================= ...
    
		
    5. 
						
  5. (尚034)Vue_案例_数据存储优化(代码优化!!!)
		
    最好能将上述代码抽取成一个模块(读json数据+写json数据) 1.在src下新建文件夹util(util文件夹用于放入工具的模块) 2.*使用localStorage存储数据的工具模块* 一个模块 ...
    
		
    6. 
						
  6. (尚032)Vue_案例_消息订阅与发布(组件订阅与发布(PubSubJS库))
		
    组件订阅与发布(PubSubJS库) npm info pubsub-js 安装库 npm install --save pubsub -js ============================ ...
    
		
    7. 
						
  7. (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
		
    自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...
    
		
    8. 
						
  8. (尚030)Vue_案例_存储数据(localStorage本地存储技术)
		
    当刷新页面时,会变为原来的状态 1.问题:当我刷新是不希望改变原来状态 需要缓存我当前的数据 2.究竟是缓存在内存里还是在文件里??? 缓存在文件里,因为浏览器关闭了,内存就没了;而我们需要重新打开浏 ...
    
		
    9. 
						
  9. (尚026)Vue_案例_动态初始化显示(尚025)
		
    (1).当前页面需要变化什么样的数据? 答:列表;应该有个todos:[]数组;数组中包含每个元素均为一个对象;有数据titles:'xxx';(勾不勾选)complete:'布尔类型' (2).数组 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. DRF框架（五）——context传参，二次封装Response类，两个视图基类(APIView/GenericAPIView)，视图扩展类（mixins），子类视图（工具视图），视图集（viewsets）,工具视图集
			
    复习 1.整体修改与局部修改 # 序列化get (给前端传递参数) #查询 ser_obj = ModelSerializer(model_obj) #只传递一个参数,默认是instance的参数,查 ...
    
			
    2. 
						
  2. golang开发:环境篇(六) Go运行监控Supervisord的使用
			
    为什么要使用Supervisord 17年第一次写Go项目的时候,用Go开发项目倒没没费多大劲,很快就开发完成了.到了在测试环境部署的时候,由于不知道有 Supervisord 这个软件,着实花了些功 ...
    
			
    3. 
						
  3. Java 获取客服端ip地址
			
    Java 获取客服端ip地址 /** * <html> * <body> * <P> Copyright 1994 JsonInternational</p& ...
    
			
    4. 
						
  4. modbus协议使用小记
			
    下载了libmodbus库,交叉编译后运行,总是接收回复时不正确.原因不明. 由于使用到modbus的需求比较简单,所以选择直接拼出modbus的请求报文,然后用串口直接发送和接收的方式, 拼modb ...
    
			
    5. 
						
  5. MySQL和SQL Server一些基本用法区别
			
    具体查看:https://www.cnblogs.com/zhaow/articles/9633554.html 转自:https://www.cnblogs.com/zhaow/articles/9 ...
    
			
    6. 
						
  6. LocalStorageUtils
			
    对localStorage进行封装: var LocalStorageUtils = new function (){ if(window.localStorage==null){ throw new ...
    
			
    7. 
						
  7. 精选SpringBoot八大开源项目：支付、秒杀、全文搜索等
			
    前言 曾在自己的博客中写下这样一段话:有一种力量无人能抵挡,它永不言败生来倔强.有一种理想照亮了迷茫,在那写满荣耀的地方. 如今,虽然没有大理想抱负,但是却有自己的小计划.下面是这一年来,自己利用闲暇 ...
    
			
    8. 
						
  8. C/C++ 关于数组和指针的总结
			
    1.数组的声明形如a[d],其中a是数组的名字,d是数组的维度,编译的时候数组的维度应该是已知的,所以维度d必须是一个常量.如果要定义一个不知道元素个数的以为数组,那么请使用vector容器: uns ...
    
			
    9. 
						
  9. Java里面获取当前服务器(linux环境)的IP地址--与请求者的真实IP
			
    package com.wfd360.Util; import javax.servlet.http.HttpServletRequest; import java.net.Inet4Address; ...
    
			
    10. 
						
  10. [LeetCode] 114. 二叉树展开为链表 ☆☆☆(深度遍历)
			
    二叉树展开为链表(很详细) 描述 给定一个二叉树,原地将它展开为链表. 例如,给定二叉树 1 / \ 2 5 / \ \3 4 6将其展开为: 1 \ 2 \ 3 \ 4 \ 5 \ 6 解析 变形的 ...
    
			
    11.