todolist组件（局部组件/全局组件/删除功能）

最新推荐文章于 2022-03-05 00:53:30 发布
最新推荐文章于 2022-03-05 00:53:30 发布
阅读量314 收藏
点赞数
分类专栏： vue.js框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19168521/article/details/80918554
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TodoList组件的删除功能.html</title>
<script type="text/javascript" src="./vue.js" ></script>
</head>
<body>
<!--TodoList组件的删除功能.html-->
<div id="root">
<div>
      <input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!--todolist组件-->
<!--<li v-for="(item, index) of list" :key="index">
{{item}}
</li>-->
<!--全局定义-->
            <todo-item 
            v-for="(item, index) of list" 
            :key="index"
            :content="item"
            :index="index"
@delete="handleDelete"
            >
            </todo-item>
</ul>
</div>
<script>
//todolist组件 全局定义
Vue.component('todo-item',{
props:['content' ,'index'],
//每一个veu实例 都是一个组件  每个组件都是一个vue 实例
template : '<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
                 this.$emit('delete', this.index)
},
}
})
        //局部组件
//       var TodoItem = {
//        template:'<li>item</li>'
//       }
new Vue({
el:"#root",
// //如果你想在其他veu实例里边用这个局部组件 必选通过components 对这个局部组件进行注册
// components:{
// //通过todo-item这个标签来使用
// 'todo-item':TodoItem  
// },
      data:{
      inputValue:'',
      list:[]
      },
      methods:{
      handleSubmit:function(){
      this.list.push(this.inputValue),
      this.inputValue=''// 清空inputValue内容
      },
      handleDelete:function(index){
this.list.splice(index, 1)
}
      }
})
</script>
</body>
</html>
Akita·wang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue入门学习笔记：TodoList（八）：todolist组件拆分
...
04-14 1400
目录： Vue入门学习：TodoList（一）：HelloWorld Vue入门学习：TodoList（二）：挂载点、模板、实例 Vue入门学习：TodoList（三）：实例中的数据、事件和方法 Vue入门学习：TodoList（四）：属性绑定和双向数据绑定 Vue入门学习：TodoList（五）：计算属性和侦听器 Vue入门学习：TodoList（六）：v-if, v-show, v-for指令 Vue入门学习：TodoList（七）：todolist功能开发 Vue入门学习：TodoList（八）：t.
【Vue】TodoList实现
w1405720461的博客
11-08 266
vue2实现todolist，倒计时功能
实现一个todoList组件
clhdtzhh的博客
03-05 582
图片展示： 功能：添加，删除，按类展示，全选 要点： 1、已勾选的文字画横线效果是根据数据源的done（完成与否）属性，动态绑定class实现的 2、列表展示的是原todos过滤之后的数据，实现删除后就动态显示还存在的数据 3、底部的 All Active Complete 按钮去切换过滤文件的key选择要显示的过滤好的数据，默认就是所有 4、点击文字出现input框通过 v-show控制，绑定鼠标事件把value传出来更改原数据 5、全选实现方式就是把原数据的所有done属性改成tru.
todolist 删除功能
purple_lumpy的博客
07-22 801
思路： 在子组件的click 事件中，删除父组件中的list项中的某一数值。 即子组件与父组件通信。此时，需要“发布订阅模式”来做这件事情。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;todolist&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;
组件传值--Todolist.html
08-21
使用Vue.js做一个简单的列表工具。TODOlist 。是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue中父子组件通讯之todolist组件功能开发
08-27
主要介绍了Vue中父子组件通讯——todolist组件功能开发的相关知识,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue实现todolist功能、todolist组件拆分及todolist的删除功能
12-29
•简单todolist功能的实现 用户点击提交按钮时，将input框的内容显示在下方的list中，同时清空list中内容。 <body> <input v-model=inputValue/> <button @click=submit>submit</button...
使用Vue父子组件通信实现todolist的功能示例代码
10-17
主要给大家介绍了关于如何使用Vue父子组件通信实现todolist的功能的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
React版本的Todolist案例源码-组件化
04-19
内有功能：添加、删除、全选全不选、选中数量、选中删除 React Todolist组件化案例是一个使用React框架开发的待办事项列表应用程序。该应用程序将待办事项列表分解为多个可重用的组件，包括添加待办事项、显示待办...
JavaRDDLike.mapPartitions方法
lzf的博客
01-05 1431
spark java api调用mapPartitions方法的例子如下： package com.dsinpractice.spark.samples.core; import org.apache.spark.SparkConf; import org.apache.spark.api.java.JavaRDD; import org.apache.spark.api.java.Java...
todo-angular：第一个学习Angular的应用
02-11
你好世界 该项目是使用版本11.1.4生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建立 运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。 运行单元测试 运行ng test通过执行单元测试。 运行端到端测试 运行ng e2e以通过执行端到端测试。 进一步的帮助 要获得有关Angular CLI的更多帮助，请使用ng help或查看“ 页面。
初识 Vue（04）---(组件化改造TodoList)
姜皓的博客
07-07 1234
组件化改造TodoList 原始代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;TodoList&lt;/title&gt; &lt;script src = './vue.js'
vue全局组件和局部组件的写法
热门推荐
一生为追梦的博客
04-18 1万+
vue组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。全局组件引入写法：在项目的main.js中：import Vue from 'vue'; import MyComponent from '@/components/MyComponent.vue'; // 导入自己写的组件文件 Vue.use(MyComponent); /...
React经典案列todolist 以及组件的拆分
weixin_44695402的博客
10-23 160
React todoList 没拆分时代码 import React from 'react' class TodoList extends React.Component{ // 固定写法 constructor(props){ super(props) this.state={ username:'', ...
组件化实现简单的toDoList
donglingjiu的博客
09-02 672
组件化 将一个页面根据功能分解成多块，每一块定义成一个组件，页面分别引入这些组件。 如此一来 修改维护页面功能的时候 直接定位到相应组件文件。 每一个组件其实就是一个Vue实例 组件化其实就是实例化 ，页面由多个Vue实例组成 全局组件 Vue.component Vue提供的 创建全局组件 v-bind 向子组件传入绑...
使用组件改造TodoLIst
VVVZCS的博客
09-01 249
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Hello World&lt;/title&gt; &lt;script src="vue.js" type="text/java
vue学习(五) 通过局部组件实现todolist的点击删除
提醒幺儿吃药喝水健康重要
04-22 138
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
Vue之ToDoList实战
wu__di的博客
02-08 1万+
之前的文章windows下搭建vue开发环境，我们已经搭建好了vue的环境，并且写了Vue系列之WebPack与Eslint，对vue项目的整体情况有了了解，这篇文章我们就来练习一下vue，实现ToDoList项目。 以下是我们的项目目录结构： 请点击此处输入图片描述 在这个ToDoList当中，涉及到知识点包括以下内容: 1、创建Vue实例： 在main
jq增删改查
weixin_49373330的博客
08-22 257
$(function() { // alert(11); // 1. 按下回车 把完整数据 存储到本地存储里面 // 存储的数据格式 var todolist = [{title: “xxx”, done: false}] load(); KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲title").on("key…(this).val() === “”) { alert(“请输入您要的操作”); } else { // 先读取
react todolist组件化案例
最新发布
06-06
React Todolist组件化案例是一个使用React框架开发的待办事项列表应用程序。该应用程序将待办事项列表分解为多个可重用的组件，包括添加待办事项、显示待办事项列表和标记已完成的待办事项等组件。通过组件化的方式...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值