Vue 实现小小记事本

1、实现效果

用户输入后按回车，输入的内容自动保存，下方会显示记录的条数，鼠标移动到文字所在div上，会显示删除按钮，点击按钮，相应记录会被删除，下方的记录条数会相应变化，点击clear，所有记录会被删除。效果如下：

2、实现思路

先写出记事本的基本样式，在vue实例中的data对象里定义list数组，以及message的初始值。通过 v-model实现input标签文本和message的双向绑定。通过v-for循环遍历li标签，取出list数组中的数据。
给input框通过keyup.enter绑定回车事件add，直接把当前输入的值添加到list数组里，然后遍历到li标签里。
在li标签的button标签里添加remove事件。先传入index，通过this.list.splice(index, 1) 删除当前记录。
在下方的footer部分，判断是否存在记录，若不存在，则销毁标签，若存在，则添加clear事件，直接把list数组赋值为空，就可以清除所有的记录。

3、实现代码

index.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=922433


IE 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;


}


}

html与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>


</head>


<link rel="stylesheet" type="text/css" href="index.css" />

<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: "please input",


},


methods: {


add() {


this.list.push(this.message)


},


remove(index) {


this.list.splice(index, 1);


},


clear() {


this.list = [];


}


}


})


</script>



</html>

Vue 实现小小记事本的更多相关文章

angular项目——小小记事本1
这次的项目是制作一个记事本,有点类似于手机qq聊天信息. 内容:在一个input当中输入一行数据,之后提交,这个数据便会记录在下面.随着提交的增加,数据会以列表形式排列下来. 列表中,前面有一个组件, ...
vue之小小动态按钮
Vue是前台框架,可以独立完成前后端分离式web项目渐进式的javascript框架 ,今天我们来设计一个简单的动态按钮具体效果图如下: 点击后会变成这样: 首先我们需要下载vue.js:htt ...
angular.js——小小记事本3
app.js部分,首先是路由.这个之前讲过了,链接在这里—— http://www.cnblogs.com/thestudy/p/5661556.html var app = angular.modu ...
angular项目——小小记事本2
一,路由的规划. 需要模拟的页面有三个:all,active,conplete. 首先,写好铺垫需要的各种东西,重要的组件的引用等—— 这里我们会将index.html设为主页,将body.html加 ...
Vue开源项目库汇总
最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 elem ...
Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
Vue常用开源项目汇总
前言:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
Vue应用框架整合与实战--Vue技术生态圈篇
实用框架以及工具 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...
vue各种插件汇总
https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...

随机推荐

CSS3（一）
(一)CSS简介 CSS主要用来美化页面.布局页面 1.HTML的局限性 HTML主要是做结构,显示元素内容.只关注内容,但是丑.虽然可以做简单的样式,但是非常臃肿和繁琐 2.CSS网页的美容师 CS ...
[CF1537E] Erase and Extend （字符串）
题面给一个长度为 n \tt n n 的字符串,你可以进行无限次以下两种操作之一: 删去末尾的字符(此时要保证删去后字符串非空). 把当前整个字符串复制一份,接到自己的后面. 输出最终通过操作能达到 ...
【Java】学习路径49-练习:使用两个不同的线程类实现买票系统
练习:使用两个不同的线程类实现买票系统请创建两个不同的线程类.一个测试类以及一个票的管理类. 其中票的管理类用于储存票的数量.两个线程类看作不同的买票方式. 步骤: 1.创建所需的类 App售票线程 ...
【java】学习路径21-基本类型的包装类
int i =100; //Integer i2 = new Integer(100); //我们发现已被弃用,现在我们一般的方法是使用valueOf Integer i2 = null; i2 = ...
MyBatis第一个程序
创建一个maven项目,并且在pom.xml导入myBatis和jdbc的jar包 <dependencies> <dependency> <groupId>org ...
学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（上）
学习ASP.NET Core Blazor编程系列一--综述一.概述 Blazor 是一个生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建信息丰富的交互式 U ...
Haproxy部署及控制台使用手册
一.介绍 1.简介 HAProxy是一个使用C语言编写开源软件,提供高可用,负载均衡,以及基于TCP(四层)和HTTP(七层)的应用程序代理: HAProxy特别适用于那些负载特大的web站点,这些站 ...
Linux下自动删除过期备份和自动异地备份
每天自动删除过期备份首先编写一个简单的Shell脚本DeleteExpireBackup.sh: #!/bin/bash # 修改需要删除的路径 location="/database/b ...
接入Twitter和Facebook分享踩坑记录
准备工作 1.首先需要在HTML的head添加下述meta标签内容,在分享时,Twitter和Facebook会爬取该网站页面的meta内容,然后生成分享卡片. 2.按照下述配置完成后,需要把内容发布 ...
Job for redis-server.service failed because the control process exited with error code(Centos 7 设置Redis开机自启报错)
报错信息如下: Job for redis-server.service failed because the control process exited with error code. See ...

Vue 实现小小记事本

1、实现效果

2、实现思路

3、实现代码

todoapp {

todoapp input::-webkit-input-placeholder {

todoapp input::-moz-placeholder {

todoapp input::input-placeholder {

todoapp h1 {

Vue 实现小小记事本的更多相关文章

随机推荐

热门专题