青岛三吉互联网站建设公司,学生简单网站制作教程,编程软件python下载,wordpress创建文档系统目录 一.准备工作
二.编写各个组件的页面结构
三.实现初始任务列表的渲染
四.新增任务
五.删除任务
六.展示未完成条数
七.切换状态-筛选数据
八.待办事项#xff08;全#xff09;代码 一.准备工作
在开发“ToDoList”案例之前#xff0c;需要先完成一些准备工作全代码 一.准备工作
在开发“ToDoList”案例之前需要先完成一些准备工作包括创建项目、引入 BootStrap 样式文件和搭建基本项目结构下面分别进行实现。
1创建项目 创建项目包含新建项目、安装依赖项和运行项目具体步骤如下。
① 创建项目。使用HbuliderX软件创建todolist项目 在src的目录下创建style.css 文件中的样式具体代码如下。
style.css样式如下
:root {font-size: 16px;}body {margin: 0;}
② 新建并封装组件。在D:\vue\chapter03\todolist\src\components 目录下新建文件 ToDoHeader.vue、ToDoMain.vue 和 ToDoFooter.vue分别表示 ToDoHeader、ToDoMain 和ToDoFooter 组件。 ③ 各个组件中的style节点的样式代码。
二.编写各个组件的页面结构 准备工作完成之后接下来编写各个组件的页面结构实现“ToDoList”案例静态页 面的渲染具体步骤如下。
①在App组件中以局部注册的方式引入ToDoHeader、ToDoMain、ToDoFooter组 件 ②在ToDoHeader组件中编写输入区域的页面结构 ③ 在ToDoMain组件中编写列表区域的页面结构 ④ 在ToDoFooter组件中编写切换状态区域的页面结构 三.实现初始任务列表的渲染
App 组件为根组件数据在App组件中现在需要将App根组件中的初始数据传递 到列表区域ToDoMain组件中。即通过props自定义属性从父组件App组件向 子组件ToDoMain组件中传递数据。实现初始任务列表具体步骤如下。
① 在ToDoMain组件中定义可以从父组件中接收的数据 ② 在App组件中定义页面的初始数据 ③ 通过自定义属性进行传递数据 ④ 修改ToDoMain组件中的代码将接收到的list数据进行展示。 四.新增任务
“ToDoList”案例中在文本框中输入内容按下回车后添加任务到任务列表将用户 输入的任务名称通过自定义事件从ToDoHeader组件传递到App组件具体步骤如下代码省略。、
① 修改ToDoHeader组件中的代码添加页面的初始数据 ② 获取input输入框的值修改ToDoHeader组件中的代码 ③ 修改ToDoHeader组件中的代码为input输入框绑定回车事件事件处理函数 名称为enterName ④ 修改ToDoHeader组件中的代码通过调用defineEmits()方法来声明自定义事 件 ⑤ 在ToDoHeader组件中添加enterName()方法通过调用emit()方法触发自定义事 件 ⑥ 在App组件中监听addTodo自定义事件当enterName事件触发时调用 addToDo()方法 ⑦ 添加addToDo方法实现数据的处理 五.删除任务
当鼠标指针滑到任务列表中每一项时在右侧会出现“×”图标单击该图标即可 进行删除当条任务操作。首先在ToDoMain组件中声明并触发自定义事件传递参数 6 id接着在App组件中监听自定义事件当自定义事件被触发时执行对应的方法进 行删除操作删除任务的具体实现步骤如下。
① 在ToDoMain组件中声明自定义事件delTodo用于表示删除任务 ② 在ToDoMain组件中定义delToDo()方法触发自定义事件 ③ 修改删除按钮的代码添加点击事件传入需要删除的id ④ 在App组件中监听 ⑤ 在App组件中添加delToDo方法进行列表中对应任务的删除操作 六.展示未完成条数
在任务状态区域的左侧会显示未完成任务的条数接下来计算未完成任务的条数并 将其在页面中渲染出来具体步骤如下代码省略。
① 在App组件中定义计算属性计算未完成的任务条数 ② 将自定义属性传给ToDoFooter组件 ③ 在ToDoFooter组件中接收lastLength ④ 在ToDoFooter组件中将条数展示出来 七.切换状态-筛选数据
单击切换状态区域时默认状态为all即显示全部任务当状态切换为active时 显示未完成的任务当状态切换为completed时显示已完成的任务实现切换数据筛选 状态具体步骤如下代码省略。
① 首先在App组件中定义页面的使用一个任务状态状态属性status ② 在App组件中通过不同的status展示不同的任务实现任务数据的切换 ③ 修改App组件将showList传递给ToDoMain组件 ④ 设置自定义事件名称 ⑤ 在ToDoFooter组件中定义props属性表示从父组件中接收该数据 ⑥ 在App组件中定义props即从App组件中传递status到ToDoFooter组件中 ⑦ 在ToDoFooter组件中单击链接按钮时更改状态 ⑧ 在App组件中监听updateStatus自定义事件通过自定义事件将status属性的值 从ToDoFooter组件传递到App组件中具体代码如下 ⑨ 定义updateStatus()方法用来更新状态具体代码如下。 八.待办事项全代码 ToDoFooter.vue代码
templatediv classfooterspan classtodo-count共strong{{ lastLength }}/strong条未完成任务/spanul classfilterslia click.preventemit(updateStatus, completed) :class{ selected: status completed }href#/completed stylebackground-color: lightblue;Completed/a/lilia click.preventemit(updateStatus, active) :class{ selected: status active }href#/active stylebackground-color: lightblue;Active/a/lilia click.preventemit(updateStatus, all) :class{ selected: status all } href#/ stylebackground-color: lightblue;All/a/li/ul/div
/templatescript setupconst props defineProps([lastLength,status])/scriptstyle.filters{display:flex;flex-direction:row-reverse;/* 相反方向 */}ul{list-style: none;}ul li{padding-left:10px ;}a{text-decoration: none;border: 1px solid black;color: black;}
/style
ToDoHeader.vue代码
templatedivdiv classheaderp classtitle待办事项/pinput classnew-todo typetext placeholder请填写任务 v-model.trimname keyup.enterenterName //div/div/templatescript setupimport { ref } from vueconst name ref()const enterName () {emit(addTodo, name.value)name.value }const emit defineEmits([addTodo])/scriptstyle.title{border-bottom:1px solid grey;text-align:center;font-size:36px;color:brown;}.header{border:1px solid grey;}.new-todo{position: relative;top:-20px;left: 50px;border: none;font-size: 20px;}/styleToDoMain.vue代码
templatediv classmainul classtodo-listli v-foritem in list :keyitem.id :class{ completed: item.done }div classviewinput classtoggle typeradio v-modelitem.done /label classzi{{ item.name }}/labelbutton classdestroy clickdelTodo(item.id)/button/div/li/ul/div/templatescript setupconst props defineProps({list: {type: Array,required: true},})const emit defineEmits([delTodo])const delTodo id {id emit(delToDo, id) // 触发事件}
/scriptstyle
.toggle{width: 30px;height: 30px;}
.view{margin-left: -40px;
}
.zi{font-size: 18px;padding-left: 20px;}
.destroy{border: none;margin-left: 10px;
}
/style
App.vue代码 script setup
// This starter template is using Vue 3 script setup SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import ToDoHeader from ./components/ToDoHeader.vue
import ToDoMain from ./components/ToDoMain.vue
import ToDoFooter from ./components/ToDoFooter.vue
import { ref, computed, defineEmits } from vueconst emits defineEmits([updateStatus]) // 添加 defineEmits 声明const status ref(all)
const list ref([{ id: 1, name: 晨练, done: false },{ id: 2, name: 练书法, done: true },{id:3,name:完成Vue.js组件部分习题,done:false},
])const addTodo (name) {list.value.push({ name, done: false, id: ~~(Math.random() * 1000) })
}const delToDo id {list.value list.value.filter((item) item.id ! id)
}const lastLength computed(() {return list.value.filter((item) !item.done).length
})const showList computed(() {if (status.value all) {return list.value}if (status.value active) {return list.value.filter((item) !item.done)}if (status.value completed) {return list.value.filter((item) item.done)}
})const updateStatus (newStatus) {status.value newStatus;
}
/scripttemplateToDoHeader addTodoaddTodo/ToDoHeader!-- ToDoMain :listshowList delToDodelToDo/ToDoMain --ToDoMain :listlist delToDodelToDo/ToDoMainToDoFooter :lastLengthlastLength :statusstatus updateStatusupdateStatus/ToDoFooter
/templatestyle/stylemain.js代码
import { createApp } from vue
import App from ./App.vue
createApp(App).mount(#app)最终效果图如下 功能展示:
今天就分享到此感谢预览~
