vue简单案例----小张记事本
小张记事本
具体效果如图所示，这里就简单展示，还有很多不足的地方，希望大家可以对这个小项目进行改进，话不多说可以参考下面的代码
源代码如下
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>记事本</title><STYLE type="text/css">html,body {margin: 0;padding: 0;}body {background: #fff;}button {margin: 0;padding: 0;border: 0;background: none;font-size: 100%;vertical-align: baseline;font-family: inherit;font-weight: inherit;color: inherit;-webkit-appearance: none;appearance: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}body {font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;line-height: 1.4em;background: #f5f5f5;color: #4d4d4d;min-width: 230px;max-width: 550px;margin: 0 auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-weight: 300;}:focus {outline: 0;}.hidden {display: none;}#todoapp {background: #fff;margin: 180px 0 40px 0;position: relative;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);}#todoapp input::-webkit-input-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;}#todoapp input::-moz-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;}#todoapp input::input-placeholder {font-style: italic;font-weight: 300;color: gray;}#todoapp h1 {position: absolute;top: -160px;width: 100%;font-size: 60px;font-weight: 100;text-align: center;color: rgba(175, 47, 47, .8);-webkit-text-rendering: optimizeLegibility;-moz-text-rendering: optimizeLegibility;text-rendering: optimizeLegibility;}.new-todo,.edit {position: relative;margin: 0;width: 100%;font-size: 24px;font-family: inherit;font-weight: inherit;line-height: 1.4em;border: 0;color: inherit;padding: 6px;border: 1px solid #999;box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.new-todo {padding: 16px;border: none;background: rgba(0, 0, 0, 0.003);box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);}.main {position: relative;z-index: 2;border-top: 1px solid #e6e6e6;}.toggle-all {width: 1px;height: 1px;border: none; /* Mobile Safari */opacity: 0;position: absolute;right: 100%;bottom: 100%;}.toggle-all + label {width: 60px;height: 34px;font-size: 0;position: absolute;top: -52px;left: -13px;-webkit-transform: rotate(90deg);transform: rotate(90deg);}.toggle-all + label:before {content: "❯";font-size: 22px;color: #e6e6e6;padding: 10px 27px 10px 27px;}.toggle-all:checked + label:before {color: #737373;}.todo-list {margin: 0;padding: 0;list-style: none;max-height: 420px;overflow: auto;}.todo-list li {position: relative;font-size: 24px;border-bottom: 1px solid #ededed;height: 60px;box-sizing: border-box;}.todo-list li:last-child {border-bottom: none;}.todo-list .view .index {position: absolute;color: gray;left: 10px;top: 20px;font-size: 16px;}.todo-list li .toggle {text-align: center;width: 40px;/* auto, since non-WebKit browsers doesn't support input styling */height: auto;position: absolute;top: 0;bottom: 0;margin: auto 0;border: none; /* Mobile Safari */-webkit-appearance: none;appearance: none;}.todo-list li .toggle {opacity: 0;}.todo-list li .toggle + label {/*Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/*/background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: center left;}.todo-list li .toggle:checked + label {background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");}.todo-list li label {word-break: break-all;padding: 15px 15px 15px 60px;display: block;line-height: 1.2;transition: color 0.4s;}.todo-list li.completed label {color: #d9d9d9;text-decoration: line-through;}.todo-list li .destroy {display: none;position: absolute;top: 0;right: 10px;bottom: 0;width: 40px;height: 40px;margin: auto 0;font-size: 30px;color: #cc9a9a;margin-bottom: 11px;transition: color 0.2s ease-out;}.todo-list li .destroy:hover {color: #af5b5e;}.todo-list li .destroy:after {content: "×";}.todo-list li:hover .destroy {display: block;}.todo-list li .edit {display: none;}.todo-list li.editing:last-child {margin-bottom: -1px;}.footer {color: #777;padding: 10px 15px;height: 20px;text-align: center;border-top: 1px solid #e6e6e6;}.footer:before {content: "";position: absolute;right: 0;bottom: 0;left: 0;height: 50px;overflow: hidden;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,0 17px 2px -6px rgba(0, 0, 0, 0.2);}.todo-count {float: left;text-align: left;}.todo-count strong {font-weight: 300;}.filters {margin: 0;padding: 0;list-style: none;position: absolute;right: 0;left: 0;}.filters li {display: inline;}.filters li a {color: inherit;margin: 3px;padding: 3px 7px;text-decoration: none;border: 1px solid transparent;border-radius: 3px;}.filters li a:hover {border-color: rgba(175, 47, 47, 0.1);}.filters li a.selected {border-color: rgba(175, 47, 47, 0.2);}.clear-completed,html .clear-completed:active {float: right;position: relative;line-height: 20px;text-decoration: none;cursor: pointer;}.clear-completed:hover {text-decoration: underline;}.info {margin: 50px auto 0;color: #bfbfbf;font-size: 15px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);text-align: center;}.info p {line-height: 1;}.info a {color: inherit;text-decoration: none;font-weight: 400;}.info a:hover {text-decoration: underline;}/*Hack to remove background from Mobile Safari.Can't use it globally since it destroys checkboxes in Firefox*/@media screen and (-webkit-min-device-pixel-ratio: 0) {.toggle-all,.todo-list li .toggle {background: none;}.todo-list li .toggle {height: 40px;}}@media (max-width: 430px) {.footer {height: 50px;}.filters {bottom: 10px;}}</STYLE>
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp"><!-- 输入框 --><header class="header"><h1>小张记事本</h1><input autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo" v-model="message"@keyup.enter="add" /></header><!-- 列表区域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item,index) in list"><div class="view"><span class="index">{{ index+1 }}.</span><label>{{ item }}</label><button class="destroy" @click="remove(index)"></button></div></li></ul></section><!-- 统计和清空 --><footer class="footer" v-show="list.length!=0"><span class="todo-count" v-if="list.length!=0"><strong>{{list.length}}</strong> items left</span><button class="clear-completed" @click="clear">Clear</button></footer>
</section>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>let vm = new Vue({el: "#todoapp",data: {list: ["俊俏美人", "伟大的事迹", "人也可，才能爱"],message: "请记事",},methods: {add() {this.list.push(this.message)},remove(index) {this.list.splice(index, 1);},clear() {this.list = [];}}})
</script></html>
相关文章：
vue简单案例----小张记事本
小张记事本 具体效果如图所示，这里就简单展示，还有很多不足的地方，希望大家可以对这个小项目进行改进，话不多说可以参考下面的代码 源代码如下 <html lang"en"><head><meta charset"UTF-8"…...
爬虫获取接口数据
上一讲讲的是获取静态网页数据的教程，适用于我们要爬取的数据在网页源代码中出现，但是还是有很多的数据是源代码中没有的，需要通过接口访问服务器来获得，下面我就来讲讲如何爬取这类数据。 以巨潮资讯网爬取比亚迪企业年报为例。…...
私域流量的变现方式，你知道多少？
私域流量的变现方式是指通过有效的管理和运营自有的用户群体，将流量转化为实际收益的过程。私域流量的变现方式多样，下面将介绍其中几种常见的方式。 1. 电商平台入驻 通过将自有流量引导到电商平台，开设店铺进行商品销售，从中获…...
Webpack配置entry修改入口文件或打包多个文件
当我们使用Webpack进行文件打包时，默认打包的文件是src文件下的index.js文件 一、修改Webpack打包入口 如果我们想要在其他文件下打包指定的js文件就需要在webpack.config.js文件中进行entry配置 二、将指定的多个文件打包为一个文件 现在有两个文件，…...
Mac mini2014(装的windows)重装回MacOS
Mac mini2014(装的windows)重装回MacOS 制作macos的启动U盘，我的是32G的 第一步下载你的硬件能使用的系统，建议最好低一个版本，因为我安装的时候出现问题。 下载地址：https://blog.csdn.net/netgc/article/details/130641479下载…...
珠海建筑模板厂家-能强优品木业：为您提供优质建筑模板解决方案
在珠海这座美丽的沿海城市，建筑行业蓬勃发展，对于高质量的建筑模板需求也日益增加。在这里，有一家备受赞誉的建筑模板厂家，那就是能强优品木业。作为一家专业的建筑模板供应商，他们以优质的产品和卓越的服务在业界享有…...
图像识别技术如何改变智能家居的体验？
图像识别技术在智能家居中的应用正在改变我们的生活体验。通过图像识别技术，智能家居可以更准确地识别用户，并自动调整环境以适应用户的需求。以下是图像识别技术在智能家居中的一些应用： 人脸识别：通过人脸识别技术，智…...
前端中blob文件流和base64的区别
在前端中，base64 和 fileBlob 是用于处理文件数据的两种不同方式。 1. Base64 编码 Base64 是一种将二进制数据转换为文本字符串的编码方式。它将文件数据转换为一串由 ASCII 字符组成的字符串。在前端中，可以使用 JavaScript 的 btoa() 和 atob() 函数…...
MySQL详解六：备份与恢复
文章目录 1. 数据库备份的分类1.1 从物理和逻辑上分类1.1.1 物理备份1.1.2 逻辑备份 1.2 从数据库的备份策略角度上分类1.2.1 完全备份1.2.2 差异备份1.2.3 增量备份 1.3 常见的备份方法 2. MySQL完全备份2.1 完全备份简介2.2 优点与缺点2.3 实现物理冷备份与恢复2.3.1 实现流程…...
什么样的应用程序适合使用Flutter开发桌面？
桌面应用开发的现状 在过去，桌面应用程序的开发通常需要使用特定于操作系统的工具和语言，如C、C#、Java等。这导致了高昂的开发成本和维护困难。尽管有一些跨平台桌面开发工具，如Electron和Qt，但它们在性能、用户体验和开发效率方…...
02强化学习基本概念
强化学习基本概念 前言1、State、Action、Policy等① State② Action③ State transition④ State transition probability⑤ Polity 2、Reward、Return、MDP等① Reward② Trajectory and return③ Discounted return④ Episode⑤ MDP 总结： 前言 本文来自西湖大学…...
笔记2.2：网络应用基本原理
一. 网络应用的体系结构 （1）客户机/服务器结构（Client-Server, C/S） （2）点对点结构（Peer-to-Peer，P2P） （3）混合结构（Hybrid&#x…...
生活垃圾数据集（YOLO版）
文章目录 1、数据集介绍1.1、数据集图片组成2.1、获取数据集方式 2、扩展代码2.1、文件结构树2.2、划分数据集2.3、获取数据集文件名字2.4、文件成功对应检测 3、其他文章 1、数据集介绍 1.1、数据集图片组成 【有害垃圾】：电池（1 号、2 号、5 号&…...
操作系统篇之虚拟内存
虚拟内存是什么? 虚拟内存是计算机操作系统中的一种技术，它将每个进程的内存空间划分成若干个固定大小的页，并通过页面映射技术将这些页与物理内存或磁盘上的页面文件进行交换 虚拟内存能干什么? 扩展了实际物理内存容量：虚拟内存使得每个…...
浅谈SpringMVC的请求流程
目录标题 浅谈SpringMVC的请求流程SpringMVC的介绍SpringMVC的逻辑概念运行图解知识总结 浅谈SpringMVC的请求流程 对于SpringMVC而言重点是了解它的底层运行逻辑，从而可以根据其逻辑来进行实际业务的操作或者是利用原理增强业务的功能性，最终达到项目预…...
2309json.nlohmann数格示例1
参考 示例 下面是一些示例,可让你了解如何使用该类. 除了以下示例之外,你可能还需要: ->检查文档 ->浏览独立示例文件 每个API函数(记录在API文档中)都有相应独立示例文件.如,emplace()函数有一个匹配的emplace.cpp示例文件. 从文件中读取JSON json类提供了操作JSON…...
你知道 delete 删除属性时的一些细节吗？
探究 delete 的一些细节，起源于刚刚做过的一道笔试，原题如下： a 1; const b 2; console.log(delete a); console.log(delete b); // 输出结果是？ // 答：true false我可从来没用过 delete 的返回值，但凡…...
Blender入门——快捷键
视角控制 旋转视角：鼠标中键摁住即可旋转平移视角：shift中远近视角：中键滚动 物体控制 移动物体：G旋转物体:R缩放物体：S回复变换：AltG,R,S新建物体：shiftA复制物体：shiftD删除物体&a…...
实例讲解Spring boot动态切换数据源
前言 在公司的系统里，由于数据量较大，所以配置了多个数据源，它会根据用户所在的地区去查询那一个数据库，这样就产生了动态切换数据源的场景。 今天，就模拟一下在主库查询订单信息查询不到的时候，切换数据…...
调整网络时需要注意的事项
这段时间调整网络，涉及的计算机多，Vlan也多，不小心的动作会给自己造成很大的麻烦，因为毕竟我也只是一个网络的初学者，平时虽然是网管，只是作为一项普通的工作。 准备工作做得不细致，可能出现的问…...
OpenCV自学笔记二十二：绘图及交互
一、绘图基础 下面是关于OpenCV绘图基础函数的说明和举例： 1. cv2.line()：绘制直线 cv2.line(img, pt1, pt2, color, thickness, lineType) - img: 需要绘制直线的图像。 - pt1: 直线起始点坐标。 - pt2: 直线结束点坐标。 - color: 直线颜色&…...
【自学开发之旅】Flask-会话保持-API授权-注册登录
http - 无状态-无法记录是否已经登陆过 #会话保持 – session cookie session – 保存一些在服务端 cookie – 保存一些数据在客户端 session在单独服务器D上保存，前面数个服务器A,B,C上去取就好了，业务解耦。—》》现在都是基于token的验证。 以上是基…...
数据结构与算法--排序算法复习
目录 1.三种常见的简单排序： 1.1冒泡排序 1.2 选择排序 1.3 插⼊排序 2 常见高级排序算法 2.1 希尔排序 2.2 快速排序 2.3 归并排序 2.4计数排序 先上结论： 1.三种常见的简单排序： 1.1冒泡排序 1.⾸先在未排序数组的⾸位开始&#…...
python随手小练1
题目： 使用python做一个简单的英雄联盟商城登录界面 具体操作： print("英雄联盟商城登录界面") print("~ * "*15 "~") #找其规律 a "1、用户登录" b "2、新用户注册" c "3、退出系统&quo…...
gym_unity学习笔记
最近学了一段时间gym_unity，把一些资料留在这里 实例 实例gym_unity训练RollerBall：https://blog.csdn.net/alibutter/article/details/120908687实例gyn_unity训练3DBall：https://zhuanlan.zhihu.com/p/554927641?utm_id0 源码࿱…...
（三十）大数据实战——HBase集成部署安装Phoenix
前言 Phoenix 是一个开源的分布式关系型数据库查询引擎，它基于 Apache HBase构建。它提供了在 Hadoop 生态系统中使用 SQL查询和事务处理的能力。本节内容我们主要介绍一下Hbase如何集成部署安装Phoenix服务工具，并集成hive框架，能够快速、灵…...
【Python基础】S01E03 元组
P01S03 元组 定义元组元组无法修改定义一个元素的元素 修改元组变量方案一：关联新元组方案二：转换为列表 列表是可修改的，对于处理网站的用户列表或游戏中的角色列表至关重要。然而我们有时候需要创建一系列不可修改的元素，元组可…...
【算法-双指针思想】
双指针思想 双指针法（快慢指针法）： 通过一个快指针和慢指针在一个for循环下完成两个for循环的工作。 定义快慢指针 快指针： 寻找新数组的元素 ，新数组就是不含有目标元素的数组 慢指针： 指向更新 新数组下…...
uni-app实现点击复制按钮 复制内容
注意:uni.setClipboardData({})里面的data参数必须是字符串类型这个是大坑 第一种 <view>{{orderId}}</view> //复制的内容 <button click"copy(orderId)">复制</button>copy(value) {uni.setClipboardData({data: value , // 这里是个坑接…...
Qt5开发及实例V2.0-第十四章-Qt多国语言国际化
Qt5开发及实例V2.0-第十四章-Qt多国语言国际化 第14章 Qt 5多国语言国际化14.1 基本概念14.1.1 国际化支持的实现14.1.2 翻译工作：“*.qm”文件的生成 14.2 【实例】14.2.1 简单测试14.2.2 选择语言翻译文字 本章相关例程源码下载1.Qt5开发及实例_CH1401.rar 下载2.…...
网站默认首页/郴州网站推广
https://blog.csdn.net/qq_41996454/article/details/107687041...
临沂网站制作策划/百度网页游戏
使用Git添加Tag的方法 简述 作为版本管理工具，Git可以对某个版本打上标签(tag)，表示本版本为发行版。在发布软件，以及使用CocoaPods创建依赖库等情况时，需要对其版本使用标签注释。故简单总结一下添加tag的方式。 使用Git命令 查…...
如何让企业网站/成功的网络营销案例有哪些
给大家看几块开发板的VBAT外围电路的设计图： （1）（2）（3）（4）（5）stm32芯片手册要求：（大体上就这两个要求，具体要求…...
网站建设的优点/网络推广需要多少费用
树莓派重新烧了镜像，需要重新配置关于opencv的一些东西，这次采用makefile的方式进行安装和配置，以防自己忘记，在此记录。说明：其中树莓派系统为Stretch，自带python3.5.3，更新源以换成国内中科大…...
营销网站的功能/影视站seo教程
1：使用背景图 就是两个DIV外面套一个DIV，然后repeat-y一个背景图，这种方法不是真的等高，只是只要有一个内容增多，背景图就会纵向重复，形成左右等高的效果。 2：使用表格 用table，两个…...
西安建设规划局网站/教育机构网站
一、背景分布式系统中数据库中会用到唯一ID这个唯一ID的需要满足以下特点：1. 整个系统ID唯一2. ID是数字类型，而且是趋势递增的3. ID简短，查询效率快什么是递增？如：第一次生成的ID为12，下一次生成的ID是13&…...