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:  <!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被国家信息安全漏洞共享平台抓到了?> & ...

随机推荐

基于JQ的自定义弹窗组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
利用node中的内置模块fs实现对简单文件的读取拷贝创建等功能
1.文件的读取我们想要根据如下一种目录生成一种json数据代码如下 //此函苏是对目录进行读取的 //我们想要生成的是一个根据目录所创建的json数据 const fs = require(&qu ...
PhpStorm 全局查找的快捷键
本页面查找 : ctrl + f 全局查找 : ctrl + shift + f 自己定义 :文件 -> 设置 -> 快捷键 -> 修改
Delphi写的DLL，OCX中多线程一个同步问题
Delphi写的DLL,OCX中如果使用了TThread.Synchronze(Proc),可能导致线程死锁,原因是无法唤醒EXE中主线程, Synchronze并不会进入EXE主线程消息队列. 下面 ...
STM32 Startup**.s文件中使用的 __main C函数入口
代码: ; Reset handler Reset_Handler PROC EXPORT Reset_Handler [WEAK] IMPORT SystemInit IMPORT __main L ...
每天一个Linux命令之mkdir
Linux mkdir命令 mkdir [-p] filename 用于创建一个空目录如果该目录下有相同名称的目录那么会报错 apple@apple-Pro  ~/Documents/java_d ...
js 修改字符串中某些字符的样式
var str = 'abcdefghijklmnobqrstuvwxyz'; function HightLight(e){ var reg = new RegExp(e, 'g') str = s ...
20155234 2006-2007-2 《Java程序设计》第4周学习总结
20155234 2006-2007-2 <Java程序设计>第4周学习总结教材学习内容总结为了避免重复的行为定义使用继承. 要学会如何正确判断使用继承的时机以及继承之后如何活用多态. ...
树链剖分学习&BZOJ1036
题目传送门树链剖分,计算机术语,指一种对树进行划分的算法,它先通过轻重边剖分将树分为多条链,保证每个点属于且只属于一条链,然后再通过数据结构(树状数组.SBT.SPLAY.线段树等)来维护每一条链. ...
SRM 653 CountryGroupHard
SRM 653 CountryGroupHard 题意: n 个人坐成一排,同一个国家的人坐在一起,记者问了一些人他们的国家有多少人,他们都回答了正确的信息.已知m条信息,每条信息形如第 pi 个位置 ...