使用VUE来实现简单的TodoList（持续更新中）

最新推荐文章于 2022-07-19 20:50:22 发布
最新推荐文章于 2022-07-19 20:50:22 发布
阅读量516 收藏 3
点赞数 1
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CrownNew/article/details/104241161
版权

我们用到了VUE中的v-for、v-on、v-model三种指令

下面我谈一下现阶段对这三个指令的理解


v-for
<li v-for = 'item in list'>{{item}}</li>

我对v-for的理解就是VUE中的for循环，例如item in list就和C语言中的for i in range有异曲同工之意。

v-on
<button v-on:click = "handleBtnClick">提交</button>

v-on用来绑定事件，上边就是给button绑定了一个点击事件

v-model
<input type="text" v-model = "inputvalue"/>

V-model实质上就是双向绑定，把输入框中的值与inputvalue中的值绑定以来，一方改变双方都改变

TodoList的实现代码如下，现在只实现了添加功能，后期会一一实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TodoList</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model = "inputvalue"/>
            <button v-on:click = "handleBtnClick">提交</button>     <!--v-on用来绑定事件-->
            <ul>
                <li v-for = 'item in list'>{{item}}</li>            <!--v-for类似于for循环-->
            </ul>
        </div>

        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    list:[],
                    inputvalue:''
                },
                methods:{
                    handleBtnClick:function(){
                        this.list.push(this.inputvalue)         //像list中添加button提交的值
                        this.inputvalue = ''                    //每次提交完之后把输入框内的值清空
                    }
                }
            })
        </script>
    </body>
</html>

下边我们应用组件对Todolist进行一个优化

先是全局组件
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TodoList</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model = "inputvalue"/>
            <button v-on:click = "handleBtnClick">提交</button>     <!--v-on用来绑定事件-->
            <ul>
				<todo-item v-bind:content='item' v-for = "item in list">			
					<!-- 由于下方已经创建了全局组件，可以直接使用，但是大写字母前要加‘-’-->
					<!-- 通过v-bind语法借助content变量把item的值传给下方的TodoItem子组件-->
				</todo-item>
            </ul>
        </div>
        
        <script>
			//列表组件
			Vue.component("TodoItem",{				//vue.component用来创建一个全局组件
				props:['content'],					//通过props接收content的值
				template: " <li>{{content}}</li>"	
			})
			
            var app = new Vue({
                el:'#app',
                data:{
                    list:[],
                    inputvalue:''
                },
                methods:{
                    handleBtnClick:function(){
                        this.list.push(this.inputvalue)         //像list中添加button提交的值
                        this.inputvalue = ''                    //每次提交完之后把输入框内的值清空
                    }
                }
            })
        </script>
    </body>
</html>
再是局部组件

局部组件必须要在Vue实例中注册才能够使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TodoList</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model = "inputvalue"/>
            <button v-on:click = "handleBtnClick">提交</button>     <!--v-on用来绑定事件-->
            <ul>
				<todo-item v-bind:content='item' v-for = "item in list">			
					<!-- 通过v-bind语法借助content变量把item的值传给下方的TodoItem子组件-->
				</todo-item>
            </ul>
        </div>

        <script>
			//局部组件
			var TodoItem = {
				props:['content'],
				template: " <li>{{content}}</li>"
			}
			//Vue实例
            var app = new Vue({
				components:{							//局部组件需要在实例中注册才能使用
					TodoItem: TodoItem
				},
                el:'#app',
                data:{
                    list:[],
                    inputvalue:''
                },
                methods:{
                    handleBtnClick:function(){
                        this.list.push(this.inputvalue)         //像list中添加button提交的值
                        this.inputvalue = ''                    //每次提交完之后把输入框内的值清空
                    }
                }
            })
        </script>
    </body>
</html>

接下来我们来完成删除功能

我在练习的过程中习惯把注释和笔记写在代码中，所以大家顺一遍我的代码也自然就懂啦

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TodoList</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model = "inputvalue"/>
            <button v-on:click = "handleBtnClick">提交</button>     <!--v-on用来绑定事件-->
            <ul>
				<todo-item v-bind:content='item'
						   v-bind:index = "index"					
						   v-for = "(item,index) in list" 
						   @delete = 'handleItemDelete'>						
					<!-- 
					通过v-bind语法借助content和index变量把item和index的值传给下方的TodoItem子组件
					这里的@ 等价于 v-for
					-->
				</todo-item>
            </ul>
        </div>

        <script>
			//局部组件
			var TodoItem = {
				props:['content','index'],
				template: " <li @click = 'handleItemClick'>{{content}}</li>",		//给li绑定点击事件
				methods:{
					handleItemClick:function(){
						this.$emit("delete",this.index);	//通过$emit向外触发delete事件并传出index到父组件		
					}
				}
			}
			//Vue实例
            var app = new Vue({
				components:{							//局部组件需要在实例中注册才能使用
					TodoItem: TodoItem
				},
                el:'#app',
                data:{
                    list:[], 
                    inputvalue:''
                },
                methods:{
					//提交事件
                    handleBtnClick:function(){
                        this.list.push(this.inputvalue)         //像list中添加button提交的值
                        this.inputvalue = ''                    //每次提交完之后把输入框内的值清空
                    },
					//点击删除事件
					handleItemDelete:function(index){			
						this.list.splice(index,1)				//从index开始向后删除一项
					}
                }
            })
        </script>
    </body>
</html>
郝拾柒
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue实现todolist
07-13
利用vue框架，实现todolist MVC DEMO，基本实现必备功能，其中使用到了element-ui
Vue实现todoList功能
qq_54780978的博客
11-23 2095
Vue实现dotoList案例
如何用vue简单的实现Todolist？
xiaoguaiafei的博客
03-20 240
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todol...
Vue实现TODOList
鸟人的博客
07-19 307
使用Vue实现简单的TODOList功能。
vue实现todoList
wang159477的博客
04-10 437
系列文章目录 1、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加） 2、动态计算有几个未完成的任务 3、点击复选框，实现选中或不选中效果（即完成或未完成） 4、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表 5、双击列表中的内容，可对列表内容进行编辑 编辑完成后，按enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑 如果想要取消修改，按esc键即可取消编辑 6、单击上面的所有任务、未完成任务、已完成任务，三个按钮可以切换任务列表 7、已经添加的
vue实现todolist功能、todolist组件拆分及todolist的删除功能
10-17
如果只想在特定的Vue实例中使用该组件，可以创建局部组件。局部组件需要在Vue实例的`components`选项中注册，如： ```html <todo-item></todo-item> var TodoItem = { template: '<li>item</li>' }; ...
使用Vue父子组件通信实现todolist的功能示例代码
10-17
在本文中，我们将深入探讨如何使用Vue.js框架中的父子组件通信机制来实现一个简单的todolist功能。Vue.js是一个流行的前端JavaScript库，它提供了一种声明式的数据绑定和组件化的方法，使得开发用户界面更加简洁高效...
vue实现ToDoList简单实例
08-31
在本实例中，我们将探讨如何使用Vue.js创建一个简单的ToDoList应用，该应用包含添加任务、删除任务和全选删除功能。下面将详细阐述实现这个功能的关键步骤和涉及的技术。 首先，我们需要为页面添加基本的Bootstrap...
使用vue开发移动端app 持续更新中
01-20
本篇内容将深入探讨如何使用Vue.js来构建移动端应用，并提供一系列的参考资料和实践步骤。 首先，要开始一个Vue移动端项目，你需要确保你的开发环境已经准备好。这通常包括安装Node.js（因为Vue CLI依赖于它），...
Vue实现todolist删除功能
08-27
在本文中，我们将深入探讨如何使用Vue.js框架来实现一个基本的待办事项列表（Todo List）应用，特别是关注删除功能的实现。Vue.js是一个轻量级的前端JavaScript框架，以其响应式数据绑定和组件化特性而受到广泛欢迎...
vue实现简易留言板（todolist）
01-07
使用bootstrap布局的vue.js入门小demo
Vue 实现ToDoList
达拉崩巴斑得贝迪卜多比鲁翁_
06-04 716
Vue 实现ToDoList 本文实现一个用Vue脚手架搭建项目、实现简单的ToDoList功能 computed：计算属性 filters：过滤器 localStorage：本地存储 技术点 vue+localStorage 功能 回车添加任务 双击编辑任务 编辑完成按回车保存 Esc撤销编辑 点击复选框表示已经完成任务 点击X删除任务 所有任务、已经完成任务、未完成任务可筛选 具体代码演示如下 <template> <div> <header&g
Vue实现 TodoList
X-77
12-29 6163
手把手教你完成TodoList，定制专属待办事项！
Vue.js实现ToDoList
jimjiayu
06-06 551
//localStorage.js // 封装操作localstorage本地存储的方法,实现保存历史记录 var storage = { set(key,value){ localStorage.setItem(key,JSON.stringify(value)); }, get(key){ return JSON.parse(localS...
用vue实现todolist
xiongzhouxiong的博客
04-12 380
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;todolist&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content=&q
Vue实现简易TodoList
liaoai的博客
02-23 4885
文章目录TodoList案例分析App.vue功能实现：1.Header部分Header.vue2.List部分List.vue3.Item部分Item.vue4.Footer部分Footer.vue TodoList案例 （省略样式部分） 分析 分为四个组件 Header List Item Footer App.vue <template> <div id="root"> <div class="todo-container"> <div
Vue增删改查(Todo-list进阶版)
weixin_57259948的博客
10-06 676
效果实现流程： 首先创建一个vue项目，Todo-list总共分三步来写， 头部我们使用input框来实现输入的数据，使用键盘事件点击添加到数据中，使用v-model实现响应式数据， 第二步来进行筛选，是完成还是未完成 我们添加的数据在这里拿到进行渲染，然后我们用css3的属性实现删除的显示和隐藏 代码实现思路： vuex代码实现思路： 我们在vuex中创建一个空对象，在定义一个初始值和初始状态，当我们的全部，然后在用map循环通过id来判断他的状态，是true还是false，实现单选和全选 .
使用Vue3实现todolist的添加和删除。
最新发布
07-15
你可以按照以下步骤使用Vue 3来实现todolist的添加和删除功能： 1. 首先，在你的Vue项目中安装Vue 3。你可以使用npm或者yarn来安装它： ``` npm install vue@next ``` 或者 ``` yarn add vue@next ``` 2. 在你的Vue组件中，创建一个data属性来存储todo列表和输入框的值： ```javascript data() { return { todos: [], newTodo: '' } } ``` 3. 创建一个方法来添加todo到列表中： ```javascript methods: { addTodo() { if (this.newTodo.trim() !== '') { this.todos.push(this.newTodo); this.newTodo = ''; } } } ``` 4. 创建一个方法来删除todo： ```javascript methods: { deleteTodo(index) { this.todos.splice(index, 1); } } ``` 5. 在模板中，使用v-model指令来绑定输入框的值，并使用v-for指令来循环渲染todo列表： ```html <input type="text" v-model="newTodo"> <button @click="addTodo">Add</button> <ul> <li v-for="(todo, index) in todos" :key="index"> {{ todo }} <button @click="deleteTodo(index)">Delete</button> </li> </ul> ``` 现在，当你在输入框中输入内容并点击"Add"按钮时，该内容将会被添加到todo列表中。当你点击"Delete"按钮时，对应的todo将会被从列表中删除。 希望这个例子能帮助你实现Vue 3中todolist的添加和删除功能！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值