【转】vue入门2-便签demo

作者：datura_lj
链接：https://www.jianshu.com/p/2e77524a088b
來源：简书
功能描述：
可在input输入框输入文字内容，按回车按键进行发布；
可点击单选按钮，来指定“朕已阅”的便签；
可删除指定“不顺眼”的便签.
效果图
页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <style >
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        img {
            border: none;
            display: block;
        }

        .clearFix:after {
            content: '';
            display: block;
            clear: both;
            height: 0;
            width: 0;
        }

        .clearFix {
            zoom: 1;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .wrap {
            width: 980px;
            margin: 0 auto;
        }
        /**************************/
        .page-top {
            background-color: #e8593c;
            height: 40px;
            border-top: 1px solid #b56553;
            border-bottom: 1px solid #b56553;
        }

            .page-top .page-content h2 {
                width: 100%;
                line-height: 40px;
                color: #fff;
                text-align: center;
                font-size: 22px;
            }
        /***********************/
        .main {
            margin-top: 10px;
        }

            .main .big-title {
                font-size: 18px;
            }

            .main .task-input {
                margin-top: 15px;
                width: calc(100% - 20px);
                height: 30px;
                padding-left: 20px;
                font-size: 12px;
            }

        .task-count {
            margin-top: 10px;
        }

            .task-count .action a {
                padding: 5px 20px;
            }

                .task-count .action a.active {
                    border: 1px solid #ff8000;
                }

        .tasks {
            margin-top: 10px;
        }

            .tasks .no-task-tip {
                display: block;
                color: #ccc;
                margin-left: 25px;
                font-size: 12px;
                margin-bottom: 10px;
            }

        .todo-list .todo {
            height: 40px;
            border: 1px solid #999;
            margin-bottom: 5px;
            position: relative;
        }

        .tasks .todo-list .editing .edit {
            display: block;
        }

        .todo-list .completed .view label a {
            color: #ccc;
            font-size: 22px;
            text-decoration: line-through;
        }

        .todo-list .todo .edit {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: calc(100% - 50px);
            height: 40px;
            border: none;
            padding-left: 50px;
            font-size: 24px;
        }

        .todo .view input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin-left: 20px;
            margin-top: 13px;
            margin-right: 10px;
        }

        .todo .view label a {
            font-size: 24px;
            line-height: 40px;
            color: #000;
        }

        .todo .view .destroy {
            height: 40px;
            width: auto;
            line-height: 40px;
            margin-right: 20px;
            font-size: 14px;
            color: #f00;
            border: none;
            background-color: #fff;
            cursor: pointer;
        }
    </style>
      <script src="js/vue.js"></script>
</head>
<body>

<div class="page-top">
    <div class="page-content wrap">
        <h2>计划任务表</h2>
    </div>
</div>
<div class="main wrap">
    <h3 class="big-title">添加任务：</h3>
    <input @keyup.enter="addTodo"
            v-model="todo"
            type="text"
            placeholder="例如：吃饭睡觉打豆豆：   提示：+回车即可添加任务"
            class="task-input" />  <!-- addTodo(123,$event)行间传参的时候，vue里面还要用事件对象的话就用$event-->
    <ul class="task-count clearFix">
        <li class="fl" style="color: #ff8000;margin-left: 20px;">
            <!--{{
                list.filter(function(item){
                    return !item.isChecked
                }).length
            }}-->
            {{ noCheckLength }}
            个未完成任务
        </li>
        <li class="action fr">
            <a href="#all" class="fl" class="{active:false}">所有任务</a>
            <a href="#unfinished" class="fl">未完成任务</a>
            <a href="#finished" class="fl">已完成任务</a>
        </li>
    </ul>
    <h3 class="big-title">任务列表：</h3>
    <div class="tasks">
        <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
        <!--<span class="no-task-tip tip-toggle">
            <input type="checkbox" checked="" class="toggle" />
            <span>全部标记为已完成</span>
        </span>-->
        <ul class="todo-list" v-show="list.length">
            <li class="todo" class="{completed: item.isChecked,editing: item === editorTodos}" v-for="item in filterList">
                <div class="view">
                    <input class="fl" type="checkbox" v-model="item.isChecked" class="toggle"><!-- 将单选按钮的数据进行双向绑定，选中与不选中传值 -->
                    <!--<label class="fl" for=""><a href="javascript:;" v-text="item.title"></a></label>-->
                    <label class="fl" for=""><a href="javascript:;" @dblclick="edtorTodo(item)">{{ item.title }}</a></label>
                    <a href="javascript:;" class="destroy fr" @click="delTodo(item)">删除</a>
                </div>
                <input @blur="edtorTodoed(item)" @keyup.13="edtorTodoed(item)" @keyup.esc="cancelTodo(item)" v-focus="editorTodos === item" type="text" class="edit" v-model="item.title" />
            </li>
        </ul>
    </div>
</div>
   
    <script>
     
  document.addEventListener('DOMContentLoaded',function () {
  //存取localStorage中的数据
  var store = {
  save(key,value) {
  localStorage.setItem(key,JSON.stringify(value));
  },
  fetch(key){//获取
  return JSON.parse(localStorage.getItem(key)) || [];
  }
  }
  /*var list = [
  {
  title: "吃饭睡觉",
  isChecked: false //状态为false，为不选中，任务未完成
  },
  {
  title: "web前端开发",
  isChecked: true //状态为true，为选中，任务已完成
  }
  ];*/
  var fiter = {
  all:function (list) {
  return list;
  },
  finished:function (list) {
  return list.filter(function (item) {
  return item.isChecked
  });
  },
  unfinished:function (list) {
  return list.filter(function (item) {
  return !item.isChecked
  });
  }
  }
  //取出所有的值
  var list = store.fetch("datura_msg");
  var vm = new Vue({
  //这里面是选项对象，里面有很多值
  el: ".main",//挂在点，挂在到main上
  data: {
  list: list, //留言的内容数组，注意这里数组内每一条数据都是一个json
  todo: '',
  listMsg: {},
  editorTodos: '',//记录正在编辑的数据
  beforeTitle: '',//记录正在编辑的数据的title
  visibility: 'all'//通过这个属性值的变化对数据进行筛选
  },
  watch: {
  /* list: function () {//监听list这个属性，当这个属性对应的值发生变化就会执行函数
  store.save("datura_msg",this.list);
  }*/
  list: {
  handler:function () {
  store.save("datura_msg",this.list);
  },
  deep:true
  }
  },
  computed: {
  noCheckLength:function () {
  return this.list.filter(function(item){
  return !item.isChecked
  }).length
  },
  filterList:function () {
  //过滤的时候有三种情况 all finished unfinished

  //return fiter[this.visibility](list);//函数调用
  //找到了过滤函数，就返回过滤后的数据，如果没有就返回所有数据
  return fiter[this.visibility]?fiter[this.visibility](list):list;
  }
  },
  methods: {
  addTodo(data,ev){  //添加任务  第二个参数接收一下事件对象
  //向list中添加一项任务
  //事件处理函数中的this，指向的的那个根实例
  /*if(ev.keyCode == 13){
  this.list.push({
  title:ev.target.value   //这里是操作dom了，影响性能
  });
  }*/
  /* this.list.push({   //向list中添加一项任务
  title:this.todo,
  isChecked:false
  });*/
  this.listMsg = {
  title:this.todo,
  isChecked:false
  }  
  this.list.push(this.listMsg);
  this.todo = ''
  },
  delTodo(todo) {//删除任务
  //在数组中查找点击当前数据在list数组中的位置，找到其索引值
  var index = this.list.indexOf(todo);
  if(confirm("确定删除？")){
  this.list.splice(index,1);
  }
  },
  edtorTodo(todo) {//编辑任务
  //编辑任务的时候。记录一下编辑这条任务的title，方便在取消编辑的时候重新给之前的title
  this.beforeTitle = todo.title;
  this.editorTodos = todo;
  },
  edtorTodoed(todo) {//任务编辑成功
  this.editorTodos = '';
  },
  cancelTodo(todo) {//取消编辑
  todo.title = this.beforeTitle;
  this.beforeTitle = '';
  //让div显示出来,input隐藏
  this.editorTodos = '';
  }
  },
  directives: {
  "focus": {
  update(el,binding) {
  // console.log(el);//指绑定的元素，可以用来直接操作DOM =>  <input type="text" class="edit" />
  //console.log(binding);
  if(binding.value == true){
  el.focus();//当前编辑元素获取焦点
  }
  }
  }
  }
  });
  function watchHashChange() {
  //var hash = window.location.hash;
  var hash = window.location.hash.slice(1);
  vm.visibility = hash;
  //console.log(hash);
  }
  watchHashChange();
  window.addEventListener('hashchange',watchHashChange,false);
  },false);
    </script>
</body>
</html>
posted @ 2018-09-28 09:40 花影疏帘阅读(200) 评论(0) 收藏举报
刷新页面返回顶部
花影疏帘

越努力越幸运

【转】vue入门2-便签demo

公告
