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的更多相关文章

  1. 04慕课网《vue.js2.5入门》——Vue-cli开发todolist

    主要文件目录: 文件代码: 根实例,初始化vue: <!--index.html,网站入口页面,和main.jsp组成一套.vue文件,包含--> <!DOCTYPE html> ...

  2. 01慕课网《vue.js2.5入门》——基础知识

    前端框架 Vue.js2.5 2018-05-12 Vue官网:https://cn.vuejs.org/ 基础语法+案例实践+TodoList+Vue-cli构建工具+TodoList Vue基础语 ...

  3. 03慕课网《vue.js2.5入门》——Vue-cli的安装,创建webpack模板项目

    安装Vue-cli 第一种 貌似不可以,然后用了第二种,但是重装系统后,第二种不能用了,用了第一种可以 # 全局安装vue -cli命令npm install --global vue-cli # 创 ...

  4. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  5. 慕课网c#开发轻松入门6-8最终项目

    下面是一些同学的姓名和对应的考试分数,请输出他们的平均分和高于平均分的同学姓名. 运行效果如下: using System; using System.Collections.Generic; usi ...

  6. 02慕课网《进击Node.js基础(一)》——CommonJs标准

    是一套规范管理模块 每个js 为一个模块,多个模块作为一个包 node.js和Couchdb是对其的实现: 不同于jQuery 模块:定义.标识.引用(地址/模块名称) 模块类型: 核心模块http ...

  7. 慕课网jojo老师的Angular课程中遇到的问题

    @Input() private rating:number=0; 一直提示说“Input”不能识别,去网上查了才知道原来是没有导入包,于是把原有的 import { Component,OnInit ...

  8. 耗时近一个月,终于录完了VUE.JS2.0前端视频教程!

    这次课录制的比较辛苦,圣诞节时原本已经快录制完成了,偶然的一次,播放了一下,感觉不满意,好几篇推倒重来,所以今天才结束. vue.js2.0是Vue.JS的最新版本,视频教程还不多,如果你看到了,学到 ...

  9. newbee-mall开源项目被慕课网拿去做课程,然后我毫不知情,这又是什么骚操作?

    万万没想到,这种事情会发生在我身上. 之前写过<开源囧事>系列而且已经写了四篇,四次开源囧事如下: <开源囧事(一)捅娄子了,写个bug被国家信息安全漏洞共享平台抓到了?> & ...

随机推荐

  1. 在TextBrowser显示中,如何让最新的数据永远出现在第一行或者是在窗口的最后显示信息

    这是第一行,但是随着数据的增多,最新的数据就会在末尾显示,然后就看不到了.可以用 main_ui->ReceiveDatatextBrowser->insertPlainText(strD ...

  2. 小程序中 function (res)的理解

    刚看到小程序里面一段代码 success: function (res) { console.log('搜索结果:'); console.log(res); wx.hideToast(); if (r ...

  3. javascript对象定义及创建

    javascript对象 定义 javascript中的对象,可以理解成是一个键值对的集合,键是调用每个值的名称,值可以是基本变量,还可以是函数和对象. 创建方法 第一种方法 通过顶级Object类来 ...

  4. Python爬虫系列 - 初探:爬取旅游评论

    Python爬虫目前是基于requests包,下面是该包的文档,查一些资料还是比较方便. http://docs.python-requests.org/en/master/ POST发送内容格式 爬 ...

  5. 详解 Python3 正则表达式(三)

    上一篇:详解 Python3 正则表达式(二) 本文翻译自:https://docs.python.org/3.4/howto/regex.html 博主对此做了一些批注和修改 ^_^ 模块级别的函数 ...

  6. 适合初学Altium Designer的教学视频

    以下推荐的我都亲自看过,个人感觉确实不错,可以有助于了解流程,以及一些设计规范 首先是凡亿的PCB教学,贵是贵了点,不过也有免费的,讲解的很详细,而且还有专门的群,610359270 http://w ...

  7. Angular 7 版本

    Angular 7 版本 这是跨整个平台的主要版本,更新包括核心框架,Angular Material和CLI. 如何更新到v7 可以访问update.angular.io以获取有关更新应用程序的详细 ...

  8. Pytorch之认识Variable

    Tensor是Pytorch的一个完美组件(可以生成高维数组),但是要构建神经网络还是远远不够的,我们需要能够计算图的Tensor,那就是Variable.Variable是对Tensor的一个封装, ...

  9. React with webpack - part 1

    http://jslog.com/2014/10/02/react-with-webpack-part-1/

  10. 20155305 2016-2017-2 《Java程序设计》实验三 敏捷开发与XP实践

    20155305 2016-2017-2 <Java程序设计>实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤 (一)敏捷开发与XP 1.敏捷开发 敏捷开发 ...