(尚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).数组 ...
随机推荐
- MySQL视图、触发器、事务、存储过程、内置函数、流程控制、索引
一.视图 1.什么是视图 视图就是通过查询得到一张虚拟表,然后保存下来,下次直接使用即可 2.为什么要用视图 如果频繁使用一张虚拟表,可以不用重复查询 3.如何使用视图 create view tea ...
- CF1063F String Journey DP、SAM、线段树
传送门 为了方便把串反过来,条件变为\(t_i\)是\(t_{i+1}\)的真子串,答案显然不变. 一件重要的事情是必定存在一种最优解,字符串序列\(\{t\}\)满足\(|t_i| = i\). 考 ...
- node-red inject节点 debug节点 switch节点
inject节点: https://blog.csdn.net/geek_monkey/article/details/80737818 debug节点: https://blog.csdn.net/ ...
- ELK学习笔记之logstash将配置写在多个文件
0x00 概述 我们用Logsatsh写配置文件的时候,如果读取的文件太多,匹配的正则过多,会使配置文件动辄成百上千行代码,可能会造成阅读和修改困难.这时候,我们可以将配置文件的输入.过滤.输出分别放 ...
- 阿里巴巴 Java 开发手册（四）： OOP 规约
. [强制]避免通过一个类的对象引用访问此类的静态变量或静态方法,无谓增加编译器解析成 本,直接用类名来访问即可. 2. [强制]所有的覆写方法,必须加@Override 注解. 说明:getObje ...
- 单点logi,n
using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; using System.Collections.Generic; u ...
- MySQL和SQL Server一些基本用法区别
具体查看:https://www.cnblogs.com/zhaow/articles/9633554.html 转自:https://www.cnblogs.com/zhaow/articles/9 ...
- Centos复制的系统无法获取IP地址
本文主要是解决自己玩虚拟机时遇到的问题,网上查询了很多资料,最好综合多方的资料进行如下总结,如果无法解决您得问题,不要着急慢慢梳理总会解决的,加油~~~ 1.添加一块新的虚拟机的网卡2.删除rm -r ...
- kali之nmap
nmap简介 Nmap,也就是Network Mapper,最早是Linux下的网络扫描和嗅探工具包.可以扫描主机.端口.并且识别端口所对应的协议,以及猜测操作系统 Ping扫描(-sP参数) TCP ...
- vue-router中的router-view的困扰
刚开始接触vue的时候有很长一段时间被router-view的渲染困扰着,不知道为什么明明有很多router-link和不同的router-view,但是为什么渲染的时候不会出现错乱呢 这是我自己写的 ...