使用Vue完成一个简单的todolist的方法
看了两天的Vue，还是上手写一个简单的todolist更实用（文末有彩蛋）。
一、使用vue-cli脚手架快速搭建一个框架
利用vue-cli来自动生成我们项目的前端目录及文件，方法：
npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev
这样我们的一个基于webpack的vue项目目录就可以快速构建好了。
目录如下：
二、完成一个简单的todolist
接下来就看一下webpack.base.conf文件，这是核心文件，必须执行的文件，这里可以看到entry和output，这就是入口和输出路径，在入口处看到了./src/main.js，这就找到了界面的入口处了。在main.js中可以看到创建了一个vue实例，并加载了模板组件App.vue，所以我们的todo list代码就可以写在App.vue中。
简单的todolist我们可以完成这几个功能：
1、显示todo列表
2、判断列表任务完成状态，若完成则添加相应的样式
3、在输入框中动态添加todo项目，点击回车在列表中显示
4、点击相应的项目转换状态
首先我们完成显示列表的功能：
<template>
<div id="app">
<input/>
<ul>
<li v-for="item in items">
{{item.label}}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{
label: 'read books',
isFinished: false
},
{
label: 'eat dinner',
isFinished: true
}
]
}
}
}
</script>
效果
export后面跟的对象，会作为 new Vue()的参数，来创建一个Vue的组件，并导出。
判断任务的完成状态，完成则添加text-decoration样式
官方文档中我们可以看到：
绑定class样式
如果v-bind中class后是一个对象的话，键代表添加的class的名称，value值代表一个布尔值，用来控制这个class属性的有无。
所以我们就可以这样：
<template>
<div id="app">
<input/>
<ul>
<li v-for="item in items" v-bind:class={finished:item.isFinished}>
{{item.label}}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{
label: 'read books',
isFinished: false
},
{
label: 'eat dinner',
isFinished: true
}
]
}
}
}
</script>
<style>
.finished {
text-decoration: line-through;
}
</style>
效果
在输入框中填写item，点击回车完成添加列表并显示同时清空input框内容
用到的知识：
监听回车
表单控件监听
<template>
<div id="app">
<input v-on:keyup.enter="addNewItem" v-model="newItem"/>
<ul>
<li v-for="item in items" v-bind:class={finished:item.isFinished}>
{{item.label}}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{
label: 'read books',
isFinished: false
},
{
label: 'eat dinner',
isFinished: true
}
],
newItem: ''
}
},
methods: {
addNewItem () {
this.items.push({label: this.newItem,isFinished: false})
this.newItem = '' //清空输入框
}
}
}
</script>
<style>
.finished {
text-decoration: line-through;
}
</style>
点击内容进行状态转换
在li标签上绑定一个click事件，点击时修改isFinished
//添加代码
<li v-for="item in items" v-bind:class={finished:item.isFinished} v-on:click="finish(item)">
{{item.label}}
</li>
methods: {
finish (item) {
item.isFinished = !item.isFinished
}
}
这样一个简单的todolist的基本功能已经完成。
动图效果
小彩蛋：linux下制作GIF动图
上网查找了很多办法，很多不适合linux平台，发现这个办法不错:
下载SimpleScreenRecoder软件：
三条命令：
sudo add-apt-repository ppa:maarten-baert/simplescreenrecorder sudo apt-get update sudo apt-get install simplescreenrecorder
安装好后你可以选择录制区域
参考资料：
Vue官方API文档：https://cn.vuejs.org/v2/api/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中如何通过函数传参数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
Vue3 中一个组件从创建到挂在,会经过3个重点步骤：创建组件实例,设置组件实例,创建并执行带副作用的渲染函数,本文将着重讲清 创建组件实例、设置组件实例 这两个过程都做了什么,这部分逻辑很简单,但你会从中学习到 Vue 优秀的实践技巧,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了如何在Vue中导入Excel文件，文中的示例代码讲解详细，对我们学习或工作有一定帮助，感兴趣的小伙伴可以跟随小编一起了解一下2022-01-01
webpack+vue+express(hot)热启动调试简单配置方法
今天小编就为大家分享一篇webpack+vue + express (hot) 热启动调试简单配置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue3+Element Plus使用svg加载iconfont的处理方法
这篇文章主要介绍了Vue3+Element Plus使用svg加载iconfont的解决方案,本文详细介绍了如何在Element Plus中使用iconfont，简单的说就是要将其封装成SVG，并且支持动态修改颜色，需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了vue3如何利用父子传值实现弹框功能,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
最近公司开发一个项目,采用的前后端分离的方式,前端采用vue,但是再项目开发过程中遇到一个比较麻烦的问题,下面这篇文章主要给大家介绍了关于vue ui的安装步骤以及使用的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue $event作为参数传递使用demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了vue中的路由传值与重调本路由改变参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文详细介绍了speak-tss插件在Vue3中的使用方法和配置,首先需要下载依赖,然后引入插件,并进行实例化和配置,配置项包括音量、语言、语音、语速、音调等,speak-tss支持多种语言和语音,适用于需要文本语音播报的场景2024-09-09
最新评论