使用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/

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

(0)

相关推荐

  • vue.js实例todoList项目

    新建组件todoList.vue,在App.vue中引入 import TodoList from "./components/todoList"; export default { name: 'app', components: { TodoList } } <template> <div id="app"> <h1>TO DO LIST !</h1> <todo-list></todo-list

  • vue.js todolist实现代码

    案例知识点: 1.vue.js基础知识 2.HTML5 本地存储localstorage store.js代码 const STORAGE_KEY = 'todos-vue.js' export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.strin

  • vue实现todolist单页面应用

    刚学习vue的小伙伴不知道从哪入手,很多网上的教程一来就搭建脚手架环境,可以新手更本看不懂,建议还是用引入script的方式引入vue.js,然后看官网的教程,再拿那这个demo练练手,也可以看看官网的demo,然后再去熟悉安装,搭建单页面应用. 效果: 功能: 在input输入文字点击按钮或者enter,下面会添加一个带复选框和文字还有删除按钮的li 用到的vue函数: data,methods,watch,还有localstorage 页面非常简单: 先写外面的盒子,这里用到v-model双

  • 利用vue写todolist单页应用

    网上有很多关于vue的todolist小程序.大多是利用vue-cli脚手架工具开发的,这个官网的文档也不支持新手从单文件开始学习.所以用大家熟悉的开发方式写了这个todolist,希望和大家一起学习. 1.vue是啥? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.简单说是一个模板引擎,做过后端的应该很清楚,以前靠服务器端渲染的dom,放在浏览器端端渲染,vue拿到数据渲染成dom.当然vue不仅仅是用来干这个的,数据驱动,数据双向绑定,赋予了用户很

  • 详解Vue的computed(计算属性)使用实例之TodoList

    最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组件的方法,不同的是vue采用的与html绑定事件. 给个例子 /*html*/ <input type="button" value="点击" v-on:click='handlClick' id="app"> /*js*/ var ap

  • vue实现ToDoList简单实例

    一.需求与准备 1.准备 使用bootstrap实现页面的基础样式(依赖jquery),使用vue实现功能需要 2.功能需求 1).表单实现输入任务清单后加入到展示项中 2).点击删除按钮弹出警告框询问是否删除(bootstarp模态框插件) 3).确定删除时,删除对应项(单项删除,全部删除) 4).任务列表为空时,显示"数据为空" v-show 二.实例 1.静态页面 demo使用bootstrap来快速搭建页面 1).表单组件: .form, form-group, form-co

  • Vue.js实现简单ToDoList 前期准备(一)

    一.前言 最近开始学习轻量级的mvvm框架Vue.js.就中文文档来说,算是很齐全了.之前本来在学习1.0版本,某日突然打开官网发现已更新为2.0.便把之后的都改为了2.0的语法.ps:如果恰好你是Vue的初学者的话,慕课网上有一个视频倒是可以去学习参考(我就是参考那个写了个ToDoList的小玩具,在这记录一下学习过程). 二.开篇 mvvm框架是前端现在比较热门的话题,去拉勾网上转一圈,基本70%都有要求.所以不说虚的,只是为了多挣点钱,咱们也该跟上时代的步伐不是.推荐一篇博文'http:/

  • vue2的todolist入门小项目的详细解析

    看完vue2的官方文档后,找个入门项目巩固下知识点,简单的todolsit是个不错的选择. 项目用到了vue.js vue.cli webpack ES6 node环境,完成项目后会对这些技术栈有了些了解. 准备开发环境 $ npm install -g vue-cli $ vue init ,比如 vue init webpack todolist $ cd todolist $ npm install $ npm run dev 安装谷歌插件vue.js devtools 下载vue.js的

  • 基于vuejs实现一个todolist项目

    用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化: 完整代码: App.vue <template> <div id="app"> <h1 v-html = "title"></h1> <input v-model="newItem" v-on:keyup.enter="add

  • vue实现留言板todolist功能

    通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet&quo

随机推荐