关键词：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title> todolist删除</title> 6 <link rel="stylesheet" href="test1.css"> 7 <script type="text/javascript" src="vue.js"></script> 8 9 </head> 10 <body> 11 <div id="rooter"> 12 <input type="text" v-model="valueput"/> 13 <button @click="handler">提交</button> 14 <ul> 15 <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" 16 @delete="handleDelete"></todo-item> 17 </ul> 18 </div> 19 <script> 20 var todoitem= 21 props:["content","index"], //将值从父组件来接听 22 template:‘<li @click="had">content</li>‘, 23 methods: 24 had:function () 25 this.$emit("delete",this.index); //可以将值传给父组件 26 27 28 ; 29 new Vue( 30 el:‘#rooter‘, 31 data: 32 valueput:"", 33 list:[], 34 content:‘‘ 35 , 36 components: 37 ‘todo-item‘:todoitem 38 , 39 methods: 40 handler:function() 41 this.list.push(this.valueput); 42 this.valueput=""; 43 44 , 45 handleDelete:function(index) 46 this.list.splice(index,1); 47 48 49 50 ); 51 console.log(1); 52 </script> 53 </body> 54 </html>
父组件向子组件传递参数，通过属性的方式和props
子组件向父组件传递参数，通过发布的方式：this.$emit("",...............)
基于vue的todolist案例(代码片段)
前言：todolist案例真的算是经典了，不管你是学习原生js，还是学习jq，还是学习vue，亦或者是react，todolist是练习必不可少的练习demo了，下面我们来看看这个案例。需要完整代码的小朋友戳这里获取资... 查看详情
vue学习笔记のtodolist的实现
...vue有了初步的了解，通过数据直接影响视图。通过vue实现todolist任务来巩固相关知识点。Todolist需要实现的主要功能有：任务的添加，回车添加（v-model、v-on）、删除（v-on）、选定重编辑（@dblclick）及取消重编辑（按esc）、对已... 查看详情
vue2和vue3的todolist比较(代码片段)
一、vue2的写法<template><divid="app"><inputtype="text"v-model="val"@keyup.enter="addTodo"><ul><liv-for="todointodos 查看详情
vue2和vue3的todolist比较(代码片段)
一、vue2的写法<template><divid="app"><inputtype="text"v-model="val"@keyup.enter="addTodo"><ul><liv-for="todointodos 查看详情
vue.js基础篇实战--一个todolist小应用
...把学到的东西柔和在一起，做点东西出来，于是有了这个Todolist小应用。主要功能就是把一天要做的事情记录下来，还实现了：标记完成事件删除已完成事件各种排序仅显示未完成的项目本地保存截图看这里用时一周，14次commits,... 查看详情
尚硅谷vue系列教程学习笔记(代码片段)
...#xff1a;vue01目录尚硅谷Vue系列教程学习笔记（8）071-TodoList案例-初始化列表072-TodoList案例-添加数据073-TodoList案例-勾选动作实现074-TodoList案例-删除动作075-TodoList案例-底部统计功能实现076-TodoList案例-底部交互动作实现077-TodoLi... 查看详情
尚硅谷vue系列教程学习笔记(代码片段)
...#xff1a;vue01目录尚硅谷Vue系列教程学习笔记（8）071-TodoList案例-初始化列表072-TodoList案例-添加数据073-TodoList案例-勾选动作实现074-TodoList案例-删除动作075-TodoList案例-底部统计功能实现076-TodoList案例-底部交互动作实现077-TodoLi... 查看详情
vue案例todolist备忘录
项目效果：https://cinderellastory.github.io/todolist/dist/index.html#/ 项目链接：https://github.com/CinderellaStory/todolist vue逆袭群，希望能够帮助到大家！群号：659182980 查看详情
todolist
1、Java语法基础2、Vue进阶3、JavaScript设计模式4、函数式编程和面向对象编程/命令式编程5、具体数学、高等数学6、算法7、英语语法8、Python语法基础9、CSS3 查看详情
vue初体验——用vue实现简易版todolist
...部分，想练一下手熟悉一下基本用法，做了一个简易版的TodoList 效果： 代码：HTML：1<!DOCTYPEhtml>2<html>34<head>5<title>TodoList</title>6<metacharset="utf-8">7&l 查看详情
todolist分别用react与vue的实现与思考
源码查看:React版的TodoList: ReactTodolistVue版的TodoList: VueTodolist 查看详情
vue2.0学习—todolist案例自定义事件（六十）
【Vue2.0学习】—Todolist案例自定义事件（六十） 查看详情
vue练习todolist(代码片段)
目录实现效果vue2VUE3vue3监听watch所有样式实现效果vue2<template><sectionclass="todoapp"><!--头部输入框区域--><headerclass="header"><h1>todos</h1><inputclass= 查看详情
vue框架制作todolist
...步学习了vue之后，我们可以使用vue的基础知识来实现一个todolist列表，主要功能是通过一个输入框来输入，然后将输入的内容同步的显示在页面上，当点击其中的一项时，出现一条下划线。首先列出在实现功能的过程中需要使用... 查看详情
vue3.0实现todolist-实现todolist每个组件需要用到的方法
参考文档参考视频：https://www.imooc.com/learn/1300官方文档查看文档：https://v3.cn.vuejs.org/NavHrader中绑定键盘事件<div><inputplaceholder="请输入任务名称"v-model="value"@keydown.enter="enter"/></div>在set 查看详情
vue3.0实现todolist-实现todolist每个组件需要的数据
参考文档参考视频：https://www.imooc.com/learn/1300官方文档查看文档：https://v3.cn.vuejs.org/Home<template><div><nav-header></nav-header><nav-main></nav-main><nav-footer&g 查看详情
vue.js几行实现的简单的todolist
...玩玩的..下面是看了2天vuejs的官方文档实现了一个简单的todolist.感觉确实方便~！~预览戳这里vuejs官方:http://cn.vuejs.org/<!DOCTYPEhtml><htmlla 查看详情
利用vue实现todolist(代码片段)
<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>TODOLIST</title><metahttp-equiv="X-UA-C 查看详情