todolist 组件拆分

最新推荐文章于 2023-04-14 01:00:00 发布
最新推荐文章于 2023-04-14 01:00:00 发布
阅读量202 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/purple_lumpy/article/details/81158737
版权

组件的拆分

1. 定义并使用一个全局组件（任意地方都可以使用）

<!DOCTYPE html>
<html>
<head>
	<title>todolist</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div>
			<input v-model="inputValue" />
			<button @click="handleclick">提交</button>
		</div>
		<ul>
			<!-- 使用全局组件 -->
			<todo-list></todo-list>
		</ul>
	</div>

	<script >
		// 全局组件
		Vue.component('todo-list',{
			template: '<li>item</li>'
		})

		new Vue({
			el: "#root",
			data: {
				inputValue: "",
				list: []
			},
			methods: {
				handleclick: function(){
					this.list.push(this.inputValue);
					this.inputValue = '';
				}
			}
		})
	</script>
</body>
</html>

 

2. 定义并使用一个局部组件

<!DOCTYPE html>
<html>
<head>
	<title>todolist</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div>
			<input v-model="inputValue" />
			<button @click="handleclick">提交</button>
		</div>
		<ul>
			<!-- 使用全局组件 -->
			<todo-list></todo-list>
		</ul>
	</div>

	<script >
		// 全局组件
		// Vue.component('todo-list',{
		// 	template: '<li>item</li>'
		// })

		// 局部组件
		var TodoItem = {
			template: '<li>item</li>'
		}

		new Vue({
			el: "#root",
			// 局部组件
			components: {
				'todo-list': TodoItem
			},
			data: {
				inputValue: "",
				list: []
			},
			methods: {
				handleclick: function(){
					this.list.push(this.inputValue);
					this.inputValue = '';
				}
			}
		})
	</script>
</body>
</html>

3. 往组件中传值

 通过属性来进行值的传递。

Vue 中，父组件到子组件的传值，是通过属性进行传递的。

<!DOCTYPE html>
<html>
<head>
	<title>todolist</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div>
			<input v-model="inputValue" />
			<button @click="handleclick">提交</button>
		</div>
		<ul>
			<!-- 使用全局组件 -->
			<todo-list 
				v-for="(item,index) of list" 
				:key="index"
				:content="item">
			</todo-list>
		</ul>
	</div>

	<script >
		// 全局组件
		Vue.component('todo-list',{
			props: ['content'],
			template: '<li>{{content}}</li>'
		})


		new Vue({
			el: "#root",
			data: {
				inputValue: "",
				list: []
			},
			methods: {
				handleclick: function(){
					this.list.push(this.inputValue);
					this.inputValue = '';
				}
			}
		})
	</script>
</body>
</html>

 

Vue 组件与实例的关系

如上代码： new Vue(...) 是vue的一个实例，Vue.component(...)是vue的一个组件。

每一个Vue 的组件，也是Vue 的一个实例。每一个Vue 实例，也是一个Vue 组件。

Vue 是由许许多多实例构成的. 

每个组件内，可以有methods 属性。

每个vue 组件，可以有props，template，methods等构成。

<!DOCTYPE html>
<html>
<head>
	<title>todolist</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div>
			<input v-model="inputValue" />
			<button @click="handleclick">提交</button>
		</div>
		<ul>
			<!-- 使用全局组件 -->
			<todo-list 
				v-for="(item,index) of list" 
				:key="index"
				:content="item">
			</todo-list>
		</ul>
	</div>

	<script >
		// 全局组件
		Vue.component('todo-list',{
			props: ['content'],
			template: '<li @click="handleclick">{{content}}</li>',
			methods: {
				handleclick: function(){
					alert('clicked');
				}
			}
		})


		new Vue({
			el: "#root",
			data: {
				inputValue: "",
				list: []
			},
			methods: {
				handleclick: function(){
					this.list.push(this.inputValue);
					this.inputValue = '';
				}
			}
		})
	</script>
</body>
</html>

 

purple_lumpy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现todolist功能、todolist组件拆分及todolist的删除功能
12-29
•简单todolist功能的实现 用户点击提交按钮时，将input框的内容显示在下方的list中，同时清空list中内容。 <body> <input v-model=inputValue/> <button @click=submit>submit</button...
Vue入门学习笔记：TodoList（八）：todolist组件拆分
...
04-14 1411
目录： 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.
第十九章 案例TodoList之组件拆分
天界程序员的博客
04-14 1096
学会如何拆分静态组件
将todolist 进行组件拆分
purple_lumpy的博客
12-23 304
我们将list 拆分为一个子组件。 在src 下新建一个文件 TodoItem.js 。初始化一下，如下。 import React, { Component } from 'react' class TodoItem extends Component { render() { return ( &lt;div&gt;todo item&lt;/div&gt;...
vue.js入门2-组件-todolist-组件原理、拆分
余光的博客
08-24 782
大家好~在写完上一篇博客后，我回想了一下，发现印象又加深，但是这还不够，我们需要将它们熟练的运用起来，本来博客开始，先写一个最简单的todolist，以回忆上一篇文章的内容，我们共勉，加油~ 一、todolist简单功能开发 先写好最基本的框架： &amp;amp;lt;div id=&amp;quot;root&amp;quot;&amp;amp;gt; &amp;amp;lt;div&amp;amp;gt;
todolist组件拆分
xuxinwen32的博客
01-28 180
&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="../2.5.20-vue.js"&
Vue中父子组件通讯之todolist组件功能开发
08-27
本文将深入探讨如何在Vue中实现一个todolist组件，以及如何进行组件拆分和数据传递。 首先，我们来看一个简单的todolist功能开发示例： ```html 提交 (item, index ) of list" :key="index">{{item}} ...
Vuejs 实现简易 todoList 功能 与 组件实例代码
10-18
在本例中，我们将 todoList 的 `<li>` 元素拆分为一个名为 `todo-item` 的组件。全局组件可以在应用的任何地方使用，而局部组件则只在其被注册的 Vue 实例内有效。 ```javascript // 全局组件 Vue.component('todo-...
todolist.zip
09-13
React的核心概念是组件，它允许我们将UI拆分成独立、可复用的部分，每个部分都有自己的逻辑和视图。在这个`TodoList`应用中，我们可以预见到包含`TodoInput`（用于输入新任务）、`TodoList`（显示所有任务）和`...
todo-list 个人练习
weixin_30670965的博客
11-30 89
总结： a:父组件向子组件传值 用 props b:子组件向父组件传值 用 this.$emit('handle'，arg) 部分页面代码： 1、app.vue代码 <template> <div id="app"> <img src="./assets/logo.png"> <div class="box"> ...
使用Rreact开发Todos应用附详细过程
wenb1bai的博客
07-21 388
在使用React来开发之前首先了解一下React是什么? React官方给出的解释是（A  JavaScript  library  for  building  user  interfaces）,React是一个构建∪I库的库，帮助我们更方便地构建前端页面,它可以将我们的页面组件化,方便开发和维护,可以让我们更方便地复用组件。 React 的设计初衷可能就是为了组件复用，举个简单的例子 ...
Vue组件开发Todolist、Todolist组件拆分
qq_42363819的博客
10-31 244
Todolist组件开发 &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="vue.js&quot
TodoList开发
jianjian_5201314的博客
10-25 363
通过制作功能模块，可以复习基础知识，同时可以延展出新的知识点。 1.首先写最简单的TodoList结构 希望输入内容，点击提交，提交项能显示在列表之中 因为列表为空，所以显示内容为空。 思路？ 接着当用户点击提交按钮的时候，让它显示在列表之中。以前的操作需要操作dom,现在是在写数据。 只需要在用户点击提交的时候，把input框里的内容，放入list这个数组里面。数组有内容，li标签就会自动的循环，把数组的内容显示出来。 ...
vue组件： todolist功能开发，todolist组件拆分，todoLidt删除
willard_cui的博客
08-25 721
通过todolist案例学习vue中组件的概念和使用‘ 1、 todolist功能开发 使用v-model、v-on（@）、v-for指令实现todolist功能 实例： &lt;div id="root"&gt; &lt;input type="text" v-model:value="inputValue"&gt; &lt;button @click=...
Vue实现todoList（任务计划列表）
热门推荐
冰雪为融的博客
07-14 3万+
大致功能：1、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加）2、动态计算有几个未完成的任务3、点击复选框，实现选中或不选中效果（即完成或未完成）4、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表5、双击列表中的内容，可对列表内容进行编辑编辑完成后，按enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑如果想要取消修改，按esc键即可取...
Vue入门学习笔记：TodoList（十）：实现todolist的删除功能
...
04-14 1921
目录： 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.
Angular2入门教程-2
weixin_34116110的博客
10-27 297
2019独角兽企业重金招聘Python工程师标准>>> ...
基于todolist功能——对组件进行拆分(组件与实例的关系）
weixin_44066534的博客
07-21 223
todolist功能开发 下述例子实现功能：在input框输入内容的时候，通过点击提交按钮将内容发布在列表之中 页面渲染结果 代码解析： 通过v-model对数据进行双向绑定，这样输入框里每一次输入的内容都会被存到data的inputValue值当中。 通过v-on：click在提交按钮上绑定了一个名为Submit的方法函数，在每一次点击提交按钮时，Submit方法都会将inputValue的值通过push的方法添加到list中，之后再把inputValue中的值给清空。 最后 ul列表通过v-fo
vue中实现简单的todolist功能、todolist组件拆分以及todolist的删除功能
weixin_42645212的博客
07-27 793
简单todolist功能的实现  用户点击提交按钮时，将input框的内容显示在下方的list中，同时清空list中内容。  &lt;body&gt; &lt;div id="root"&gt; &lt;div&gt; &lt;input v-model="inputValue"/&gt; &lt;button @clic
react todolist组件化案例
最新发布
06-06
React Todolist组件化案例是一个使用React框架开发的待办事项列表应用程序。该应用程序将待办事项列表分解为多个可重用的组件，包括添加待办事项、显示待办事项列表和标记已完成的待办事项等组件。通过组件化的方式...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值