(尚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).数组 ...
随机推荐
- Akka-CQRS(13)- SSL/TLS for gRPC and HTTPS:自签名证书产生和使用
到现在,我们已经完成了POS平台和前端的网络集成.不过,还是那句话:平台系统的网络安全是至关重要的.前一篇博客里我们尝试实现了gRPC ssl/tls网络连接,但测试时用的证书如何产生始终没有搞清楚. ...
- bootstrap使用笔记
本文翻译自[http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem] 1.需要在H5的文档声明中使用: 2.如下一个简单的两列布局,先添加一 ...
- Java学习:线程池
线程池 线程池概念:其实就是一个容纳多个线程的容器,其中的线程可以反复使用,省去了频繁创建线程对象的操作,无需反复创建线程而消耗过多的资源. 线程池:容器-->集合(ArrayList,Hash ...
- PHP7.3.0+弃用FILTER_FLAG_SCHEME_REQUIRED的解决办法
今天本地调用一个接口报错了: filter_var(): explicit use of FILTER_FLAG_SCHEME_REQUIRED and FILTER_FLAG_HOST_REQUIR ...
- ffmpeg命令参数详解
ffmpeg命令参数详解 http://linux.51yip.com/search/ffmpeg ffmpeg图片加滤镜效果 参考:https://cloud.tencent.com/develop ...
- English--状语从句
English|状语从句 现在开始讲述关于状语从句的内容,由于内容略难并且略多,我将换个简单的方式帮助理解,这一块有些东西是需要记忆的.虽然是记忆,但是我可以保证记忆的内容是知识. 前言 目前所有的文 ...
- 【开发笔记】-CentOS配置Java环境变量
如果开发java应用,经常需要配置JAVA_HOME路径,如果是通过yum安装的jdk(一般系统会自带open-jdk),下面讲述配置过程: A 定位JDK安装路径 1. 终端输入: which ja ...
- Java 数组(一)定义与访问
一.数组 1.容器概述 容器:是将多个数据存储到一起,每个数据称为该容器的元素. 2.数组概述 数组:数组就是存储数据长度固定的容器,保证多个数据的数据类型要一致. 数组特点: (1)数组是一 ...
- Android-----使用SoapObject获取服务器数据
新建两个工具类ConnectWeb.java 和 ConnectMethod.java 进行对服务器进行数据交互 ConnectWeb.java代码如下: public class ConnectWe ...
- Vue Nginx反向代理配置 解决生产环境跨域
Vue本地代理举例: module.exports = { publicPath: './', devServer: { proxy: { '/api': { target: 'https://mov ...