Vue初級知識最佳實戰 ~~~ ToDoList功能實現

html 相關內容，如下所示：

<div id="app">
      <div class="header">
        <div class="content">
          <div class="logo">ToDOList</div>
          <div class="input">
            <input placeholder="添加ToDo" type="text" v-model="addContent" @keyup.enter="add"/>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="doing"  v-cloak>
          <div class="head">正在進行
            <span class="count">{{doing.length}}</span>
          </div>
          <ul>
            <li v-for="(i, j) in doing">
              <input @click="taskOver(j)" class="check" type="checkbox" />
              <span @keyup="edit(j)" contenteditable="true"> {{i}} </span>
              <div @click="del(j, 0)" class="del">
                <div>-</div>
              </div>
            </li>
          </ul>
        </div>
        <div class="over"  v-cloak>
          <div class="head">已經完成 
            <span class="count">{{over.length}}</span>
          </div>
          <ul>
            <li v-for="(i, j) in over" class="disabled">
              <input @click="taskOut(j)"  checked class="check" type="checkbox"/>
              <span> {{i}} </span>
              <div @click="del(j, 1)" class="del">
                <div>-</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

CSS相關內容，如下所示：

* {
    padding: 0;
    margin: 0;
  }

  ul {
    list-style-type: none;
  }

  body {
    background: #cdcdcd;
  }

  [v-cloak] {
    display: none;
  }

  .header {
    height: 50px;
    background: rgba(47, 47, 47, 0.98);
  }

  .header .content {
    width: 600px;
    height: 50px;
    margin: 0 auto;
    line-height: 50px;
    color: snow;
    display: flex;
  }

  .logo {
    font-size: 24px;
    font-weight: bold;
    width: 200px;
  }

  .input input {
    border-radius: 5px;
    height: 24px;
    width: 300px;
    padding-left: 10px;
  }

  .main {
    width: 600px;
    margin: 0 auto;
  }

  .main .head {
    font-size: 24px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 20px;
  }

  .main .head + ul li {
    height: 30px;
    background: white;
    margin-top: 10px;
    border-radius: 3px;
    border-left: 5px solid #629a9c;
    padding-left: 5px;
    line-height: 30px;
    position: relative;
  }

  .main .head + ul li.disabled {
    border-left: 5px solid #999;
    background: #e6e6e9;
  }

  .main .doing .head .count{
    float: right;
    padding: 0 5px;
    height: 20px;
    margin-right: 7px;
    border-radius: 20px;
    background: #e6e6fa;
    line-height: 22px;
    text-align: center;
    color: #666;
    font-size: 14px;      
  }

  .main .over .head .count{
    float: right;
    padding: 0 5px;
    height: 20px;
    margin-right: 7px;
    border-radius: 20px;
    background: #e6e6fa;
    line-height: 22px;
    text-align: center;
    color: #666;
    font-size: 14px;      
  }

  .check {
    height: 20px;
    width: 20px;
    vertical-align: middle;
  }

  .del {
    border: 1px solid #ddd;
    width: 16px;
    height: 16px;
    padding: 2px;
    border-radius: 50%;
    position: absolute;
    right: 5px;
    bottom: 4px;
    cursor: pointer;
  }

  .del div {
    width: 14px;
    height: 14px;
    background: #ddd;
    border-radius: 50%;
    margin-left: 1px;
    margin-top: 1px;
    text-align: center;
    line-height: 12px;
    color: white;
  }

Vuejs相關內容，如下所示：

這裏利用axios從服務端獲取數據，利用Local Storage本地存儲。

<script src="./vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          addContent: "",
          doing: [],
          over: [],
        },
        mounted() {
          axios.get("/taskList").then(res => {
            if (res.status == 200) {
              this.doing = res.data.doing;
            }
          });
        },
        methods: {
          add: function() {
            if (!this.doing.includes(this.addContent)) {
              axios
                .get("/add", {
                  params: { name: this.addContent }
                })
                .then(res => {
                  console.log(res);
                  if (!res.data.code) {
                    alert(res.data.msg);
                    this.doing.unshift(this.addContent);
                  }
                });
            } else {
              alert("該任務已經在任務列表");
            }
          },
          taskOver: function(index) {
            event.target.checked = false;
            this.over.unshift(this.doing[index]);
            this.doing.splice(index, 1);
          },
          taskOut: function(index){
            event.target.checked = false;
            this.doing.unshift(this.over[index]);
            this.over.splice(index, 1);
          },
          edit: function(index) {
            this.$set(this.doing, index, event.target.innerText);
          },
          del: function(index, flag) {
            if (flag == 1) {
              this.over.splice(index, 1);
            } else {
              this.doing.splice(index, 1);
            }
          }
        }
      });
    </script>