利用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 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
js select实现省市区联动选择
Apr 17 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
JavaScript之引用类型介绍
2012/08/10 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
模具设计与制造专业应届生求职信
2013/10/18 职场文书
外语学院毕业生的自我鉴定
2013/11/28 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
机关办公室岗位职责
2014/04/16 职场文书
无罪辩护词范文
2015/05/21 职场文书