利用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面向对象、prototype、call()、apply()
May 14 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
js中事件对象和事件委托的介绍
Jan 21 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
小程序实现点击tab切换左右滑动
Nov 16 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
删除无限级目录与文件代码共享
2006/07/12 PHP
消息持续发送的完整例子
2006/10/09 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
JS的千分位算法实现思路
2013/07/31 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
javascript常用方法总结
2015/05/14 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
python改变日志(logging)存放位置的示例
2014/03/27 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python生成九宫格图片
2018/11/19 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
人事主管岗位职责
2014/01/30 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
工程部岗位职责
2015/02/10 职场文书
保送生自荐信
2015/03/06 职场文书
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技