利用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 相关文章推荐
javascript数组的扩展实现代码集合
Jun 01 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
vue.js todolist实现代码
Oct 29 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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中ob_start()函数的用法
2013/06/24 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
面试常见的js算法题
2017/03/23 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
python pip如何手动安装二进制包
2020/09/30 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
房产销售经理职责
2013/12/20 职场文书
查摆问题整改措施
2014/10/24 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python