案例：记事本

样例展示:

HTML:

• 搭建DOM框架，设置挂载id
• 本案例所用语法为：
  • v-model 对输入框双向数据绑定 —— 获取输入框信息
  • v-on:click(@click) 点击事件监听 —— 执行完成，清空列表功能
  • v-on:dblclick(@dblclick) 双击点击事件监听 —— 执行删除列表功能
  • v-on:keyup.enter(@keyup.enter) 回车按键监听 —— 创建新的任务
  • v-show 元素display —— 提示文字和列表的展示
  • v-for 根据数据的个数生成列表结构 —— 将模板元素创建等同数据个数的列表元素
  • v-bind:class(:class) 设置元素属性 —— 根据用户点击行为修改列表元素的class获得对应样式
  • v-text 修改元素文本内容 —— 展示剩余任务

<!-- S 主体 -->
<section id="note" class="mainZone">
    <!-- S 头部 -->
    <header class="headZone">
        <div>薯仔记事</div>
        <input class="textInput" type="text" placeholder="别偷懒，请输入任务吧" v-model="message" @keyup.enter="addList">
    </header>
    <!-- E 头部 -->
    <!-- S 列表区域 -->
    <section class="listZone">
        <div class="tips" v-show="listMsg.length===0">还没有任务请添加一个吧</div>
        <div v-for="(item,index) in listMsg" @dblclick="delectMsg(index)" @click="finishMsg(index)" :class="item.class" v-show="listMsg.length>0">{{index + 1}} . {{item.text}}</div>
    </section>
    <!-- E 列表区域 -->
    <!-- S 底部功能按键 -->
    <footer class="bottleZone">
        <span class="countzone" v-text="count+' items left'"></span>
        <span class="clearbtn" @click="clearMsg">CLEAR</span>
    </footer>
    <!-- E 底部功能按键 -->
</section>
<!-- E 主体 -->

JS:

• 引入vue2框架
• 创建VUE实例，data.el挂载区域note
• 添加文本及列表缓存属性
• 创建添加列表元素，删除列表元素，完成列表，清空列表方法

<!-- VUE2开发环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let app = new Vue({
      el: '#note',
      data: {
        message: "",
        listMsg: [],
        count: 0
      },
      methods: {
          addList() {
            if(this.message !== "") {
                this.listMsg.push({text: this.message, class: 'todo'});
                this.count += 1
            }
          },
          delectMsg(index) {
            this.listMsg.splice(index, 1);
            this.count -= 1
          },
          finishMsg(index) {
            this.listMsg[index].class = 'todo finish'
          },
          clearMsg() {
            this.listMsg = [];
            this.count = 0
          }
      }
    })
</script>

CSS:

<style>
    * {
        margin: 0;
        padding: 0;
    }
    ul li {
        list-style: none;
    }
    .mainZone {
        position: relative;
        width: 580px;
        min-height: 500px;
        margin: 10px auto;
        text-align: center;
        background-color: rgb(189, 221, 176);
        box-shadow: 0 1px 1px rgba(26, 56, 41, 0.2), 0 8px 0 -3px #698870, 0 9px 1px -3px rgb(0 0 0 / 20%), 0 16px 0 -6px #4e6653, 0 17px 2px -6px rgb(0 0 0 / 20%);
    }
    .headZone {
        height: 180px;
        line-height: 80px;
        font-size: 30px;
        font-weight: 400;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', '楷体';
        color: rgb(94, 49, 17);
        text-shadow:1px 1px 3px rgb(122, 83, 83)
    }
    .textInput {
        width: 500px;
        height: 50px;
        text-indent: 20px;
        font-size: 18px;
        border: none;
        outline: none;
        border-radius: 10px;
        color: rgb(99, 30, 30);
        background-color:rgba(188, 201, 144, 0.6);
    }
    .listZone {
        padding-bottom: 50px;
    }
    .listZone .tips{
        line-height: 200px;
        font-size: 20px;
        text-indent: 10px;
        color: rgb(116, 64, 64, .5);
    }
    .listZone .todo{
        width: 500px;
        height: 40px;
        margin: 5px auto;
        line-height: 40px;
        font-size: 20px;
        text-align: left;
        text-indent: 10px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', '楷体';
        color: rgb(116, 64, 64);
        cursor: pointer;
        background-color:rgba(188, 201, 144, 0.6);
        border-radius: 10px;
        box-shadow:inset 1px 1px 5px rgba(129, 138, 99, 0.6);
    }
    .listZone .finish{
        text-decoration:line-through;
        background-color:rgba(121, 129, 95, 0.8);
        box-shadow:inset 2px 2px 1px rgb(122, 99, 99);
    }
    
    .bottleZone {
        position: absolute;
        bottom: 0;
        right: 20px;
        /* width: 100%; */
        height: 50px;
        line-height: 50px;
    }
    .clearbtn {
        color: rgba(179, 120, 120, 0.6);
        font-weight: 400;
        cursor: pointer;
    }
    .countzone {
        margin-right: 400px;
        color: rgba(179, 120, 120, 0.6);
        font-weight: 400;
        cursor: pointer;
    }
</style>