Vue todolist小实例

最新推荐文章于 2023-08-10 10:19:27 发布
最新推荐文章于 2023-08-10 10:19:27 发布
阅读量663 收藏 3
点赞数 1
分类专栏： vue开发学习 文章标签： Vue todolist小实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YYxiaobao0726/article/details/86562337
版权

版本01（初始）

<template>

<!-- vue 的模板里面，所有的内容要被一个根节点包含起来-->
  <div id="app">
   <input type="text" v-model="todo"/>  <!-- 双向绑定了 'todo'-->
   <button @click="doAdd()">+ 增加</button>

   <br>

   <hr>

   <br>

   <ul>
     <li v-for="(item,key) in list">
      {{item}} ------- <button @click="deleteDate(key)">- 删除</button><!--通过取得索引值来完成此功能。此key为实参,数组下标-->
     </li>
   </ul>

  </div>
</template>
 
<script>

export default { // 表示将组件暴露出去
  // name: 'App',  给组件起个名字，可以删除
  data () {   //业务逻辑里定义的数据 
    return {
     todo:'',
     list:[],
    }
  },
  methods:{   //这里是放方法的地方
    doAdd(){
    //1.获取文本框输入的值  2.把文本框中的值push进list中
      this.list.push(this.todo);   //将todo push到list中
      this.todo='';                // 再将它为空
    },
    deleteDate(key){  //此key为形参
       // alert(key)
      /*splice 的语法格式
      array.splice(index,howmany,item1,.....,itemX)
      index	必需,规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
      howmany	必需。规定应该删除多少元素。必须是数字，但可以是 "0"。
                              如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
      item1, ..., itemX	可选。要添加到数组的新元素*/
      this.list.splice(key,1);//从key开始删除一个元素
    }
  }
}
</script>

<style>

</style>

01版本的代码中有双向绑定数据，定义/执行方法以及循环渲染数据等相关操作，部分地方也都做好了注释。但目前的页面样式较为简陋：
在这里插入图片描述

版本02（基本功能）

<template>

<!-- vue 的模板里面，所有的内容要被一个根节点包含起来-->
  <div id="app">
   <input type="text" v-model="todo" />  <!-- 双向绑定了 'todo'-->
   <button @click="doAdd()">+ 增加</button>
   <br>

   <hr>

   <br>
   <h2>进行中</h2>
   <ul>
     <li v-for="(item,key) in list" v-if="!item.check">
     <input type="checkbox" v-model="item.check"/>{{item.title}} ------- <button @click="deleteDate(key)">- 删除</button><!--此key为实参,数组下标-->
     <!-- 加一个 v-if语句，item.check=false false去反为true将在“进行中”里 ，再将item-check作为一个model放入input中 -->
     </li>
   </ul>
          <!-- 添加了一个双向绑定，同时也实现了：在勾选checkbox时，会自动进入所对应的"进行中"和"完成中" -->
   <br>
   <h2>已完成</h2>
   <ul>
     <li v-for="(item,key) in list" v-if="item.check">
     <input type="checkbox" v-model="item.check"/>{{item.title}} ------- <button @click="deleteDate(key)">- 删除</button><!--此key为实参,数组下标-->
     <!--同样也是 加一个 v-if语句，item.check=true 将在“进行中”里 ，再将item-check作为一个model放入input中 -->
     </li>
   </ul>

  </div>
</template>
 
<script>
/*
['gym是个404','yjl是个500'],这样模拟数据很难分清它的状态
    而下面这样模拟数据的话，很清晰的分清了它的状态
     [
       {
         title:gym是个404,
         check:true
       },
        {
         title:yjl是个500,
         check:false
       }
     ]
*/
export default { // 表示将组件暴露出去
  // name: 'App',  给组件起个名字，可以删除
  data () {   //业务逻辑里定义的数据 
    return {
     todo:'',
     list:[
       {
         title:'gym是个404',
         check:true
       },                         //这两个数据为默认数据
       {
         title:'yjl是个500',
         check:false
       }
       ],

    }
  },
  methods:{   //这里是放方法的地方
    doAdd(){
    //1.获取文本框输入的值  2.把文本框中的值push进list中
      if(this.todo != ''){
        this.list.push({
          title:this.todo,    
          check:false,        //状态默认为false
        }); 
        //将todo push到list中
        this.todo=''   
      }       // 添加完数据之后，输入框为空
    },
    deleteDate(key){  //此key为形参
      /*splice 的语法格式
      array.splice(index,howmany,item1,.....,itemX)
      index	必需,规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
      howmany	必需。规定应该删除多少元素。必须是数字，但可以是 "0"。
                              如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
      item1, ..., itemX	可选。要添加到数组的新元素*/
      this.list.splice(key,1);//从key开始删除一个元素
    }
  }
}
</script>

<style>

</style>

02版本的代码提升了一个层次，实现了基本功能，注释做的也很详细。多处用到了双向绑定。但页面样式没做编写。效果如下：

在这里插入图片描述
样式可自行添加，Vue todolist小实例基本完成。

版本03（保存搜索的历史记录）

在前两个版本中，没有实现可保存记录，也就是当页面刷新时原有的记录就没了，消失了。那么下面这个版本就完成了这个功能。

<template>

<!-- vue 的模板里面，所有的内容要被一个根节点包含起来-->
  <div id="app">
   <input type="text" v-model="todo" />  <!-- 双向绑定了 'todo'-->
   <button @click="doAdd()">+ 增加</button>
   <br>

   <hr>

   <br>
   <h2>进行中</h2>
   <ul>
     <li v-for="(item,key) in list" v-if="!item.check">
     <input type="checkbox" v-model="item.check" @change="saveList()"/>{{item.title}} ------- <button @click="deleteDate(key)">- 删除</button><!--此key为实参,数组下标-->
     <!-- 加一个 v-if语句，item.check=false 将在“进行中”里 ，再将item-check作为一个model放入input中 -->
     </li>
   </ul>
          <!-- 添加了一个双向绑定，同时也实现了：在勾选checkbox时，会自动进入所对应的"进行中"和"完成中" -->
   <br>
   <h2>已完成</h2>
   <ul>
     <li v-for="(item,key) in list" v-if="item.check">
     <input type="checkbox" v-model="item.check" @change="saveList()"/>{{item.title}} ------- <button @click="deleteDate(key)">- 删除</button><!--此key为实参,数组下标-->
     <!--同样也是 加一个 v-if语句，item.check=true 将在“进行中”里 ，再将item-check作为一个model放入input中 -->
     </li>
   </ul>

  </div>
</template>
 
<script>
/*
['gym是个404','yjl是个500'],这样模拟数据很难分清它的状态
    而下面这样模拟数据的话，很清晰的分清了它的状态
     [
       {
         title:gym是个404,
         check:true
       },
        {
         title:yjl是个500,
         check:false
       }
     ]
*/
export default { // 表示将组件暴露出去
  // name: 'App',  给组件起个名字，可以删除
  data () {   //业务逻辑里定义的数据 
    return {
     todo:'',
     list:[
       {
         title:'gym是个404',
         check:true
       },                         //这两个数据为默认数据
       {
         title:'yjl是个500',
         check:false
       }
       ],

    }
  },
  methods:{   //这里是放方法的地方
    doAdd(){
    //1.获取文本框输入的值  2.把文本框中的值push进list中
      if(this.todo != ''){
        this.list.push({
          title:this.todo,    
          check:false,        //状态默认为false
        }); 
        //将todo push到list中
        this.todo=''   
      }       // 添加完数据之后，输入框为空

      localStorage.setItem('list',JSON.stringify(this.list))  //保存记录，页面刷新纪录仍然存在。
      //使用的是HTML的语法
    },
    deleteDate(key){  //此key为形参
      /*splice 的语法格式 
      array.splice(index,howmany,item1,.....,itemX)
      index	必需,规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
      howmany	必需。规定应该删除多少元素。必须是数字，但可以是 "0"。
                              如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
      item1, ..., itemX	可选。要添加到数组的新元素*/
      this.list.splice(key,1);//从key开始删除一个元素

      localStorage.setItem('list',JSON.stringify(this.list))  //保存记录，页面刷新纪录仍然存在。
      //使用的是HTML的语法
    },
    saveList(){
       localStorage.setItem('list',JSON.stringify(this.list)) //使复选框也保存记录,对应上面代码的第15行和24行
    }
  },
  mounted(){   /*生命周期函数       vue页面刷新就会触发的方法*/

	     var list=JSON.parse(localStorage.getItem('list'));  //得到保存的记录
	
	      if(list){  /*注意判断*/
	        this.list=list;
	      }
	  }
}
</script>

<style>

</style>

添加的主要代码在第15行、24行、77行、89行、92行和 第96到第103行

版本04（再次提升，使用模块化以及封装Storage组件）

我们发现频繁使用storage有点麻烦，那不如封装storage这个组件，然后直接调用。

  1. 在src下面新建一个文件夹为model ，新建文件storage.js
    在这里插入图片描述
  2. 编写storage.js ，代码如下：
//封装操作localstorage本地存储的方法   模块化的文件

// nodejs  基础

var storage={

    set(key,value){

        localStorage.setItem(key, JSON.stringify(value));
    },
    get(key){

        return JSON.parse(localStorage.getItem(key));
    },
    remove(key){
        localStorage.removeItem(key);
    }

}
export default storage;//将组件暴露出去
  1. 在App.vue 中改动的代码（主要是在script中有改动，怕读者产生视觉疲劳，这里就只发改动的代码）
import storage from './model/storage.js';   //导入这个文件
//console.log(storage);
export default { // 表示将组件暴露出去
  // name: 'App',  给组件起个名字，可以删除
  data () {   //业务逻辑里定义的数据 
    return {
     todo:'',
     list:[
       {
         title:'gym是个404',
         check:true
       },                         //这两个数据为默认数据
       {
         title:'yjl是个500',
         check:false
       }
       ],

    }
  },
  methods:{   //这里是放方法的地方
    doAdd(){
    //1.获取文本框输入的值  2.把文本框中的值push进list中
      if(this.todo != ''){
        this.list.push({
          title:this.todo,    
          check:false,        //状态默认为false
        }); 
        //将todo push到list中
        this.todo=''   // 添加完数据之后，输入框为空
      }       

      storage.set('list',this.list)  //封装了storage这个组件
    },
    deleteDate(key){  //此key为形参
      /*splice 的语法格式 
      array.splice(index,howmany,item1,.....,itemX)
      index	必需,规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
      howmany	必需。规定应该删除多少元素。必须是数字，但可以是 "0"。
                              如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
      item1, ..., itemX	可选。要添加到数组的新元素*/
      this.list.splice(key,1);//从key开始删除一个元素

      storage.set('list',this.list);  //封装了storage这个组件
    },
    saveList(){
      storage.set('list',this.list);  //封装了storage这个组件   
    }
  },
  mounted(){   /*生命周期函数       vue页面刷新就会触发的方法*/

          var list=storage.get('list'); //得到保存的记录

          if(list){  /*注意判断*/
            this.list=list;
          }
      }
}
</script>

这样一来，就方便很多了。

Vue todolist小实例的版本就先改动到这里，还会有后续版本，希望对大家会有帮助。若有任何疑问或是不解，请在下方评论，谢谢。

Michael II
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
Vue学习（todolist小实例）
樱花满地集于我心，楪舞纷飞祈愿相随
05-22 526
包括功能开发、组件拆分、组件与实例的关系、以及删除功能。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="./vu
Vue实现简单ToDolist案例
Huang_DW的博客
07-01 441
Vue实现简单ToDolist案例 <template> <div> <div> <input type="text" v-model="inputValue" @keydown.enter="add"> <span @click="shaix" style="cursor: pointer;">筛选</span> <h3>正在进行({{noList}})</h3&
Vue TodoList完整案例
09-05
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：完成了所有的功能，如：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务、自动聚焦，本地保存等等。
Vue---Todolist案例
一夜奈何梁山
08-30 624
导入包： <!-- 1:导入Vue包 --> <script src="js/vue.js"></script> 设置预加载和Vue对象： <!-- 2：设置预加载和Vue对象 --> <script> window.onload = function(){ var vm = new Vue({ el: ".list_con", d
一个简单的vue的todolist例子
LLL_liuhui的博客
05-09 298
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="a...
vue实现ToDoList简单实例
08-31
在本实例中，我们将探讨如何使用Vue.js创建一个简单的ToDoList应用，该应用包含添加任务、删除任务和全选删除功能。下面将详细阐述实现这个功能的关键步骤和涉及的技术。 首先，我们需要为页面添加基本的Bootstrap...
vue组件编写之todolist组件实例详解
08-28
Vue 组件编写之 TodoList 组件实例详解 本文将详细介绍 Vue 组件编写之 TodoList 组件的实例讲解，主要包括组件注册、模板编写、样式设计、事件处理等方面的知识点。 组件注册 在 Vue 中，组件注册是指将一个组件...
vue.js实例todoList项目
10-19
在主Vue实例`App.vue`中，我们需要引入`todoList.vue`组件，并在`components`对象中注册它。然后在模板中声明`todo-list`组件的位置，注意这里的`-`是因为在HTML中，驼峰命名法的首字母大写会被转换为小写。 ```...
vue实现todolist功能、todolist组件拆分及todolist的删除功能
10-17
在这个教程中，我们将探讨如何使用Vue实现一个基本的待办事项（TodoList）功能，包括组件拆分和删除功能。 首先，让我们看一个简单的TodoList功能的实现。在HTML中，我们有一个`<input>`元素和一个提交按钮，它们...
vue简单实例（todolist）
Queen_zdd的博客
10-25 695
本实例运用vue的一些常用指令如：v-for,v-on,v-model等； v-on:click=”“可简写为@click=“”vue+bootstrap实战注：bootstrap是基于jQuery的，所以引入bootstrap的同时，需引入jQuery。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <
（Vue案例）TodoList
qq_53388056的博客
12-07 674
（Vue案例）TodoList components里的MyHeader.vue components里的MyList.vue components里的MyItem.vue components 里的 MyFotter.vue 总结
Vue TodoList案例
Errol's Blog
04-02 1689
Vue TodoList案例
vue的todoList案例
m0_55916923的博客
08-30 1358
todolist案例
[Vue] TodoList 案例
emmmm.....
10-15 1061
1. 组件化编码流程（通用） 2. 页面组件的划分 3. 静态页面代码 4. 静态页面组件化拆分 5. 初始化数据列表 6. 添加列表数据 7. 勾选 8. 删除 9. 底部待做事项状态统计 10. 全选 & 清除已完成
Vue实例-Todo-list案例
最新发布
anxiangzsq的博客
08-10 967
基本效果图组件化编码流程(通用)1.实现静态组件:抽取组件，使用组件实现静态页面效果2.展示动态数据:2.1.数据的类型、名称是什么?2.2.数据保存在哪个组件?3.交互一从绑定事件监听开始。
vue todolist
weixin_30782331的博客
01-31 68
最近初学vue，做最简单的todolist <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>todolist</title> <style type="text/css"> #container{ ...
【Vue组件之TodoList案例】
baicaixinhuaile的博客
06-16 473
vue组件todolist案例
Vue.js TodoList案例
LitongZero的博客
09-02 1717
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：完成了所有的功能，如：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务、自动聚焦，本地保存等等。 目录 1、index.html 2、app.js 3、index.css 4、效果 5、源码下载 1、index.html &lt;!doctype html&gt; &l...
vue todo List 小案例
jifubu6013的博客
04-08 256
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; .donesty{ text-decoration: line-through; color: gray; } #app{
Vue todolist组件实例：父子组件协作与功能实现
整体而言，这篇文章提供了Vue组件开发中的实例，展示了如何创建可复用的组件，并实现基本的数据绑定和交互功能。读者可以通过阅读此文档学习如何在实际项目中组织和管理复杂的组件结构。若想深入了解或实践，请查看...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值