使用Vue写一个todoList事件备忘录经典小案例

更新时间：2022年10月27日 11:31:09 作者：爱笑的陈sir

学习了几天Vue之后终于迎来了第一个小案例,todoList是非常常见地一个小案例,下面这篇文章主要给大家介绍了关于使用Vue写一个todoList事件备忘录经典小案例的相关资料,需要的朋友可以参考下

前言

前几天无聊用Vue框架写了一个todoList事件备忘录小案例,自己感觉挺好玩的，温馨提示：请大家提前到Vue官网下载一个Vue框架文文件（后续需要引入到项目里面）,接下类给大家分析一下这个经典小案例：

1、基本写法

   </head>
<body>
    <ul>
        <li>
            14天核酸检测
        </li>
        <li>
            9.3开学
        </li>
        <li>
            开学第一课
        </li>
    </ul>

input文本框

button按钮

<button>提交</button>

2、实际运用开发

在实际运用开发时，我们的数据和内容不能写死，方便后续添加或修改内容，这样的话使用上面这种方法，你就发现这个方法效率很低，而且每次修改或者添加新的内容的时候都得添加一个<li></li>标签 ，这就很繁琐，而且效率也不怎么高,那么有没有一种效率高的方法来实现对应操作呢？事实证明它是有的。

写一个容器div,将内容全部放入,vue本身不是全局生效,需要指定生效的位置

<div id="app">
 <h1>{{title}}</h1>
<!-- 添加一个文本框 -->
<input type="text">

v-on 简写 @绑定事件指令点击button时触发 add方法

<button @click="add()">提交</button>

v-for 循环产生的结构
(item,index) 数组中内容和内容对应的索引值
in 循环的数组

   <ul>
      <li v-for="(item,index) in lists">
          {{item}}
      </li>
   </ul> 
    </div>

3、初始化一个vue项目

<script>

</script>

//创建一个vue对象
//let 定义一个变量
//用于保存后方Vue对象
//数据: 数组:[1,2,3]
放置同样类型的元素
//{ // key:value //}

//循环过程中先要将循环的数据,显示对应的结构中 //数组如何显示到页面中：插值表达式{{}}
//给提交按钮添加一个点击事件

let vm=new Vue({
       //el:选项
       el:"#app",//el绑定生效的区间
       data:{//本次需要哪些数据
          lists:["14天核酸检测","开学9.3","开学第一课","专接本"],
          title:"希望可以顺利开学"
      
        },
        methods:{
            add(){

4、如何在数组中追加内容、找到对应的数组

//顺利开学！！！
//直接在数组中追加顺利开学
//如何找到对应的数组?
//this对象 -> vue对象
//lists

console.log(this.lists)

                this.lists.push("顺利开学!!!")
                // console.log(1)
                
            }
        }
   })

5、todoList事件备忘录源码分享

<!DOCTYPE html>
<html lang="en">
<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">
    <title>todoList</title>
    <script src="js/vue221.js"></script>
</head>
<body>
    <!-- 写一个容器div,将内容全部放入,vue本身不是全局生效,需要指定生效的位置 -->
    <div id="app">
        <h1>{{title}}</h1>
    <!-- 添加一个文本框 -->
    <input type="text">
    <!-- v-on  简写 @绑定事件指令  点击button时触发 add方法 -->
    <button @click="add()">提交</button>
   <ul>
       <!-- v-for 循环产生的结构 
       (item,index) 数组中内容和内容对应的索引值
       in 循环的数组--> 
      <li v-for="(item,index) in lists">
          {{item}}
      </li>
   </ul> 
    </div>
    <!-- 初始化一个vue项目 -->
    <script>
   //创建一个vue对象
   //let 定义一个变量
   //用于保存 后方Vue对象
   //数据: 数组:[1,2,3] 放置同样类型的元素
   //{
   //    key:value
   //}
   //循环过程中 先要将循环的数据,显示对应的结构中
   //数组如何显示到页面中： 插值表达式{{}}
   //给提交按钮添加一个点击事件
   let vm=new Vue({
       //el:选项
       el:"#app",//el绑定生效的区间
       data:{//本次需要哪些数据
          lists:["14天检测","开学9.3","开学第一课","专接本"],
          title:"希望可以顺利开学"
      
        },
        methods:{
            add(){
                //顺利开学！！！
                //直接在数组中  追加  顺利开学
                //如何找到对应的数组?
                //this对象 -> vue对象
                //lists
                // console.log(this.lists)
                this.lists.push("顺利开学!!!")
                // console.log(1)
            }
        }
   })
    </script>
</body>
</html>

6、祖国母亲七十三周年生日快乐

<!DOCTYPE html>
<html lang="en">
<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">
    <title>todoList</title>
    <script src="js/vue221.js"></script>
</head>
<body>
    <!-- 写一个容器div,将内容全部放入,vue本身不是全局生效,需要指定生效的位置 -->
    <div id="app">
        <h1>{{title}}</h1>
    <!-- 添加一个文本框 -->
    <input type="text">
    <!-- v-on  简写 @绑定事件指令  点击button时触发 add方法 -->
    <button @click="add()">提交</button>
   <ul>
       <!-- v-for 循环产生的结构 
       (item,index) 数组中内容和内容对应的索引值
       in 循环的数组--> 
      <li v-for="(item,index) in lists">
          {{item}}
      </li>
   </ul> 
    </div>
    <!-- 初始化一个vue项目 -->
    <script>
   //创建一个vue对象
   //let 定义一个变量
   //用于保存 后方Vue对象
   //数据: 数组:[1,2,3] 放置同样类型的元素
   //{
   //    key:value
   //}
   //循环过程中 先要将循环的数据,显示对应的结构中
   //数组如何显示到页面中： 插值表达式{{}}
   //给提交按钮添加一个点击事件
   let vm=new Vue({
       //el:选项
       el:"#app",//el绑定生效的区间
       data:{//本次需要哪些数据
          lists:["放假在家休息两天","去看升旗仪式","写一份手抄报","看大典"],
          title:"国庆节快乐"
      
        },
        methods:{
            add(){
                //顺利开学！！！
                //直接在数组中  追加  顺利开学
                //如何找到对应的数组?
                //this对象 -> vue对象
                //lists
                // console.log(this.lists)
                this.lists.push("祝生日快乐!!!")
                // console.log(1)
            }
        }
   })
    </script>
</body>
</html>

总结

到此这篇关于使用Vue写一个todoList事件备忘录经典小案例的文章就介绍到这了,更多相关Vue todoList事件备忘录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

如何用Vue实现父子组件通信
这篇文章主要介绍了如何用Vue实现父子组件通信，对Vue感兴趣的同学，可以参考下
2021-05-05
vue 路由切换过渡动效滑入滑出效果的实例代码
在支付宝账单页面有这样一个特效切换过渡动效滑入滑出效果，非常方便实用，那么这个功能如何实现的呢？下面小编通过vue实现路由切换过渡动效滑入滑出效果，感兴趣的朋友一起看看吧
2022-03-03
vue可视化表单设计器自定义组件使用方法
Vue前端开发中表单组件是排在前三的高频使用的组件,下面这篇文章主要给大家介绍了关于vue可视化表单设计器自定义组件使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
vue父组件向子组件(props)传递数据的方法
这篇文章主要介绍了vue父组件向子组件(props)传递数据的方法,文中给大家补充介绍了vue父子组件间传值(props)的实现代码，需要的朋友可以参考下
2018-01-01
Vue.component的属性说明
这篇文章主要介绍了Vue.component的属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
这篇文章主要介绍了详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
这篇文章主要介绍了vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-10-10
Vue.js实现简单计时器应用
这篇文章主要为大家详细介绍了Vue.js实现简单计时器应用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
关于vuex强刷数据丢失问题解析
这篇文章主要介绍了关于vuex强刷数据丢失问题解析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
Nuxt.js踩坑总结分享
本篇文章主要介绍了Nuxt.js踩坑总结分享，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01