vue学习：基于本地应用制作的记事本

基于本地应用制作的记事本

功能

1.新增
2.删除
3.统计
4.清空
5.隐藏

逻辑

新增

1.生成列表结构（v-for 数组）：建立一个字符串数组用于统计用户输入内容，并且用于新增数据内容。
2.获取用户输入（v-model）：对相应的表单元素设置双向数据绑定，获取数据。
3.回车，新增数据(v-on.enter 添加数据)：就是往数组里添加内容。通过回车控制（@keyup.enter）

删除

1.点击删除指定内容（v-on splice）:通过对应的下标删除指定的内容。最终实现点击通过索引删除对应的元素

统计

1.统计信息个数：信息的个数就是数组的长度，通过v-text展示数组的长度即可

清空

1.一次性删除（v-on）：通过v-on绑定点击事件，清空数组即可。this.数组=[];

隐藏

1.底部统计数据：当没有数据就把元素隐藏起来。（v-show）(v-if)都可以选用。当数组的元素不为0，（v-if = 数组的长度 != 0）即可。

最终效果：
阿闷的记事本

整体代码如下：

   <script>
        // 1.生成列表结构：(v-for 数组)
        // 2.获取用户输入(v-model)
        // 3.回车，新增数据(v-on.enter 添加数据)
        var app = new Vue({
            el: "#box",
            data: {
                list: ['吃饭', '睡觉', '打豆豆'],
                inputValue: "起床写代码 !",
            },
            methods: {
                add: function () {
                    this.list.push(this.inputValue);
                },
                remove: function (index) {
                    this.list.splice(index, 1);
                },
                clear: function () {
                    this.list = [];
                }
            }
        })
    </script>