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

这篇文章主要为大家详细介绍了使用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项目目录就可以快速构建好了。

目录如下：

【q1010.com温馨提示：图片暂缺】

 

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

【q1010.com温馨提示：图片暂缺】

效果

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

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

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

【q1010.com温馨提示：图片暂缺】

绑定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>

效果

【q1010.com温馨提示：图片暂缺】

在输入框中填写item，点击回车完成添加列表并显示同时清空input框内容

用到的知识：

【q1010.com温馨提示：图片暂缺】

监听回车

【q1010.com温馨提示：图片暂缺】

表单控件监听

代码如下：

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

【q1010.com温馨提示：图片暂缺】

动图效果

 

小彩蛋：linux下制作GIF动图

 

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

下载SimpleScreenRecoder软件：

三条命令：

代码如下：

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

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

【q1010.com温馨提示：图片暂缺】

参考资料：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/4208-0.html

注：关于使用Vue完成一个简单的todolist的方法的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js