Vue小案例-小黑记事本的实现

86 阅读 0 评论 57 点赞

我是靠谱客的博主受伤乌龟，最近开发中收集的这篇文章主要介绍Vue小案例-小黑记事本的实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

小黑记事本综合应用了前面学习的集中指令，并且对指令进行综合性的基础应用联系。（样式没有写，仅实现了vue指令的功能。）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黑记事本</title>
</head>
<body>
    <!-- 主题区域 -->
    <div id="toduapp">
        <h1>小黑记事本</h1>
        <!-- 输入框 -->
        <!--输入框双向绑定数据，更改默认数据inputValue，然后绑定回车事件addValue，点击回车将数据添加到数组-->
        <input type="text" v-model="inputValue" @keyup.enter="addValue" autofocus='autofocus' autocomplete="off" placeholder="请输入任务">
        <!-- 列表区域 -->
        <ul>
            <!--生成事件列表，v-for循环数组数据，绑定删除方法，点击时候，可以删除本条数据-->
            <li v-for="(item, index) in list" @click="removeValue(index)">
                {{ index + 1 }}-{{ item }}
                <span>X</span>
            </li>
        </ul>
        <!-- 统计和清空 -->
        <!-- 当数组长度不为0的时候，设置为显示，否则就为删除该元素，也可以是使用v-show进行隐藏 -->
        <footer v-if="list.length>0">
            <span>一共：{{ list.length }}条信息</span>
            <!-- 绑定点击事件，点击清空的时候，清空整个数组，就是将数组设置为空 -->
            <span @click="clearList">clear</span>
        </footer>
    </div>
</body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#toduapp",
            data: {
                list: ['写代码', '吃饭饭', '睡觉觉'],
                inputValue: '好好学习！',
            },
            methods: {
                // 添加 
                addValue:function(){
                    this.list.push(this.inputValue)
                },
                // 删除， splice(开始删除的下标， 删除的个数)
                removeValue:function(index){
                    this.list.splice(index, 1)
                },
                // 清空
                clearList:function(){
                    this.list = []
                }
            }

        })
    </script>
    <!-- 
        记事本总结：

        1. 列表结构可以通过 v-for 指令结合数据生成

        2. v-on结合事件修饰符可以对事件进行限制，比如 .enter

        3. v-on 在绑定事件时可以传递自定义参数

        4. 通过 v-model 可以快速的设置和获取表单元素

        5. 基于数据的开发方式，我们可以专注于数据，以前呢需要关注DOM元素

        6. 无需过度关注 DOM 元素，通过数据来渲染页面即可。

     -->



</html>