Vue||简易版记事本

矫情吗；* 2023-03-12 07:10 17阅读 0赞

## 前言 ##

基于对JavaScript插件vue的不断学习，不断熟悉，今天就基于vue做一个简易版记事本叭~

## 功能概述 ##

实现了增删统计三大基础功能：  
1）文本框输入内容后按回车，动态生成新事件（li），并将文本框内容给该li  
2) 点击li右侧对应的“X”，将该事件（li）删除  
3）在记事本右下角记录当前所有事件（li)总数量  
4）点击记事本左下角的“CLEAR"则清空记事本  
初始化界面（无事件时）如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]

## 涉及vue知识点 ##

**1）v-model**  
使用内置的 v-model 指令，实现双向数据绑定。  
在这次项目中，对文本框引用了”v-model=‘message’",目的是双向数据绑定，自动更新元素。让文本框的值和message的值相互统一。

**2）v-if**  
前面已经使用过“v-if" 了，它的作用是判断一个dom节点是否显示。  
在本项目中，我用其来控制"clear” 和“totle:x"这两个文本的显示与隐藏

**3）@事件**  
对部分元素绑定对应事件

**4）v-for**  
循环生成元素（及其后代）

记录事件后，页面如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]

## 源代码 ##

**1）页面布局**

<div id="notepad">
    	  <h2>简易版记事本</h2>
    	  <div id="text">
    	      <input type="text" v-model="message" @keyup.enter = "addOne"/>
    	      <ul>
    	          <li v-for="(item,i) in obj" >{ { i + 1}} . { { item}}<img src="错.png" @click = "delIt(i)"/></li>
    	      </ul>
    	      <p v-if="obj.length != 0">Totle: { { obj.length}}</p>
    	      <p id="clear" v-on:click = "clearAll" v-if="obj.length != 0">CLEAR</p>
    	  </div>
    </div>

**2）添加css样式**

*{ 
        padding: 0;
        margin: 0;
    }
    #notepad{ 
        position: absolute;
        left: 32%;
        top: 8%;
        width: 460px;
        height: auto;
    }
    #text{ 
        margin-top: 10px;
        padding-bottom: 20px;
        width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 2px 2px 4px black;
    
    }
    h2{ 
        text-align: center;
        color: pink;
    }
    input{ 
        margin-top: 2%;
        margin-left: 2%;
        width: 96%;
        height: 30px;
        border: 0;
        border-bottom: 1px solid #808080;
        font-size: 20px;
    }
    li{ 
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 2%;
        width: 96%;
        border-bottom: 1px solid #808080;
        list-style: none;
        
    }
    img{ 
        float: right;
        width: 18px;
        height: 18px;
        cursor: pointer;
        display: none;
    }
    li:hover img{ 
        display: block;
    }
    p{ 
        position: absolute;
        right: 14px;
        width: 48px;
        font-size: 2px;
        color: gray;
    }
    #clear{ 
        position: absolute;
        left: 14px;
        font-size: 2px;
        color: gray;
        cursor: pointer;
    }

**3)js逻辑实现**

## 最终效果预览 ##

基于vue的网页版简易记事本

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]: /images/20230312/396b463d556340a79124a682d30883f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]: /images/20230312/34853f7be18e475688712e70da53a2dd.png