最终达到效果:

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. day17——序列化、os、sys、hashlib、collections
			
    day17 序列化 json 两组4个方法: 1.dumps(序列化) -- loads(反序列) dumps(list):将对象转换成字符串 loads(str):将字符串转换成对象 list--s ...
    
			
    2. 
						
  2. Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
			
    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
    
			
    3. 
						
  3. Jquery 跨Dom窗口操作
			
    . 子窗口给父窗口元素赋值 function modifyTheme(id){ $("#parent_dom",window.parent.document).attr(" ...
    
			
    4. 
						
  4. Linux目录结构说明
			
    文件系统层级标准(filesystem hierarchy standard,FHS). http://www.pathname.com/fhs/pub/fhs-2.3.html 以下是对这些目录的解 ...
    
			
    5. 
						
  5. oracle 数据库导入导出语句
			
    oracle的exp/imp命令用于实现对数据库的导出/导入操作;exp命令用于把数据从远程数据库服务器导到本地,生成.dmp文件;imp命令用于把本地的数据库.dmp文件从本地导入到远程的oracl ...
    
			
    6. 
						
  6. java自定义注释及其信息提取
			
    转自:https://xuwenjin666.iteye.com/blog/1637247 1. 自定义注解 import java.lang.annotation.Retention; import ...
    
			
    7. 
						
  7. IDEA修改选取单词颜色和搜索结果的颜色
			
    一.修改选取单词颜色 下图所示,选取Father后背景为淡蓝色,其它相同单词背景为灰色,根本看不清楚 修改配置 1.修改选取文本背景色为78C9FF 2.修改相同文本背景色为78C9FF,包括iden ...
    
			
    8. 
						
  8. scrapy 下载器中间件 随机切换user-agent
			
    下载器中间件如下列表 ['scrapy.downloadermiddlewares.robotstxt.RobotsTxtMiddleware', 'scrapy.downloadermiddlewa ...
    
			
    9. 
						
  9. ABP问题集结
			
    添加js跨域访问. 在Startup.cs文件中  public IServiceProvider ConfigureServices(IServiceCollection services)中添加  ...
    
			
    10. 
						
  10. MyBatis 中如何调用 Java 的 enum (枚举) 字段
			
    事先作成一 enum,如下: public enum CityCode { ALL("000"), BEIJING("010"), SHANGHAI(" ...
    
			
    11.