vue实现记事本（含样式）

最新推荐文章于 2024-03-21 17:06:13 发布
最新推荐文章于 2024-03-21 17:06:13 发布
阅读量302 收藏 2
点赞数
分类专栏： # vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53951384/article/details/134124115
版权

实现增加、删除、全删、合计功能。
在这里插入图片描述

html代码

<!DOCTYPE html>
<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" />
  <link rel="stylesheet" href="./css/index.css" />
  <title>记事本</title>
</head>

<body>

  <!-- 主体区域 -->
  <section id="app">
    <!-- 输入框 -->
    <header class="header">
      <h1>小黑记事本</h1>
      <input placeholder="请输入任务" class="new-todo" v-model="todoName" />
      <button class="add" @click="add">添加任务</button>
    </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.name}}</label>
            <button class="destroy" @click="del(item.id)"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer">
      <!-- 统计 -->
      <span class="todo-count">合 计:<strong> {{list.length}} </strong></span>
      <!-- 清空 -->
      <button class="clear-completed" @click="clear">
        清空任务
      </button>
    </footer>
  </section>

  <!-- 底部 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        todoName: '',
        list: [
          { id: 1, name: '吃饭' }
        ]
      },
      methods: {
        add() {
          if (this.todoName.trim() == '') {
            alert('请输入有效内容')
            return
          }
          this.list.unshift({
            id: +new Date(),
            name: this.todoName
          })
          this.todoName = ''
        },
        del(id) {
          confirm('是否删除所选内容？')
          this.list = this.list.filter(item => item.id !== id)
        },
        clear() {
          this.list = []
        }
      }
    })

  </script>
</body>

</html>

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

#app {
  background: #fff;
  margin: 180px 0 40px 0;
  padding: 15px;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
#app .header input {
  border: 2px solid rgba(175, 47, 47, 0.8);
  border-radius: 10px;
}
#app .add {
  position: absolute;
  right: 15px;
  top: 15px;
  height: 68px;
  width: 140px;
  text-align: center;
  background-color: rgba(175, 47, 47, 0.8);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  border-radius: 0 10px 10px 0;
}

#app input::-webkit-input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#app input::-moz-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#app input::input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: gray;
}

#app h1 {
  position: absolute;
  top: -120px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 60px;
  font-weight: 100;
  text-align: center;
  color: rgba(175, 47, 47, 0.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;
  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;
}

.todo-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.todo-list li {
  position: relative;
  font-size: 24px;
  height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6;
}

.todo-list li:last-child {
  border-bottom: none;
}

.todo-list .view .index {
  position: absolute;
  color: gray;
  left: 10px;
  top: 20px;
  font-size: 22px;
}

.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;
  }
}
清梦压星河_Ciao
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现记事本功能
10-16
主要为大家详细介绍了vue实现记事本功能，记事本可以进行添加删除事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用Vue完成记事本
weixin_66059613的博客
09-28 916
使用Vue完成记事本
Vue快速入门（附实战小项目：记事本，淘汰了80%的前端面试者
最新发布
2301_82242638的博客
03-21 920
开发环境版本，包含了有帮助的命令行警告官网提供的 axios 在线地址自己的js小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
VUE实现记事本功能
qq_41582280的博客
11-21 1101
VUE实现记事本功能 直接上代码： <!DOCTYPE html> <html lang="en"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style&gt
Vue实现记事本
qq_56303170的博客
09-18 509
Vue实现记事本 功能要求： 文本框中的内容和添加到记事本的内容相同，需要用到v-model进行数据同步 添加记事本内容，动态添加，使用v-for 在文本框中输入完，键盘按下enter，添加内容，使用了v-on绑定事件以及添加限制符 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>记事本</title> <link rel="stylesh
Vue 实现简单记事本
Web_blingbling的博客
08-24 1552
用到的知识 列表结构可以通过 v-for 指令结合数据生成 v-on 结合事件修饰符可以指定某个键，比如 .enter 通过 v-model 可以快速的设置和获取表单元素的值 vue 是一种基于数据的开发方式 关于 data 中使用 return 的问题 因为使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件；而不使用return包裹的数据会在项目的全局可见，会造成变量污染 。 实现效果 代码 <!DOCTYPE html> <html lang="en">
vue之实现记事本功能
兮动人
02-17 4452
文章目录1. 记事本功能2. 新增 1. 记事本功能 记事本有基本的增删改查等操作功能，输入框输入内容回车添加，每添加一条内容左下角就会增加一条记录 当想要删除一条内容时，鼠标放到内容上，就会出现一个删除箭头。右下角有个Clear按钮，点击后，记事本的全部内容都会被清除掉 2. 新增 ...
Vue脚手架记事本案例
10-03
总结TODOList案例： 组件化编码流程： ... 2.实现动态组件：考虑好数据的存放位置，数据是一个组件在用还是一些组件在用： ...props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。
Vue实现简易记事本功能.zip
07-10
Vue实现简易记事本，通过该项目可以了解到Vue的双向绑定和遍历数组对数据进行显示，简单明了，通俗易懂，一看就明白。
Vue记事本.html
08-17
VUE基础小黑记事本，html，js代码&css样式，可直接打开查看。
Vue 实现简易记事本
m0_57835615的博客
07-13 204
预览图： 功能如下： （1）输入任务并按下回车键，可将任务添加至任务列表（不可输入重复任务） （2）点击删除，可删除对应任务 （3）点击清空，所有任务都会被删除 （4）左下角同步显示任务总数 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" ..
【练习】Vue实现记事本
weixin_46303867的博客
02-08 322
功能要求 输入框输入后，回车可添加输入的内容到事件栏 鼠标移到某一栏上可以点击×进行该栏的删除 左下角可以统计事件的条数 右下角可以清空事件 实现步骤 生成列表结构(v-for 数组) 获取用户输入(v-model 双向绑定) 回车,新增数据(v-on .enter事件修饰符) 页面布局不熟悉，可以通过审查元素的方式快速找到元素 CSS代码 html, body { margin: 0; padding: 0; } body { background: #fff ; } button
Vue 实现小小记事本
如诗
05-08 3298
1、实现效果 用户输入后按回车，输入的内容自动保存，下方会显示记录的条数，鼠标移动到文字所在div上，会显示删除按钮，点击按钮，相应记录会被删除，下方的记录条数会相应变化，点击clear，所有记录会被删除。效果如下： 2、实现思路 先写出记事本的基本样式，在vue实例中的data对象里定义list数组，以及message的初始值。通过 v-model实现input标签文本和message...
vue实现简单记事本功能（包含时间）
weixin_45778415的博客
12-09 724
vue实现简单记事本功能（包含时间） ps：这是我第一次写博客，写的不好多多见谅（有建议可以留在评论区）。 本人一个普通大学软件专业大二学生，在学长的建议下接触到了vue，越用越香，最近状态很不好就想到了写个人博客打发一下时间。 记事本项目 这应该是每个接触到前端的人都会弄的一个小程序！下面展示我的代码以及我的编程过程。 首先通过cdn引入在线vue。 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></scri
用Vue实现一个简单的记事本效果
Czhongyi的博客
08-03 680
html部分 <div id="app" v-cloak> <p class="title-Black">小黑记事本</p> <div class="head-box"> <input class="record-box" type="text" placeholder="请输入非空的内容，点击加号记录" v-model.trim="todoLIST" @keyup.enter="addBox">
vue制作简易记事本
qq_60536024的博客
08-04 716
vue制作简单记事本
vue实现一个记事本的案例
yang68668的博客
12-30 569
<!DOCTYPE html> <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>D.
vue 简单指令使用，实现记事本案例
咿呀咿呀呦~
06-23 478
最近公司项目不忙，我终于有时间继续学习vue了，早上看了下官方文档，主要看了下指令，感觉还可以，就上手做了一个小案例，记事本功能。该案列包括以下功能： 输入任务按回车键，列表就会新增一条数据 输入完任务按回车后输入框将被清空 底部有总记录数和清除所有数据 鼠标悬浮列表上显示删除按钮可以删除数据 一、实现思路 1、通过输入框的 @keyup.enter 指令 绑定 添加方法，添加方 法中将输入的内容存到数组中保存 2、通过 v-for指令 循环遍历数组元素并在 ul li 中动态显示出来
Vue组件开发记事本
qq_68782097的博客
06-03 418
使用vue的组件开发的简单的网页记事本
vue 实现简易记事本
01-31
Vue实现简易记事本可以分为以下几个步骤： 1. 创建Vue应用：使用Vue的脚手架工具(如Vue CLI)来创建一个新的Vue项目。 2. 组件设计：将记事本的不同功能块划分为不同的组件，例如头部组件、便签列表组件和便签编辑组件。 3. 数据管理：使用Vue的数据驱动原则，通过在Vue的data选项中定义数据属性来管理记事本的各项数据，如便签的标题、内容以及是否完成等。 4. 完善功能：在不同组件中绑定相应的事件来实现记事本的各项功能，如添加新便签、编辑便签、删除便签等。可以使用Vue提供的指令来实现这些功能，如@click、v-model等。 5. 样式美化：使用CSS来为记事本添加样式，使其具有美观的外观。也可以使用第三方CSS框架如Bootstrap或Element UI等来简化样式开发。 6. 数据持久化：在组件中使用Vue提供的生命周期钩子函数，如created或mounted，在组件创建或挂载时，从本地存储(localStorage或sessionStorage)中读取保存的便签数据，并在Vue的data选项中进行初始化。 7. 部署上线：使用Vue的打包工具将项目打包成生产环境所需的静态文件，并将其部署到可访问的服务器上，以供用户访问和使用。 通过以上步骤，我们可以使用Vue快速实现一个简易的记事本应用。当然，根据实际需求，还可以进一步扩展添加更多的功能和优化用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值