利用vue实现简单记事本

最新推荐文章于 2024-03-21 17:06:13 发布

dogeggcrazy

最新推荐文章于 2024-03-21 17:06:13 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript 前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/dogeggcrazy/article/details/127095607

版权

前端同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

JavaScript

18 篇文章 0 订阅

订阅专栏

废话不多说先上图！！！！

代码也很简单，主要利用了vue的v-if，v-for，v-on等绑定

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/index.css" />
  <title>记事本</title>
  <style>
    #app {
      margin-left: 500px;
      margin-top: 100px;
    }
  </style>
</head>

<body>
  <!--知识点补充
  【事件方法】
@click:当单击元素时,发生click事件。
@dbclick:当双击元素时,发生dbclick事件。
@focus:当元素获得焦点时,发生focus事件。
@blur:当元素失去焦点时发生blur事件。
@submit:当提交表单时,发生submit事件。
@keydown:当键盘被按下时,发生keydown事件。
@keyup:当键盘被松开,发生keyups事件。
@mouse enter:当鼠标指针穿过(进入)被选元素时,会发生mousedown事件。
@mouse down:当鼠标指针移动到元素上方,并按下鼠标左键,会发生mousedown事件。
@mouse leave:当鼠标离开被选元素时,会发生mouseleave事件.
@mouse down:当鼠标指针移动到元素上方,并按下鼠标左键,会发生mousedown事件。
@mouse leave:当鼠标离开被选元素时,会发生mouseleave事件。
@mouse move:当鼠标指针在指定的元素中移动时，会发生 mousemove事件。
@mouse out:在鼠标指针离开被选元素或任意子元素时都会被触发。
@mouse over:当鼠标指针位于元素上方时，会发生 mouseover事件。
@mouse up:当鼠标指针移动到元素上方，并松开鼠标左键时，会发生mouseup事件。-->
  <div id="app">
    <h2>记事本</h2>
    <div class="main">
      <!--步骤四：给input输入框添加v-modle双向绑定语法-->
      <input type="text" v-model="title" @keyup.enter="add" />
      <ul>
        <!--步骤二.在li标签内用v-for语法搭配key来渲染list数据-->
        <li v-for="(item,index) in list" :key="item.id">
          <!--步骤三，使用插值语法更改需要渲染的数据，标题序号-->
          <div class="content"><span>{{index+1}}.</span>{{item.title}}</div>
          <!--步骤十:给删除按钮添加点击事件.-->
          <button @click="list.splice(index,1)">❌</button>
        </li>
      </ul>
      <!--步骤九:完善空空如也显示-->
      <p class="empty" v-show="list.length == 0">空空如也...</p>
    </div>
    <div class="bottom">
      <!--步骤十一：将合计的默认数量改成数组长度-->
      <span>合计:{{list.length}}</span>
      <!--步骤十二：将点击事件绑定为数组为空-->
      <span @click="list = []">清空</span>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        list: [
          //步骤一在data中声明一个数组
          { id: 1, title: '吃饭饭' },
          { id: 2, title: '睡觉觉' },
          { id: 3, title: '打豆包' }
        ]
      },
      methods: {
        //步骤五：添加绑定的add添加事件
        add() {
          //步骤六：如果输入为空就不往下执行，会弹出弹窗请输入内容
          if(this.title =='') return alert('请输入一点内容')
          //步骤七:能来到这一步证明有内容,就把输入的内容添加到数组中。
          this.list.unshift({
            id:Date.now(),
            title:this.title,          
          })
          //步骤八:把数据添加到列表后,把输入框内容清空。
          this.title =''
        },
      }
    })
  </script>
  <!--【v-model的trim修饰符】
  作用:获取到输入框值时,可以自动帮你去除首尾空格语法:v-model.trim=“数据"-->
</body>

</html>

vue的引入需要注意，可以引用自己的本地vue地址，也可以直接使用文章中的地址