利用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 全角转半角部分
Oct 28 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
JS定时关闭窗口的实例
May 22 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
js实现简单的倒计时
Jan 28 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
对javascript和select部件的结合运用
2006/10/09 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
javascript 树控件 比较好用
2009/06/11 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
js原型链原理看图说明
2012/07/07 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
Python中为什么要用self探讨
2015/04/14 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Python读取指定日期邮件的实例
2019/02/01 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
如何表示python中的相对路径
2020/07/08 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
承兑汇票转让证明怎么写?
2014/11/30 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
德劲DE1102数字调谐收音机机评
2022/04/07 无线电