Vite+Vue3 項目 華仔待辦

来源:https://www.cnblogs.com/huajianketang/p/18380610
-Advertisement-
Play Games

此“華仔”,不是彼“華仔”,你懂的! 先來了個截圖 緊跟著,實現步驟也來了 1. 安裝 Node.js,終端運行 npm create vue@latest,項目名 vue-to-do,後面的選項全選 No; 2. cd vue-to-do 進入項目目錄,npm install 安裝依賴,npm r ...


此“華仔”,不是彼“華仔”,你懂的!

先來了個截圖

緊跟著,實現步驟也來了

1. 安裝 Node.js,終端運行 npm create vue@latest,項目名 vue-to-do,後面的選項全選 No

2. cd vue-to-do 進入項目目錄,npm install 安裝依賴,npm run dev 啟動 Vite 開發伺服器;

3. 修改 index.htmlmain.js

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>華仔待辦</title>
  </head>
  <body>
    <!-- 根組件容器 -->
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

src/main.js

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
// 創建應用 傳根組件
createApp(App).mount('#app')

4. 修改 App.vue 根組件,添加 ToDoHead.vue ToDoBody.vue 兩個子組件;

src/App.vue

<script setup>
import ToDoHead from './components/ToDoHead.vue';
import ToDoBody from './components/ToDoBody.vue';
</script>

<template>
  <ToDoHead />
  <ToDoBody />
</template>

<style scoped>
</style>

src/components/ToDoHead.vue

<script setup>
</script>

<template>
  <h1>華仔待辦</h1>
</template>

<style scoped>
</style>

src/components/ToDoBody.vue

<script setup>
import { ref } from 'vue';
let tasks = ref([])  // ref 對象 任務列表 { name: '任務名', state: '狀態' } active completed
let taskName = ref("")  // ref 對象 .value
// 添加任務
function addTask() {
  if (taskName.value.trim() === "") {
    return
  }
  tasks.value.push({
    name: taskName.value,
    state: 'active'
  })
  taskName.value = ""
}
// 完成任務
function completeTask(index) {
  tasks.value[index].state = 'completed'
}
// 刪除任務
function deleteTask(index) {
  tasks.value.splice(index, 1)
}
// 刪除所有
function deleteAll() {
  tasks.value.splice(0, tasks.value.length)
}
</script>

<template>
  <input type="text" placeholder="請輸入任務" v-model="taskName" v-on:keyup.enter="addTask">
  <p v-if="tasks.length === 0">還沒有任務,請添加。</p>
  <div>
    <p v-for="(task,index) in tasks" v-bind:class="task.state" v-on:click="completeTask(index)" v-on:dblclick="deleteTask(index)">{{ index+1 }}. {{ task.name }}</p>
  </div>
  <span class="stats">共 {{ tasks.length }} 個</span> <button v-on:click="deleteAll">清理</button>
</template>

<style scoped>
</style>

5. 修改 main.css 頁面樣式;

src/assets/main.css

.stats {
  color: #888;
}
.completed {
  color: #888;
  text-decoration: line-through;
}

What?You can't understand?

問時遲,那時快。這五個步驟突然化身為五枚金幣,不慢不快地,躲進一個金光閃閃的“寶盒”里。大俠!還不快去 take 走?


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文介紹了 JavaScript 中 ArrayBuffer 和 TypedArray 的應用。ArrayBuffer 用於預分配記憶體,存儲二進位數據,但需通過 DataView 或 TypedArray 視圖來讀寫。TypedArray 是定型數組,用於高效處理特定數據類型。DataView 則提... ...
  • title: 使用 nuxi analyze 命令分析 Nuxt 應用的生產包 date: 2024/8/29 updated: 2024/8/29 author: cmdragon excerpt: 使用 nuxi analyze 命令可以幫助你深入瞭解生產包的結構和大小,從而做出針對性的優化。通 ...
  • AntdvPro —— 一個基於 Vue3、Vite4、Ant-Design-Vue4、Pinia、UnoCSS 和 Typescript 的一整套企業級中後臺前端/設計解決方案。 ...
  • title: 使用 nuxi add 快速創建 Nuxt 應用組件 date: 2024/8/28 updated: 2024/8/28 author: cmdragon excerpt: 通過使用 nuxi add 命令,你可以快速創建 Nuxt 應用中的各種實體,如組件、頁面、佈局等。這可以極大 ...
  • 上回書說到,躲開攝像頭的基本功能實現了,但有三個核心問題: (1)速度慢 (2)距離遠易失敗 (3)地圖限制 第一個問題:較為簡單,把幾千個攝像頭按行政區劃分好帶上編號,在路線分段避讓時按片兒計算,綜合測試速度提升了50%。 //找到每段step途徑的 let wayDistrictsCamera ...
  • title: 使用 updateAppConfig 更新 Nuxt 應用配置 date: 2024/8/27 updated: 2024/8/27 author: cmdragon excerpt: 通過使用 updateAppConfig,你可以輕鬆地在應用運行時更新配置,而無需重新啟動應用。這對 ...
  • Vue3.5新增了一個baseWatch,讓watch函數和Vue組件徹底分手,他的實現和Vue組件以及生命周期沒有一毛錢關係。 ...
  • 在TS開發中,經常會遇到後臺數據欄位比較多的情況,這時候需要一個個複製欄位然後給他手動配置數據類型來完成我們的TS類型定義,相當麻煩。有什麼快速的方法呢,我就目前遇到的兩種情況分別寫了JS腳本來處理後臺數據,直接生成我們需要的數據格式。 腳本編寫 1. 處理數據字典中的數據 一般數據字典表裡的數據可 ...
一周排行
    -Advertisement-
    Play Games
  • 前言 推薦一款基於.NET 8、WPF、Prism.DryIoc、MVVM設計模式、Blazor以及MySQL資料庫構建的企業級工作流系統的WPF客戶端框架-AIStudio.Wpf.AClient 6.0。 項目介紹 框架採用了 Prism 框架來實現 MVVM 模式,不僅簡化了 MVVM 的典型 ...
  • 先看一下效果吧: 我們直接通過改造一下原版的TreeView來實現上面這個效果 我們先創建一個普通的TreeView 代碼很簡單: <TreeView> <TreeViewItem Header="人事部"/> <TreeViewItem Header="技術部"> <TreeViewItem He ...
  • 1. 生成式 AI 簡介 https://imp.i384100.net/LXYmq3 2. Python 語言 https://imp.i384100.net/5gmXXo 3. 統計和 R https://youtu.be/ANMuuq502rE?si=hw9GT6JVzMhRvBbF 4. 數 ...
  • 本文為大家介紹下.NET解壓/壓縮zip文件。雖然解壓縮不是啥核心技術,但壓縮性能以及進度處理還是需要關註下,針對使用較多的zip開源組件驗證,給大家提供個技術選型參考 之前在《.NET WebSocket高併發通信阻塞問題 - 唐宋元明清2188 - 博客園 (cnblogs.com)》講過,團隊 ...
  • 之前寫過兩篇關於Roslyn源生成器生成源代碼的用例,今天使用Roslyn的代碼修複器CodeFixProvider實現一個cs文件頭部註釋的功能, 代碼修複器會同時涉及到CodeFixProvider和DiagnosticAnalyzer, 實現FileHeaderAnalyzer 首先我們知道修 ...
  • 在軟體行業,經常會聽到一句話“文不如表,表不如圖”說明瞭圖形在軟體應用中的重要性。同樣在WPF開發中,為了程式美觀或者業務需要,經常會用到各種個樣的圖形。今天以一些簡單的小例子,簡述WPF開發中幾何圖形(Geometry)相關內容,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 在 C# 中使用 RabbitMQ 通過簡訊發送重置後的密碼到用戶的手機號上,你可以按照以下步驟進行 1.安裝 RabbitMQ 客戶端庫 首先,確保你已經安裝了 RabbitMQ 客戶端庫。你可以通過 NuGet 包管理器來安裝: dotnet add package RabbitMQ.Clien ...
  • 1.下載 Protocol Buffers 編譯器(protoc) 前往 Protocol Buffers GitHub Releases 頁面。在 "Assets" 下找到適合您系統的壓縮文件,通常為 protoc-{version}-win32.zip 或 protoc-{version}-wi ...
  • 簡介 在現代微服務架構中,服務發現(Service Discovery)是一項關鍵功能。它允許微服務動態地找到彼此,而無需依賴硬編碼的地址。以前如果你搜 .NET Service Discovery,大概率會搜到一大堆 Eureka,Consul 等的文章。現在微軟為我們帶來了一個官方的包:Micr ...
  • ZY樹洞 前言 ZY樹洞是一個基於.NET Core開發的簡單的評論系統,主要用於大家分享自己心中的感悟、經驗、心得、想法等。 好了,不賣關子了,這個項目其實是上班無聊的時候寫的,為什麼要寫這個項目呢?因為我單純的想吐槽一下工作中的不滿而已。 項目介紹 項目很簡單,主要功能就是提供一個簡單的評論系統 ...