vue 记事本

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

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

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

效果图：

html代码：

 1   <!-- 主体区域 -->
 2     <section id="todoapp" class="">
 3         <!-- 输入框 -->
 4         <header class="header">
 5             <h1>小码记事本</h1>
 6             <input v-model="inputValue" autofocus="autofocus" autocomplete="off" 
 7             placeholder="请输入任务"  class="new-todo" @keyup.enter="add"/>
 8         </header>
 9         <!-- 列表区域 -->
10         <section class="main">
11             <ul class="todo-list">
12                 <li class="todo" v-for="(item,index) in list">
13                     <div class="view">
14                         <span class="index">{{index+1}}.</span>
15                         <label>{{item}}</label>
16                         <button class="destroy" @click="remove(index)">X</button>
17                     </div>
18                 </li>
19                  <!-- 统计和清空 -->
20                 <li class="todoSum">
21                     <span>
22                         <strong v-text="list.length"></strong>
23                         &nbsp;items total
24                     </span>
25                     <button v-show="list.length!=0" class="clear" @click="clear">Clear</button> 
26                 </li>
27             </ul>
28         </section>
29     </section>

html代码

js代码：

 1  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 2     <script>
 3         var app=new Vue({
 4             el:"#todoapp",
 5             data() {
 6                 return {
 7                     list:["吃饭饭","睡觉觉","写代码"],
 8                     inputValue:"",
 9                 }
10             },
11             methods: {
12                 add:function(){
13                     this.list.push(this.inputValue);
14                 },
15                 remove:function(index){
16                     this.list.splice(index,1);
17                 },
18                 clear:function(){
19                     this.list=[];
20                 }
21             },
22         })
23     </script>

js代码

css代码：

 1 <style> 
 2 #todoapp{
 3             padding-left: 20px;
 4         }
 5         .header{
 6             width:399px;
 7             /* border:1px solid yellowgreen; */
 8             text-align: center;
 9             color: tomato;
10             font-size: 25px;
11             
12         }
13         .header h1{
14             font-weight: lighter;
15             opacity: 0.9;
16         }
17         .new-todo{
18             padding-left: 18px;
19             font-size: medium;
20             width: 382px;
21             height:45px;
22             border:none;
23             border: 1px solid gainsboro;
24             border-radius: 5px 5px 0 0;
25             outline:none;
26             /* background-color: rgb(242, 247, 248); */
27         }
28         .todo-list{
29             border: 1px solid gainsboro;
30             color:gray;
31             width: 360px;
32             margin-top: 0px;
33             box-shadow:4px 4px 8px gainsboro;
34             border-radius: 0 0 15px 15px;
35             /* background-color: rgb(242, 247, 248); */
36         }
37         .todo{
38             width: 370px;
39             height: 36px;
40             padding-top: 10px;
41             margin-left: -26px;
42             border-bottom:1px solid gainsboro;
43             list-style-type: none;
44            
45         }
46         .todoSum{
47            list-style-type: none; 
48            height: 30px;
49            padding-top: 10px;
50            margin-left: -26px;
51            font-size: small;
52            opacity:0.7;
53         }
54         .clear{
55             position: relative;
56             left:240px;
57             color:gray;
58             border: none;
59             outline: none;
60             background-color: transparent;
61         }
62         .destroy{           
63             position: absolute;
64             left:380px;
65             border: none;
66             opacity: 0.2;
67             /* display: none; */
68             color:gray;
69         }
70         .destroy:hover{
71             opacity: 0.8;
72         }
73     </style>

css代码