50天50個小項目 (Vue3 + Tailwindcss V4) ? | NotesApp(便簽筆記組件)

📅 我們繼續 50 個小項目挑戰!—— NotesApp組件

倉庫地址:https://github.com/SunACong/50-vue-projects

項目預覽地址:https://50-vue-projects.vercel.app/。

在這里插入圖片描述

使用 Vue 3 的 Composition API 搭配 TailwindCSSmarked 庫,構建一個支持 Markdown 渲染的筆記應用。該應用允許用戶添加、編輯、刪除筆記,并且內容會自動保存到 localStorage 中。每個筆記支持實時 Markdown 預覽,提供良好的交互體驗。


🎯 應用目標

  • 支持創建多個筆記卡片
  • 每個筆記可切換“編輯”與“預覽”模式
  • 實時渲染 Markdown 內容
  • 支持刪除筆記
  • 自動保存內容到 localStorage
  • 使用 Vue 3 Composition API 管理狀態
  • 使用 TailwindCSS 快速構建響應式 UI

?? 技術實現點

技術點描述
Vue 3 <script setup>使用 reactive 管理筆記數組和狀態
watchEffect監聽數據變化并自動保存到 localStorage
marked渲染 Markdown 內容為 HTML
v-html 指令插入渲染后的 HTML 內容
TailwindCSS快速構建響應式布局和樣式
自定義方法實現添加、刪除、編輯、切換模式等操作

🧱 組件實現

模板結構 <template>

<template><!-- 頂部固定的添加按鈕 --><div class="fixed top-4 right-4 z-50"><button@click="addNote"class="rounded bg-lime-500 px-4 py-2 text-white shadow transition hover:bg-lime-600 active:scale-95"><i class="fas fa-plus mr-2"></i>添加筆記</button></div><div class="flex flex-wrap p-16"><divv-for="(note, index) in notes":key="index"class="m-6 flex h-[400px] w-[400px] flex-col overflow-y-auto bg-white shadow-lg"><!-- 工具欄 --><div class="flex justify-end bg-lime-500 p-2"><button class="ml-2 text-lg text-white" @click="toggleEdit(index)"><i class="fas fa-edit"></i></button><button class="ml-2 text-lg text-white" @click="deleteNote(index)"><i class="fas fa-trash-alt"></i></button></div><!-- Markdown 預覽 --><divv-if="!note.editing"class="prose prose-sm max-w-none p-5"v-html="renderMarkdown(note.text)"></div><!-- 編輯器 --><textareav-elsev-model="note.text"@input="updateNote(index)"class="w-full flex-1 resize-none border-none p-5 font-sans text-base outline-none"></textarea></div></div>
</template>

模板結構清晰地劃分了筆記卡片的各個部分:工具欄、Markdown 預覽和編輯器。通過 v-if 控制顯示預覽或編輯狀態。


腳本邏輯 <script setup>

<script setup>
import { reactive, watchEffect } from 'vue'
import { marked } from 'marked'// 初始化:從 localStorage 讀取
const notes = reactive(JSON.parse(localStorage.getItem('notes') || '[]').map((text) => ({text,editing: false,}))
)// 渲染 Markdown 文本
const renderMarkdown = (text) => {return marked(text)
}// 添加新筆記
const addNote = () => {notes.push({text: '',editing: true,})
}// 刪除筆記
const deleteNote = (index) => {notes.splice(index, 1)
}// 切換編輯/展示模式
const toggleEdit = (index) => {notes[index].editing = !notes[index].editing
}// 更新筆記內容(僅用于觸發保存)
const updateNote = (index) => {// 此處無需手動更新 rendered,展示時直接調用 renderMarkdown 函數
}// 自動保存筆記內容到 localStorage
watchEffect(() => {localStorage.setItem('notes', JSON.stringify(notes.map((n) => n.text)))
})
</script>

該腳本使用 reactive 管理筆記數組,并通過 watchEffect 監聽數據變化,將內容自動保存至 localStorage。使用 marked 將 Markdown 轉換為 HTML 并通過 v-html 渲染。


樣式部分(TailwindCSS)

本組件完全依賴 TailwindCSS 來構建美觀的界面和交互體驗。以下是關鍵類及其作用:

🎨 TailwindCSS 樣式重點講解
類名作用
fixed, top-4, right-4, z-50固定在右上角的添加按鈕
bg-lime-500, text-white, hover:bg-lime-600按鈕的背景色、懸停效果
transition, active:scale-95添加按鈕的動畫反饋
flex, flex-wrap, p-16布局容器,支持響應式排版
m-6, h-[400px], w-[400px]每個筆記卡片的大小和間距
overflow-y-auto支持滾動查看長內容
bg-white, shadow-lg卡片背景和陰影效果
bg-lime-500, p-2工具欄背景和內邊距
text-lg, text-white圖標按鈕的樣式
v-html 渲染區:prose, prose-sm, max-w-none使用 Tailwind 的 prose 類美化 Markdown 渲染結果
textarea 區域:resize-none, border-none, outline-none移除默認邊框和調整大小功能,提升編輯體驗

這些 TailwindCSS 類構建出一個現代、美觀、響應式的筆記應用。


🔍 關鍵功能解析

? Markdown 實時渲染

使用 marked 庫將用戶輸入的 Markdown 文本即時轉換為 HTML,并通過 v-html 指令插入 DOM。這種方式簡單高效,適合小型 Markdown 編輯器。

💾 自動保存機制

通過 watchEffect 監聽 notes 數組的變化,自動將內容保存到 localStorage,確保用戶數據不會丟失。

?? 編輯與預覽切換

通過 editing 狀態切換,用戶可以在編輯器和 Markdown 預覽之間自由切換,提升交互體驗。

🗑? 刪除功能

每個筆記卡片都提供刪除按鈕,點擊后將從 notes 數組中移除該項,同時自動更新 localStorage


📁 常量定義 + 組件路由

constants/index.js 添加組件預覽常量:

{id: 33,title: 'Notes App',image: 'https://50projects50days.com/img/projects-img/33-notes-app.png',link: 'NotesApp',},

router/index.js 中添加路由選項:

{path: '/NotesApp',name: 'NotesApp',component: () => import('@/projects/NotesApp.vue'),},

🏁 總結

通過這篇文章,我們使用 Vue 3 Composition API、TailwindCSS 和 marked 構建了一個功能完善的 Markdown 筆記應用。它不僅支持添加、編輯、刪除筆記,還能自動保存內容,并實時渲染 Markdown。該應用結構清晰,易于擴展,是一個非常適合初學者和進階者學習的項目。

  • ? 支持導出為 Markdown 文件,將當前筆記導出為 .md 文件下載。
  • ? 根據關鍵詞搜索筆記內容。
  • ? 允許用戶通過拖拽重新排列筆記順序。
  • ? 支持暗色/亮色主題切換。

👉 下一篇,我們將完成NoteApp組件,實現了小便簽筆記的組件,可以對便簽增刪改查,支持MarkDown語法解析。🚀

感謝閱讀,歡迎點贊、收藏和分享 😊

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/90098.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/90098.shtml
英文地址,請注明出處:http://en.pswp.cn/web/90098.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

基于JAVA實現基于“obj--html--pdf” 的PDF格式文本生成

背景&#xff1a;因一個特定的項目需要&#xff0c;將java對象內容以特定樣式的PDF格式輸出&#xff0c;查看了很多文檔&#xff0c;有收費的、免費的、基礎集成的。收費的工具就表現突出&#xff0c;免費的工具基本很難滿足需求&#xff0c;故著手采用基礎集成方案。過程中嘗試…

Laravel 靜態方法的合理使用考量【超詳細】

Laravel 靜態方法的合理使用考量 在 Laravel 開發中&#xff0c;靜態方法的使用需要謹慎權衡。本文將從多個維度分析靜態方法的適用場景與注意事項&#xff0c;幫助開發者在保持代碼簡潔性的同時&#xff0c;確保可維護性和可測試性。 一、靜態方法的本質與特性 靜態方法屬于類…

在本地127.0.0.1上跨實例訪問遠程數據庫

1.確保可以和遠程目標庫連接通暢2.確保開啟了sqlserver的TCP/IP3.創建LInked server-------先刪除掉已存在的Remote203 IF EXISTS (SELECT 1 FROM sys.servers WHERE name Remote203) BEGINEXEC sp_dropserver Remote203, droplogins; END GO ------------創建鏈接 EXEC sp_ad…

Freemarker實現下載word可能遇到的問題

73萬字的Java面試題庫【全網最詳細-找工作/實習必備神器】&#xff1a; https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzE5MTY1NzczOA&actiongetalbum&album_id4057608455186808839 Java面試題庫ps&#xff1a;網上面試題多而雜&#xff0c;自己整理了一套面試題&a…

涉及海量數據的查詢SQL建議使用“數據庫函數”封裝并調用

一、問題描述生產環境中&#xff0c;核心業務表數據量隨業務增長迅速膨脹&#xff0c;原統計查詢SQL因執行計劃劣化、索引失效而突然變慢。若按傳統流程修復&#xff0c;需要優化SQL、測試、重新打包、發版&#xff0c;并且SQL優化往往需要多輪迭代、持續打磨&#xff1b;若每次…

OBLoader和OBDumper導數工具介紹

OBLoader和OBDumper導數工具介紹使用指南產品功能使用須知使用示例旁路導入性能調優導入性能優化導出性能優化數據處理控制文件預處理函數條件表達式注意事項使用指南 產品功能 &#x1f418; OBLOADER是什么&#xff1a; Java語言開發的客戶端工具&#xff0c;僅適用于Ocea…

Jenkins+Docker+Git實現自動化CI/CD

你是否還在手動構建、測試、部署過程中頻繁等待&#xff1f;或者擔心“我本地沒問題&#xff0c;部署卻報錯”&#xff1f;在敏捷開發和 DevOps 時代&#xff0c;**持續集成與持續交付&#xff08;CI/CD&#xff09;**變得至關重要。將 Jenkins、Docker、Git 三者結合&#xff…

Apache Ignite 的 SQL 功能和分布式查詢機制

這段內容講的是 Apache Ignite 的 SQL 功能和分布式查詢機制。我們可以從幾個關鍵點來理解&#xff1a;一、Ignite 是一個分布式 SQL 數據庫 ? 特點&#xff1a; 符合 ANSI-99 SQL 標準水平擴展&#xff08;可擴展到多個節點&#xff09;容錯&#xff08;fault-tolerant&#…

C++中的deque容器

deque容器基本概念功能&#xff1a;雙端數組&#xff0c;可以對頭端進行插入和刪除操作deque與vector區別&#xff1a;vector對于頭部的插入刪除掉率低&#xff0c;數據量越大&#xff0c;效率越低deque相對而言&#xff0c;對頭部的插入刪除速度會比vector快vetcor訪問元素時的…

閑庭信步使用圖像驗證平臺加速FPGA的開發:第三十課——車牌識別的FPGA實現(2)實現車牌定位

&#xff08;本系列只需要modelsim即可完成數字圖像的處理&#xff0c;每個工程都搭建了全自動化的仿真環境&#xff0c;只需要雙擊top_tb.bat文件就可以完成整個的仿真&#xff0c;大大降低了初學者的門檻&#xff01;&#xff01;&#xff01;&#xff01;如需要該系列的工程…

前端性能優化:從“龜速“到“閃電“的終極加速指南

一、性能指標:你的網站"體檢報告" ?? 1. 核心Web指標(Google排名因素) 指標 全稱 優秀標準 優化方向 LCP 最大內容繪制 ≤2.5s 關鍵資源預加載 FID 首次輸入延遲 ≤100ms 減少長任務 CLS 累計布局偏移 ≤0.1 預留圖片尺寸 測量方法: // 使用web-vitals庫測量…

Linux 重定向和緩沖區

序言&#xff1a; 前面在Linux 基礎文件IO操作-CSDN博客這篇博客里說了很多函數無論是在語言層還是在系統調用的方面。在調用系統調用open的時候會返回一個整型&#xff0c;在write傳參的時候第一個參數是一個叫fd的東西&#xff0c;這個是什么東西&#xff1f;這篇博客會詳細…

web登錄頁面

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>簡易登錄頁面</title><style>* {mar…

Java中關于線程池的解析

引語在學習了線程與多線程的相關知識后&#xff0c;我們已經能夠實現在程序中使多個任務并行&#xff0c;但是我們在操作時候&#xff0c;往往每執行一個的任務就需要創建一個新的線程。這種方式在需要執行任務很多時不利于我們對線程的管理&#xff0c;且創建過多線程也非常占…

J2EE模式---前端控制器模式

前端控制器模式基礎概念前端控制器模式&#xff08;Front Controller Pattern&#xff09;是一種結構型設計模式&#xff0c;其核心思想是將應用程序的所有請求集中到一個中央處理器&#xff08;前端控制器&#xff09;進行處理&#xff0c;由它負責接收請求、協調處理流程并返…

模塊加載、ES、TS、Babel 淺析

&#x1f90d; 前端開發工程師、技術日更博主、已過CET6 &#x1f368; 阿珊和她的貓_CSDN博客專家、23年度博客之星前端領域TOP1 &#x1f560; 牛客高級專題作者、打造專欄《前端面試必備》 、《2024面試高頻手撕題》、《前端求職突破計劃》 &#x1f35a; 藍橋云課簽約作者、…

day056-Dockerfile案例與Docker Compose

文章目錄0. 老男孩思想-老男孩名言警句1. Dockerfile指令&#xff1a;ENV與ARG的區別&#xff1f;2. 創建WordPress鏡像2.1 CA證書2.1.1 客戶端訪問HTTPS站點&#xff08;阿里云鏡像源&#xff09;過程2.1.2 查看Windows的CA證書2.1.3 ubuntu查看CA證書是否安裝2.2 準備apt下載…

gcc 源碼分析:從IR-RTL 到匯編輸出

在完成了IR-RTL的優化與寄存器分配后就來到匯編代碼的輸出&#xff1a;實現如下&#xff1a;class pass_final : public rtl_opt_pass { public:pass_final (gcc::context *ctxt): rtl_opt_pass (pass_data_final, ctxt){}/* opt_pass methods: */unsigned int execute (functi…

STC89C52系列單片機內部結構詳解

STC89C52 是基于 MCS-51 內核的增強型單片機&#xff0c;其內部結構集成了多種功能模塊&#xff0c;具備強大的數據處理和控制能力&#xff0c;是嵌入式系統中常用的一種微控制器。本文將結合內部結構框圖&#xff0c;詳細介紹 STC89C52 的各個核心組成部分及其功能作用。一、中…

Linux防火墻管理和基礎服務(FTP/SFTP)

防火墻管理# 開放端口firewalld-cmd --add-port880/tcp --permanent# 移除端口或阻止端口firewalld-cmd --remove-port880/tcp --permanent# 重啟服務systemctl restart firewalld# 查看防火墻開放哪些端口&#xff08;查看當前區域的規則&#xff09;firewall-cmd --lis…