Location>code7788 >text

Vite+Vue3 Project Wah's To-Do List

Popularity：287 ℃/2024-08-26 13:48:07

This "Wah" is not "Wah", you know!

First a screenshot

Followed closely by the realization steps

1. InstallationTerminal Runnpm create vue@latestProject Namevue-to-doSelect all of the options that followNo；

2. cd vue-to-do Go to the project directory.npm install installing dependencies.npm run dev activate (a plan)Vite Development server;

3. Modifications cap (a poem)；

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wah's to-do list</title>
  </head>
  <body>
    <!-- root component container -->
    <div ></div>
    <script type="module" src="/src/"></script>
  </body>
</html>

src/

import './assets/'

import { createApp } from 'vue'
import App from './'
// Creating Applications rootlet
createApp(App).mount('#app')

4. Modifications root component, add the Two subcomponents;

src/

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

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

<style scoped>
</style>

src/components/

<script setup>
</script>

/script> <template>
  <h1> Wah's To Do</h1>
/template> </template>.

<style scoped>.
</style> </template> <style scoped>.

src/components/

<script setup>
import { ref } from 'vue';
let tasks = ref([]) // ref boyfriend Task List { name: 'mission name', state: 'state of affairs' } active completed
let taskName = ref("") // ref boyfriend .value
// Add Tasks
function addTask() {
  if (() === "") {
    return
  }
  ({
    name: ,
    state: 'active'
  })
   = ""
}
// finalize one's mission
function completeTask(index) {
  [index].state = 'completed'
}
// Deletion of tasks
function deleteTask(index) {
  (index, 1)
}
// Delete all
function deleteAll() {
  (0, )
}
</script>

<template>
  <input type="text" placeholder="Please enter a task" v-model="taskName" v-on:="addTask">
  <p v-if=" === 0">There's no mission yet.，Please add。</p>
  <div>
    <p v-for="(task,index) in tasks" v-bind:class="" v-on:click="completeTask(index)" v-on:dblclick="deleteTask(index)">{{ index+1 }}. {{ }}</p>
  </div>
  <span class="stats">common {{ }} classifier for individual things or people, general, catch-all classifier</span> <button v-on:click="deleteAll">clear up</button>
</template>

<style scoped>
</style>

5. Modifications Page Style;

src/assets/

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

What？You can't understand？

It was too late to ask, but too soon. These five steps suddenly transformed into five gold coins, not slow and fast, and ducked into a golden "treasure box"Ri. Warrior! Why don't you go take away?

<Previous Next>