02慕课网《vue.js2.5入门》——Vue中的组件，实现todolist
TodoList功能开发
例子：输入字符，在列表中显示；
由于有v-for属性，<li>不会被渲染，它已经和数据绑定在一起，有数据来决定
input和button上都有事件监听器，input是通过v-model对数据进行双向绑定；button是监听click事件绑定
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
</div>
<script>
// vue实例
new Vue({
el: "#root",
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function () {
this.list.push(this.inputValue);
this.inputValue = '';
}
}
})
</script>
</body>
无数据时：
有数据时：
TodoList中组件拆分
组件：页面上的某一部分，将大型网页拆分成几个部分
定义组件：
全局：Vue.component('todo-list(组件名称)',{ })；只用组件<todo-list></todo-list>
局部：定义var+声明componts
组件之间的通信：父子组件之间
组件实现的例子：将<li>标签拆成一个组件
(item,index) of list；固定写法 (内容，下标) of 数组 ，和item，index名称无关
父组件Vue根实例，通过数据list的改变，调用子组件todo-itemfull，并且通过属性:content 来传值，子组件li标签的渲染任然通过数据list来决定，实现父组件向子组件之间的通信
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
<ul>
<!--使用全局组件-->
<todo-itemfull v-for="(item,index) of list" :key="index" :content="item"></todo-itemfull> </ul>
<ul>
<!--使用局部组件-->
<todo-itemonly></todo-itemonly> </ul>
</div>
</div>
<script>
// 定义全局组件
Vue.component('todo-itemfull', {
// 接受名为content的属性
props:['content'],
// 组件模板
template: '<li>{{content}}</li>'
});
// 定义局部组件
var TodoItem = {
template: '<li>局部组件</li>'
}
// vue实例
new Vue({
el: "#root",
data: {
inputValue: '',
list: []
},
// 声明局部组件
components: {
'todo-itemonly': TodoItem
},
methods: {
handleSubmit: function () {
this.list.push(this.inputValue);
this.inputValue = '';
}
}
})
</script>
组件与实例之间的关系
每个组件都是Vue的一个实例
Vue项目就是由一个个实例构建成的
每个实例或者组件都有：props、data、template、methods等属性
根实例的模板若没有定义，则挂载点中的内容就是它的模板
实现TodoList的删除功能
子组件显示与否，取决于父组件的list；实现子组件向父组件之间的通信
- 父组件通过属性向子组件传递数据；通过数据渲染子组件的模板，数据list为空时，页面中没有子组件的内容，
- $emit子组件向外部进行发布delet事件，并且带上参数
- 父组件在子组件创建时，绑定监听delete事件
- 监听到子组件的delete删除事件，修改数据list
- 数据list改变，子组件的渲染内容发生改变
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
<ul>
<!--使用全局组件-->
<todo-itemfull
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-itemfull>
</ul>
</div>
</div>
<script>
// 定义全局组件
Vue.component('todo-itemfull', {
// 接受名为content的属性
props: ['content', 'index'],
// 组件模板
template: '<li @click="handleClick">{{content}} {{index}} </li>',
methods: {
handleClick: function () {
// $emit子组件向外部进行发布
this.$emit('delete', this.index,this.content);
},
handleDelete:function(){
return '子组件方法';
}
}
});
// vue实例
new Vue({
el: "#root",
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function () {
this.list.push(this.inputValue);
this.inputValue = '';
},
handleDelete: function (index,content) {
alert(content);
this.list.splice(index);
}
}
})
</script>
</body>
02慕课网《vue.js2.5入门》——Vue中的组件，实现todolist的更多相关文章
- 04慕课网《vue.js2.5入门》——Vue-cli开发todolist
主要文件目录: 文件代码: 根实例,初始化vue: <!--index.html,网站入口页面,和main.jsp组成一套.vue文件,包含--> <!DOCTYPE html> ...
- 01慕课网《vue.js2.5入门》——基础知识
前端框架 Vue.js2.5 2018-05-12 Vue官网:https://cn.vuejs.org/ 基础语法+案例实践+TodoList+Vue-cli构建工具+TodoList Vue基础语 ...
- 03慕课网《vue.js2.5入门》——Vue-cli的安装，创建webpack模板项目
安装Vue-cli 第一种 貌似不可以,然后用了第二种,但是重装系统后,第二种不能用了,用了第一种可以 # 全局安装vue -cli命令npm install --global vue-cli # 创 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- 慕课网c#开发轻松入门6-8最终项目
下面是一些同学的姓名和对应的考试分数,请输出他们的平均分和高于平均分的同学姓名. 运行效果如下: using System; using System.Collections.Generic; usi ...
- 02慕课网《进击Node.js基础（一）》——CommonJs标准
是一套规范管理模块 每个js 为一个模块,多个模块作为一个包 node.js和Couchdb是对其的实现: 不同于jQuery 模块:定义.标识.引用(地址/模块名称) 模块类型: 核心模块http ...
- 慕课网jojo老师的Angular课程中遇到的问题
@Input() private rating:number=0; 一直提示说“Input”不能识别,去网上查了才知道原来是没有导入包,于是把原有的 import { Component,OnInit ...
- 耗时近一个月，终于录完了VUE.JS2.0前端视频教程！
这次课录制的比较辛苦,圣诞节时原本已经快录制完成了,偶然的一次,播放了一下,感觉不满意,好几篇推倒重来,所以今天才结束. vue.js2.0是Vue.JS的最新版本,视频教程还不多,如果你看到了,学到 ...
- newbee-mall开源项目被慕课网拿去做课程，然后我毫不知情，这又是什么骚操作？
万万没想到,这种事情会发生在我身上. 之前写过<开源囧事>系列而且已经写了四篇,四次开源囧事如下: <开源囧事(一)捅娄子了,写个bug被国家信息安全漏洞共享平台抓到了?> & ...
随机推荐
- 各种快速幂(qaq)
今天分享下各种快速幂(有点坑),首先说一下快速幂的原理, 以下以求a的b次方来介绍 [1] 把b转换成二进制数. 该二进制数第i位的权为 例如 11的二进制是1011 11 = 2³×1 + 2 ...
- mysql面试常见题目
第一题 某班学生和考试成绩信息如下表Student所示: Student表 ID SName Mark 1 Jack 90 2 Marry 96 3 Rose 88 4 Bob 86 5 John 8 ...
- linux介绍及基本命令
linux简介 Linux内核最初只是由芬兰人李纳斯·托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的. Linux是一套免费使用和自由传播的类Unix操作系统,是一个基 ...
- 【二】Spark 核心
spark 核心 spark core RDD创建 >>> RDD转换 >>> RDD缓存 >>> RDD行动 >>> RDD输 ...
- 详解 Python3 正则表达式（三）
上一篇:详解 Python3 正则表达式(二) 本文翻译自:https://docs.python.org/3.4/howto/regex.html 博主对此做了一些批注和修改 ^_^ 模块级别的函数 ...
- C++ —— 非类中使用const定义常量的初始化，以及#define和typedef的区别
总结一下在非类中使用const关键字定义常量时的初始化问题,亲测VS2015.顺便记录#define宏和typedef的区别. 1 首先对const声明的常量的初始化做简单小结: , w2 = , w ...
- flink 根据时间消费kafka
经常遇到这样的场景,13点-14点的时候flink程序发生了故障,或者集群崩溃,导致实时程序挂掉1小时,程序恢复的时候想把程序倒回13点或者更前,重新消费kafka中的数据. 下面的代码就是根据指定时 ...
- 20155233刘高乐 第二周课堂实践以及MyOD
1. 除了main.c外,其他4个模块(add.c sub.c mul.c div.c)的源代码不想给别人,如何制作一个mymath.so共享库?main.c如何使用mymath.so? 2. 提交共 ...
- Makefile与Myod
Makefile的引入 课堂测试总结 初识Makefile target ... : prerequisites ... command ... ... target也就是一个目标文件,可以是Obje ...
- 对PostgreSQL数据库的hstore类型建立GisT索引的实验
磨砺技术珠矶,践行数据之道,追求卓越价值回到上一级页面:PostgreSQL基础知识与基本操作索引页 回到顶级页面:PostgreSQL索引页[作者 高健@博客园 luckyjackgao@g ...