vue 小黑记事本

最新推荐文章于 2024-06-05 10:03:55 发布
最新推荐文章于 2024-06-05 10:03:55 发布
阅读量135 收藏
点赞数
分类专栏： web_html 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wowocpp/article/details/132597720
版权

vue 小黑记事本

下面这个界面用html和css 如何搞出来？
在这里插入图片描述

wowocpp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue案例小黑记事本详解
Im_xiaopei的博客
10-04 2297
大家好，今天学的东西不是很多，但遇到了一个特别有趣的vue小案例吧，我觉得可以拿出来给大家伙练练手，虽然案例简单，并不复杂，但也算是涵盖了vue大部分的常用知识点，希望大家可以多练练，有助于vue的学习。 正题开始。。。 案例叫做小黑记事本，大致长这个样子 大致功能是这个样子的， 1.在输入框中输入内容，点击回车，会将输入的内容按顺序放入下面的列表中， 2.再放入的过程中会自动统计记录的数量，显示在左下角 3.当鼠标点击对应的列表...
Vue小黑记事本
X_188773的博客
06-22 725
v-model数据双向绑定v-for生成列表结构，和数据绑定，响应式v-on绑定事件、事件修饰符 . 使用点v-show频繁切换显示 displayv-if移除（隐藏）添加回来（显示）
vue小黑记事本
往事如烟~~的博客
06-28 258
<template> <div class="home"> <h1>小黑记事本</h1> <input class="el-input" type="text" v-model="input" placeholder="请输入内容" @keyup.enter="add"> <ul class="L0"> <li v-for="(item,index) in title" :key="index">
vue小黑记事本源码
qq_63529194的博客
03-13 435
【代码】vue小黑记事本源码。
Vue 小黑记事本组件版
qq_64628470的博客
11-13 923
渲染功能：1.提供数据： 提供在公共的父组件 App.vue2.通过父传子，将数据传递给TodoMain3.利用 v-for渲染添加功能：1.收集表单数据 v-model2.监听事件（回车+点击都要添加）3.子传父，讲任务名称传递给父组件 App.vue4.进行添加 unshift（自己的数据自己负责）5.清空文本框输入的内容6.对输入的空数据 进行判断删除功能1.监听事件（监听删除的点击） 携带id2.子传父，讲删除的id传递给父组件的App.vue。
用Vue实现小黑记事本案例
qq_34306228的博客
04-08 1353
用Vue实现小黑记事本案例实现内容代码介绍全部代码 实现内容 新增数据 删除操作 统计个数 清空clear 隐藏 在无数据时是隐藏状态 代码介绍 输入区域 <div id="record"> <h1>小黑记事本</h1> <div class="text"> <input type="text" class="inou" placeholder="请输入任务" v-model="req" @
vue小黑记事本--摘抄
weixin_52634719的博客
08-04 176
这里讲的不好，没有CSS
【Vue】小黑记事本
最新发布
qq_39921135的博客
06-05 377
咱们可以把小黑记事本原有的结构拆成三部分内容：头部（TodoHeader）、列表(TodoMain)、底部(TodoFooter)
【Vue】综合案例-小黑记事本
qq_39921135的博客
06-04 254
/ id一般是后台动态生成的，但如果前端需要临时使用id，可以使用时间戳，保证它是唯一的。// console.log(id) => filter 保留所有不等于该 id 的项。// 1. 通过 v-model 绑定 输入框 → 实时获取表单元素的内容。// 2. 点击按钮，进行新增，往数组最前面加 unshift。
前端 vue源码-小黑记事本.rar
07-22
在这个“小黑记事本”的项目中，我们看到作者运用了Vue的核心概念来创建一个简单的应用，这对我们深入理解Vue的使用和源码有很大帮助。 首先，让我们来看看Vue中的核心概念： 1. **数据绑定（Data Binding）**：...
Vue小黑记事本案例
qq_51501183的博客
09-22 521
1.小黑记事本效果图 2.代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小黑记事本</title> <style> *{ margin: 0 ; padding: 0; background-color: white; } .todo{ background-...
小黑记事本（网页）
Yous的博客
06-03 725
项目： 提示：关于vue的学习实例，是一个小例子，顺便学一下里边的css记录一下： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessa
flask 网页 javascript 按钮 点击事件
abc
11-14 9345
代码: #!/usr/bin/env python # -*- coding: utf-8 -*- from flask import Flask from flask import Flask from flask import render_template from flask import request from flask import redirect from flask im...
postman使用
abc
02-16 7025
postman使用 http://httpbin.org/post http://httpbin.org/post http://httpbin.org/post?data=1222&name=2222&password=3333
红米手机 导出 通讯录 到电脑保存
abc
09-27 4377
此电脑\Redmi Note 5\内部存储设备\MIUI\backup\AllBackup\20230927_043337。手机 设置 ---- 更多设置 ----- 备份与恢复 ----- 手机 备份 恢复 ----- 手机 备份。如何将 bak文件 转换成txt文件？用 usb 线 连接 手机 和 电脑。选择 短信 联系人和通话记录。不要安装什么 手机助手。会出现下面的 一个 盘。-------立即备份。不要安装 什么app。
mongoose Web服务器 嵌入式 web服务器
abc
04-27 2879
mongoose Web服务器 Mongoose - Embedded Web Server 参考链接 https://github.com/cesanta/mongoose/tree/master/examples https://github.com/cesanta/mongoose Download Mongoose Source Code here Ask questions on support forum Read User Guide and API reference Study mong
Win7 下安装及使用NVM node.js
abc
12-15 2467
参考文档： 环境： win7 64位 参考博客 nvm安装与使用nvm下载不同版本nodejs https://blog.csdn.net/seu_lxy/article/details/94635659 https://blog.csdn.net/gaoqiang1112/article/details/80898134 node管理工具 nvm 下载安装和使用 node 配置全局环境 http...
chrome 浏览器远程控制与调试（一）
abc
09-27 2354
chrome 浏览器远程控制与调试（一） 远程调试启动： chromium-browser --remote-debugging-port=9222 --user-data-dir='~/code/chrome-test' 命令： http://localhost:9222/json/protocol #获取协议 http://localhost:9222/json/version #获取版本 http://localhost:9222/json/list #或者 http://localhost:92
小黑记事本vue源代码
10-02
小黑记事本是一个使用Vue框架编写的项目，实现了简易的记事本功能。下面是部分小黑记事本的Vue源代码： 模板部分： ```html <template> <div class="notebook"> <h1>小黑记事本</h1> <div class="input-container"> <textarea v-model="content" placeholder="开始编写"></textarea> </div> <div class="button-container"> <button @click="saveNote">保存</button> <button @click="clearNote">清空</button> </div> <div class="notes-container"> <h2>已保存的笔记</h2> <ul> <li v-for="(note, index) in notes" :key="index">{{ note }}</li> </ul> </div> </div> </template> ``` 脚本部分： ```javascript <script> export default { data() { return { content: '', notes: [], }; }, methods: { saveNote() { if (this.content.trim() !== '') { this.notes.push(this.content.trim()); this.content = ''; } }, clearNote() { this.content = ''; }, }, }; </script> ``` 样式部分： ```css <style scoped> .notebook { text-align: center; margin: 20px auto; } .input-container { margin-bottom: 20px; } textarea { width: 300px; height: 150px; } .button-container button { margin: 0 10px; } .notes-container { margin-top: 30px; } ul { list-style-type: none; padding-left: 0; } li { margin-top: 10px; } </style> ``` 以上是小黑记事本的一个简化版本，实现了输入内容的保存和清空，并将已保存的笔记展示在界面上。用户可以在文本框中输入内容，点击保存按钮即可将内容添加到已保存的笔记列表中。点击清空按钮可以清空文本框中的内容。小黑记事本提供了简单的界面交互，方便用户保存和管理笔记。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值