vue 记事本

小码记事本 案例，知识巩固

功能：添加笔记、删除笔记、清空笔记、统计笔记

用到的vue语法：v-on、v-for、v-model、v-text

效果图：

 html代码：

  <!-- 主体区域 -->
    <section id="todoapp" class="">
        <!-- 输入框 -->
        <header class="header">
            <h1>小码记事本</h1>
            <input v-model="inputValue" autofocus="autofocus" autocomplete="off" 
            placeholder="请输入任务"  class="new-todo" @keyup.enter="add"/>
        </header>
        <!-- 列表区域 -->
        <section class="main">
            <ul class="todo-list">
                <li class="todo" v-for="(item,index) in list">
                    <div class="view">
                        <span class="index">{{index+1}}.</span>
                        <label>{{item}}</label>
                        <button class="destroy" @click="remove(index)">X</button>
                    </div>
                </li>
                 <!-- 统计和清空 -->
                <li class="todoSum">
                    <span>
                        <strong v-text="list.length"></strong>
                        &nbsp;items total
                    </span>
                    <button v-show="list.length!=0" class="clear" @click="clear">Clear</button> 
                </li>
            </ul>
        </section>
    </section>

js代码：

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#todoapp",
            data() {
                return {
                    list:["吃饭饭","睡觉觉","写代码"],
                    inputValue:"",
                }
            },
            methods: {
                add:function(){
                    this.list.push(this.inputValue);
                },
                remove:function(index){
                    this.list.splice(index,1);
                },
                clear:function(){
                    this.list=[];
                }
            },
        })
    </script>

css代码：

<style> 
#todoapp{
            padding-left: 20px;
        }
        .header{
            width:399px;
            /* border:1px solid yellowgreen; */
            text-align: center;
            color: tomato;
            font-size: 25px;
            
        }
        .header h1{
            font-weight: lighter;
            opacity: 0.9;
        }
        .new-todo{
            padding-left: 18px;
            font-size: medium;
            width: 382px;
            height:45px;
            border:none;
            border: 1px solid gainsboro;
            border-radius: 5px 5px 0 0;
            outline:none;
            /* background-color: rgb(242, 247, 248); */
        }
        .todo-list{
            border: 1px solid gainsboro;
            color:gray;
            width: 360px;
            margin-top: 0px;
            box-shadow:4px 4px 8px gainsboro;
            border-radius: 0 0 15px 15px;
            /* background-color: rgb(242, 247, 248); */
        }
        .todo{
            width: 370px;
            height: 36px;
            padding-top: 10px;
            margin-left: -26px;
            border-bottom:1px solid gainsboro;
            list-style-type: none;
           
        }
        .todoSum{
           list-style-type: none; 
           height: 30px;
           padding-top: 10px;
           margin-left: -26px;
           font-size: small;
           opacity:0.7;
        }
        .clear{
            position: relative;
            left:240px;
            color:gray;
            border: none;
            outline: none;
            background-color: transparent;
        }
        .destroy{           
            position: absolute;
            left:380px;
            border: none;
            opacity: 0.2;
            /* display: none; */
            color:gray;
        }
        .destroy:hover{
            opacity: 0.8;
        }
    </style>