最近公司我的项目不忙，我终于有工夫持续学习vue了，早上看了下官网文档，次要看了下指令，感觉还能够，就上手做了一个小案例，记事本性能。该案列包含以下性能：

  1. 输出工作按回车键，列表就会新增一条数据
  2. 输出完工作按回车后输入框将被清空
  3. 底部有总记录数和革除所有数据
  4. 鼠标悬浮列表上显示删除按钮能够删除数据

一、实现思路

1、通过输入框的 @keyup.enter 指令 绑定 增加办法，增加方 法中将输出的内容存到数组中保留

2、通过 v-for 指令 循环遍历数组元素并在 ul li 中动态显示进去

3、通过 v-shoow 指令与鼠标移入移出办法（@mouseover、@mouseleave） 管制删除按钮的显示与暗藏

二、实现代码

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge" />        <meta name="viewport" content="width=device-width, initial-scale=1.0" />        <title>todolist</title>        <link rel="stylesheet" href="style/index.css" />    </head>    <body>        <!-- 主体区域 -->        <section id="todolist">            <!-- 头部区域 -->            <header class="header">                <h1>记事本</h1>                <input                type="text"                autofocus                   autocomplete="off"                placeholder="请输出工作"                class="new_todo"                v-model="message"                @keyup.enter="add"            />            </header>            <!-- 列表区域 -->            <section class="main" v-show="isShow">                <ul>                    <li v-for="(item,index) in arr" @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)">                        {{ index + 1 + '. '}} {{ item}}                        <span v-show="isChecked == index + 1 ? isIconShow : false" @click="remove"><svg t="1624355982144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1214" width="30" height="30"><path d="M512 1255.489906" p-id="1215" fill="#cdcdcd"></path><path d="M718.519288 688.227064 543.827304 513.637418l174.180292-174.180292c8.801119-8.801119 8.801119-23.128523 0-31.827304-8.801119-8.801119-23.128523-8.801119-31.827304 0L512 481.810114 337.819708 307.629822c-8.801119-8.801119-23.230861-8.596442-31.929642 0.102339l0.102339-0.102339c-8.801119 8.801119-8.698781 23.026184 0.102339 31.827304l174.180292 174.180292L305.58305 688.227064c-8.801119 8.801119-8.801119 23.128523 0 31.827304 8.801119 8.801119 23.128523 8.801119 31.827304 0L512 545.464721 686.691985 720.054367c8.801119 8.801119 22.923846 8.903458 31.724965 0.102339l0.102339-0.102339C727.218069 711.355587 727.218069 697.028183 718.519288 688.227064z" p-id="1216" fill="#cdcdcd"></path></svg></span>                    </li>                </ul>            </section>            <!-- 统计和清空区域 -->            <footer class="footer">                <span>{{ arr.length }} num</span>                <a href="#" @click="clear" class="clear">clear</a>            </footer>        </section>    </body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <script>        var todolist = new Vue({            el: '#todolist',            data: {                arr: [],                index: 0,                message:'',                isShow:false,                isIconShow:false,                isChecked:0            },            methods:{                add(){                    // 获取用户输出信息 并 增加到数组中                    this.arr.push(this.message)                    // 显示列表                    this.isShow = true                    // 清空输入框                    this.message = ''                },                // 革除所有                clear(){                    this.arr.length = 0                    // 暗藏列表                    this.isShow = false                },                // 鼠标移入                mouseOver(index){                    this.isChecked = index + 1                    this.isIconShow = true                },                // 鼠标移出                mouseLeave(index){                    this.isChecked = index + 1                    this.isIconShow = false                },                // 删除数组数据                remove(index){                    this.arr.splice(index,1)                }            }        })    </script></html>

明天抽空将功能完善成 todolist ，后续会将欠缺的 todolist 更新上来~