利用vue写todolist单页应用

网上有很多关于vue的todolist小程序。大多是利用vue-cli脚手架工具开发的,这个官网的文档也不支持新手从单文件开始学习。所以用大家熟悉的开发方式写了这个todolist,希望和大家一起学习。

1、vue是啥?
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。简单说是一个模板引擎,做过后端的应该很清楚,以前靠服务器端渲染的dom,放在浏览器端端渲染,vue拿到数据渲染成dom.当然vue不仅仅是用来干这个的,数据驱动,数据双向绑定,赋予了用户很好的体验,以及快速的开发,应用的项目的益于维护等。。

2、下面开始代码吧,提前引入vue.js,以及bootstrap。由于没采用vue单文件开发。所以只有一个html文件.

3、为了方便你可以使用cdn来引入你需要的文件。demo使用了localstorage来存放数据。所以你必须开启web端口来浏览。未了方便你可以使用webstorm来开发。否则你直接打开静态页是不能存取数据的。当然这些数据你可以换成从数据库来处理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>vue版todolist</title>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <script src="src/vue.js"></script>
</head>
<style>
  .isFinish {
    background-color: #d58512 !important;
  }

  .itemcount {
    display: block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 10px;
    float: left;
    background-color: #d9edf7;
  }
</style>
<body>
<div class="container text-center" id="app">

  <h2>{{title}}</h2>
  <div class="row">
    <div class="col-md-7">
      <form class="form-horizontal" role="form">
        <div class="form-group">
          <label for="toitem">添加任务事项</label>
          <input class="form-control" type="text" id="toitem" v-model="newitem" @keyup.enter="addItem()">
        </div>
        <!--  <div class="form-group text-left">
            <button class="btn btn-primary btn-sm">确认添加</button>
          </div>-->
        <div class="list-group text-left form-group" style="margin-top: 2em;">
          <a href="#" class="list-group-item active text-left">
            任务清单:
          </a>

          <a href="#" v-for="item in items" class="list-group-item" v-on:click="toogleFinsih(item)">
            <span class="itemcount">{{item.id}}</span>
            {{item.lable}}
            <span class="badge" v-bind:class="{isFinish:item.isFinish}">√</span>
          </a>

        </div>
      </form>
    </div>
    <div class="col-md-5">
      <div class="panel panel-default">
        <div class="panel-heading">任务计划:</div>
        <div class="panel-body">
          请在一周内完成这些计划!
        </div>
        <div class="panel-footer text-right">
          <button class="btn btn-info btn-sm" @click="clearItem">清空任务计划</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  //该网站的localStorage的键值,用于存放数据
  var todoList = 'todolist';
  //对localStorage的封装
  var lsp = (function () {
    return ({
      add: function (dataval) {
        //添加数据,键为todolist
        localStorage.setItem(todoList, JSON.stringify(dataval));
      },
      get: function () {
        //读取键为todolist的数据
        return JSON.parse(localStorage.getItem(todoList));
      },
      remove: function () {
        //移除该站点下键为todolist的数据
        localStorage.removeItem(todoList);
      },
      clear: function () {
        //清空该站点下的所有localStorage的数据
        localStorage.clear();
      }
    });
  })();
  var app = new Vue({
    el: '#app',
    data: {
      title: '任务清单demo',
      items: lsp.get() || [],//读取数据。如果没有数据赋值为数组[]
      newitem: '' //要添加的数据
    },
    methods: {
      addItem: function () {
        var that = this;
        this.items.push({
          id: that.items.length + 1,
          lable: that.newitem,
          isFinish: false
        });
        lsp.add(this.items);
        this.newitem = '';
      },
      toogleFinsih: function (item) {
        item.isFinish = !item.isFinish;
      },
      clearItem: function () {

        this.items = [];

      }
    }
  })
</script>
</body>

</html>

github:demo

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

时间: 2016-12-14

vue实现todolist单页面应用

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

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的

详解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

基于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.js实现简单ToDoList 前期准备(一)

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

vue实现ToDoList简单实例

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

vue实现留言板todolist功能

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

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系列之项目结构说明(2)

说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题. 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正.欢迎大家批评指出错误.以下是已完成的文章列表. 1.Vue.js系列之项目搭建(1) 简单介绍目录结构 build目录是一些webpack的文件,配置参数什么的,一般不用动 config是v

vue.js实例对象+组件树的详细介绍

vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件的HTML片段,template将是我们使用的模板 **data:** 数据通过data引入到组件中 在组件中的data要以函数的形式返回数据,当不同的界面用了同一个组件时,才不会以为一个组件的值发生改变而改变其他页面的内容. {{ }} 双括号语法里面放入数据的变量 组件注册语法糖 全局组件 A方

Vue.js系列之项目搭建(1)

说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题. 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正.欢迎大家批评指出错误. 今天要讲讲Vue2.0了.最近将公司App3.0用vue2.0构建了一个web版,因为是第一次使用vue,而且一开始使用的时候2.0出来一个月不到,很多坑都是自己去踩

vue.js项目打包上线的图文教程

最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架只是做了view这一层,所以并不是把这些开发完的东西直接拷贝到服务器上,而且需要打包为静态文件上传服务器的.这里我简单的列出这个过程: 首先需要修改一下配置文件再打包,很多人都是遇到过打包后运行一片空白等等问题,这些问题主要就是路径的问题,所以需要修改config下面的index.js这个配置文件里

Vue.js系列之vue-router(上)(3)

说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题. 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正.欢迎大家批评指出错误.以下是已完成的文章列表. 1.Vue.js系列之项目搭建(1) 2.Vue.js系列之项目结构说明(2) 概述 Vue非常适用于实践单页面应用程序也就是平时大家说的比较

vue.js select下拉框绑定和取值方法

最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 <select id="sendSybol" v-model="searchDto.sendSymbolId"> <option v-for="

使用Vue.js开发微信小程序开源框架mpvue解析

前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案. 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.github项目地址请参见mpvue .使用文档请参见 http://mpvue.com/. 为了帮

基于vue.js路由参数的实例讲解——简单易懂

vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数 接着给映射表中的路由设