未加星标

使用Vue完成一个简单的todolist的方法

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

看了两天的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项目目录就可以快速构建好了。

目录如下:

使用Vue完成一个简单的todolist的方法

二、完成一个简单的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>

使用Vue完成一个简单的todolist的方法
效果

export后面跟的对象,会作为 new Vue()的参数,来创建一个Vue的组件,并导出。

判断任务的完成状态,完成则添加text-decoration样式

官方文档中我们可以看到:

使用Vue完成一个简单的todolist的方法

绑定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>
效果
使用Vue完成一个简单的todolist的方法
在输入框中填写item,点击回车完成添加列表并显示同时清空input框内容

用到的知识:

使用Vue完成一个简单的todolist的方法

监听回车

使用Vue完成一个简单的todolist的方法
表单控件监听

<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的基本功能已经完成。

使用Vue完成一个简单的todolist的方法
动图效果

小彩蛋:linux下制作GIF动图

上网查找了很多办法,很多不适合linux平台,发现这个办法不错:

下载SimpleScreenRecoder软件:
三条命令:

sudo add-apt-repository ppa:maarten-baert/simplescreenrecorder
sudo apt-get update
sudo apt-get install simplescreenrecorder

安装好后你可以选择录制区域

使用Vue完成一个简单的todolist的方法

参考资料:

Vue官方API文档:https://cn.vuejs.org/v2/api/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: lt,gt,isFinished,label,li,items,class,vue,script,template,div,ul,finished,todolist
分页:12
转载请注明
本文标题:使用Vue完成一个简单的todolist的方法
本站链接:https://www.codesec.net/view/569829.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(95)