此“华仔”,不是彼“华仔”,你懂的!
先来了个截图
紧跟着,实现步骤也来了
1. 安装 Node.js
,终端运行 npm create vue@latest
,项目名 vue-to-do
,后面的选项全选 No
;
2. cd vue-to-do
进入项目目录,npm install
安装依赖,npm run dev
启动 Vite
开发服务器;
3. 修改 index.html
和 main.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 走?
1.本站内容仅供参考,不作为任何法律依据。用户在使用本站内容时,应自行判断其真实性、准确性和完整性,并承担相应风险。
2.本站部分内容来源于互联网,仅用于交流学习研究知识,若侵犯了您的合法权益,请及时邮件或站内私信与本站联系,我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
5.本站是非经营性个人站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途
暂无评论内容