Todolist组件
一、什么是组件？
组件是可复用的 Vue 实例。是页面上的某一部分。
大型项目可以拆分成很多小组件。
二、如何定义(创建)组件？
- 全局组件：通过Vue.component方法创建的组件是全局组件。其中'todo-list'是这个组件的名字。
- 局部组件：其他vue实例若要使用这个组件，必须通过components对这个局部组件进行一个注册，
例子：实现把用户在input框中输入的内容输出到li里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="./vue.js"></script>
</head>
<body> <div id="root">
<input v-model="inputValue">
<button @click="handleSubmit">提交</button>
<ul>
<todo-item v-for="(item,index) in list" :key="index" :content="item" >
<!-- 给todo-item传参，通过属性的形式传参 :content = "item" -->
</todo-item>
</ul>
</div> <script>
// 全局组件
Vue.component('todo-item',{
props:['content'],
// 在该组件中定义一个props属性（值可以是一个数组）。意思是该组件接收从外部传递进来的一个名字是content的属性。
// 该组件定义了接收，一旦外部进行传递后，该组件即可直接使用传递过来的参数了。
template:'<li>{{content}}</li>'
// 组件不能直接使用content，如果想直接使用，该组件必须接收这个属性，用props接收
})
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue = ''
}
}
}) </script> </body>
</html>
效果图：
三、组件与实例的关系
- 每一个vue组件都是一个vue实例。组件有props、data、template等属性，methods等方法。
- vue实例也是vue组件。
- 一个vue项目，由千千万万个vue实例所组成。
四、组件与组件间如何通信？
- 父组件向子组件传值，是通过属性的形式，进行值的传递的。
- 子组件显示与否，取决于父组件list这个数据。所以，若想实现子组件的删除，必须在父组件上把子组件对应的数据给删除掉；当点击子组件时，需要让子组件和父组件通信。子组件要告诉父组件：把我的条目数据删除掉。
- 在vue里，要想实现父组件和子组件的通信，需通过一个发布订阅模式来实现。
例：删除TodoItem功能，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="./vue.js"></script>
</head>
<body> <div id="root">
<input v-model="inputValue">
<button @click="handleSubmit">提交</button>
<ul>
<todo-item v-for="(item,index) in list" :key="index"
:content="item" :index="index" @delete="handleDelete"
>
<!-- 给todo-item传参，通过属性的形式传参 :content = "item" -->
<!-- 父组件可以监听到子组件向外触发的这个delete事件，并执行自己的handleDelete方法。-->
</todo-item>
</ul>
</div> <script>
// 全局组件
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete', this.index)
//当点击子组件时，需通知父组件，调动this.$emit方法，触发一个delete自定义事件--delete，传递一个值--this.index.
//子组件向外部进行一个发布
}
}
})
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue = ''
},
handleDelete:function(index){
this.list.splice(index, 1)
}
}
}) </script> </body>
</html>
- 通过父组件向子组件传值的形式，就做好了删除TodoItem这个功能。
Todolist组件的更多相关文章
- Vue学习之todolist组件拆分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中父子组件通讯——组件todolist
一.todolist功能开发 <div id="root"> <div> <input type="text" v-model=& ...
- Vuejs 实现简易 todoList 功能 与 组件
todoList 结合之前 Vuejs 基础与语法 使用 v-model 双向绑定 input 输入内容与数据 data 使用 @click 和 methods 关联事件 使用 v-for 进行数据循 ...
- vue入门——组件基础todolist
1. 以下是 todolist 的例子,没有用到组件:下面的3 会通过组件拆分todolist <!DOCTYPE html> <html lang="en"&g ...
- 使用React并做一个简单的to-do-list
1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...
- 详解 Node + Redux + MongoDB 实现 Todolist
前言 为什么要使用 Redux? 组件化的开发思想解放了繁琐低效的 DOM 操作,以 React 来说,一切皆为状态,通过状态可以控制视图的变化,然后随着应用项目的规模的不断扩大和应用功能的不断丰富, ...
- 从性能角度看react组件拆分的重要性
React是一个UI层面的库,它采用虚拟DOM技术减少Javascript与真正DOM的交互,提升了前端性能:采用单向数据流机制,父组件通过props将数据传递给子组件,这样让数据流向一目了然.一旦组 ...
- 迈向angularjs2系列(3):组件详解
一: 以组件开发一个to-do list应用 todo组件分为导入.接口定义.顶层组件.控制器.启动5个部分. app.ts: //导入 import {Component} from '@angul ...
- 如何优雅的设计 React 组件
作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...
随机推荐
- css定位(后盾网)
1.绝对定位:脱离了文档流,如果设置了left和top,位置相对浏览器来定位,如果不设值top和left,还是按照原来的文档流的位置站位,位置移走后,原来的空间位被其他元素占据 ***应用:一般来说我 ...
- springmvc使用步骤
1.导包 2.在web.xml文件中配置前端控制器dispatchServlet 3.创建springmvc配置文件springmvc.xml 4.编写controller 5.在springmvc中 ...
- 支持向量机（SVM）算法分析——周志华的西瓜书学习
1.线性可分 对于一个数据集: 如果存在一个超平面X能够将D中的正负样本精确地划分到S的两侧,超平面如下: 那么数据集D就是线性可分的,否则,不可分. w称为法向量,决定了超平面的方向:b为位移量,决 ...
- RISC与CISCCPU构架
RISC 精简指令集 CISC复杂指令集 CISC架构的代表: x86, C51 RISC架构的代码:arm, mips,powerpc, avr, pic 指令集的区别 首先从字面上理解就能知道, ...
- ElasticSearch概述
ElasticSearch 产生背景 Lucene 定义 ElasticSearch 定义 ElasticSearch vs Lucene ElasticSearch vs Solr Elastic ...
- Service 和 IntentService的区别；
Srevice不是在子线程,在Srevice中做耗时操作一样ANR,然后我们就会用到IntentService,IntentSrevice不但擅长做耗时操作,还有一个特点,用完即走: 在Srevice ...
- oracle start with connect by prior 递归查询用法
start with 子句:遍历起始条件,有个小技巧,如果要查父结点,这里可以用子结点的列,反之亦然. connect by 子句:连接条件.关键词prior,prior跟父节点列parentid放在 ...
- 【3-30】document获取、事件、标记样式
一.获取标记对象 1.id选择:document.getelementbyid("id名")---根据id找单个元素 2.class选择:document.getelementsb ...
- hive命令的执行方式
1.通过cli直接执行 2.hive -e "hql" 如:[root@host ~]# hive -e "use gamedw;show tables" [r ...
- N的多次方Python实现
N的多次方描述编写一个程序,计算输入数字N的0次方到5次方结果,并依次输出这6个结果,输出结果间用空格分隔.其中:N是一个整数或浮点数.print()函数可以同时输出多个信息,采用如下方法可以使用空格 ...