(尚028)Vue_案例_交互删除

删除一条;
1.鼠标移入移除这一条时颜色有变化
2.删除当前的todo
===================================================================
显示隐藏背景的变化,首先加监听
1.区别两对属性;
onmouseenter="" onmouseleave=""
onmouseover="" onmouseout=""
区别:

(1).进来的时候mouseenter和mouseover都会触发

(2).内部div进入内部div时,会触发mouseout;最内部出来时执行mouseover;出最外面div时才会触发mouseleave

====================================================================================================================================
1.

2.

3.

=================================================================================================================================
页面展示出错:
说todoDelete未定义,原来是在App.vue组件中:写成了;

厉害了!!!
(尚028)Vue_案例_交互删除的更多相关文章
- (尚024)Vue_案例_交互删除
注意:本总结中最终会删除不成功 ,原因是Item.vue中方法methods单词拼写错误!!! 首先明白,删除在Item.vue中交互 1.写交互,首先写监听@click="deleteIt ...
- (尚029)Vue_案例_交互footer组件功能
需要实现界面截图: 难点分析:sAllCheck必须定义为计算属性 1.想到问题: 一旦写一个组件,需要接收哪些属性?? 因为只有属性确定了,标签才好写 todos属性可以确定三个方面的显示 2.做交 ...
- (尚027)Vue_案例_交互添加
TodoHeader.vue组件 写交互: 第一步:跟目标元素绑定监听 (1).按回车键确认@keyup.enter="add" (2). 注意:数据在哪个组件,更新数据的行为就应 ...
- (尚023)Vue_案例_交互添加
最终达到效果: 1.做交互,首先需要确定操作哪个组件? 提交------操作组件Add.vue 2.从哪开始做起呢? 从绑定事件监听开始做起,确定你跟谁绑定事件监听,在回调函数中做什么, ====== ...
- (尚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).数组 ...
随机推荐
- FPGA+ADV7511实现HDMI显示
一.前言 目前FPGA成为了视频图像实时处理的主要平台.显示作为图像应用设备的必要功能,对整体系统处理效果非常关键.HDMI是现阶段主流的显示接口,本文基于ADV7511芯片的HDMI显示系统,讲述H ...
- DDR3(4):读控制
写控制完成后开始设计读控制,写控制和读控制是非常相似的. 一.总线详解 由 User Guide 可知各信号之间的逻辑关系,读数据是在给出命令之后一段时间后开始出现的.图中没有给出app_rd_dat ...
- ThreadLocal使用场景案例
本篇是<ThreadLocal 那点事儿>的续集,如果您没看上一篇,就就有点亏了.如果您错过了这一篇,那亏得就更大了. 还是保持我一贯的 Style,用一个 Demo 来说话吧.用户提出一 ...
- JQuery的使用案例(二级联动,隔行换色,轮播图,广告插入)
JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...
- 核与线程 CPU 4核8线程 的解释
1.物理CPU: 物理CPU就是计算机上实际配置的CPU个数.在linux上可以打开cat /proc/cpuinfo 来查看,其中的physical id就是每个物理CPU的ID,能找到几个phys ...
- map集合转set集合
import java.util.*; //Map集合的迭代器输出,先将Map集合变为Set集合,再使用Iterator迭代器 public class Java_collection { publi ...
- 检查 PInvoke 签名的调用约定和参数与非托管的目标签名是否匹配
解决方案: [DllImport("Dll.dll")]改为[DllImport("Dll.dll", CallingConvention=CallingCon ...
- 树莓派4B安装Raspbian系统及配置
2019/11/11, 树莓派4B, Raspbian Buster 摘要:给树莓派4B安装系统及基础配置 树莓派实验室参考文档 准备工具 树莓派4B硬件 SD卡格式化工具 SD Formatter ...
- Python与Golang对比
一:前言 刚看了一篇软文,说什么“才华是改变人生最有效的途径”,反正呢,大体就是科技进步,要想一直在车上,就得不断的学习,刚好最近也准备学习Golang,最近火的不能在火了吧,刚好也有些Python基 ...
- 给router-link 标签添加事件@click 、@mouseover等无效
需要加上native修饰符. 所以如果在想要在router-link上添加事件的话需要@click.native这样写 所以如果要事件有效的话,改成如下: <router-link v-for= ...