利用vue写todolist单页应用


Posted in Javascript onDecember 15, 2016

网上有很多关于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

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

Javascript 相关文章推荐
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 #Javascript
jQuery中的100个技巧汇总
Dec 15 #Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 #Javascript
详解jQuery中的事件
Dec 14 #Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 #Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 #Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 #Javascript
You might like
PHP的password_hash()使用实例
2014/03/17 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
回顾Javascript React基础
2019/06/15 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
优秀护士先进事迹
2014/05/08 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
优秀团队申报材料
2014/12/26 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
城南旧事观后感
2015/06/11 职场文书
我的生日感言
2015/08/03 职场文书
致运动员的广播稿
2015/08/19 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang