利用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文件缓存的代码
Apr 09 Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
vue el-table实现行内编辑功能
Dec 11 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开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
python学习笔记:字典的使用示例详解
2014/06/13 Python
跟老齐学Python之集合(set)
2014/09/24 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
python定义具名元组实例操作
2021/02/28 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
银行类自荐信
2014/02/04 职场文书
预备党员政审材料
2014/02/04 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
电影红河谷观后感
2015/06/11 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
Python实现生活常识解答机器人
2021/06/28 Python