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

随机推荐

c3p0封装
配置文件 <?xml version="1.0" encoding="UTF-8"?> <c3p0-config> <defaul ...
ps基本认识
近来中意ui方面学习,从视频中总结了些许notses,希望能够帮到共同喜欢(❤ ω ❤)的友友 ·基础了解位图:由像素组成的图片,把位图无限放大以后看到很多小方格,一个方格代表一个像素矢量图:放大 ...
Role Helper
using System; using Microsoft.Xrm.Sdk; using Microsoft.Crm.Sdk.Messages; using System.Collections.Ge ...
python教程（三）·自定义函数
前面介绍了如何使用函数,这一节我们就来学习怎么创建自己的函数! 自定义函数创建函数非常简单,它使用关键字 "def",下面的代码创建了一个带有一个参数的函数,并使用不同的参数调用 ...
Shrio第二天——认证、授权与其它特性
一.认证——Authentication (即登陆),简单分析之前的HelloWorld的认证: 1. 获取当前的 Subject. 调用 SecurityUtils.getSubject(); 2. ...
20155207第二周myod以及课堂测试
第二周myod以及课堂测试第二周测试5 题目 1.除了main.c外,其他4个模块(add.c sub.c mul.c div.c)的源代码不想给别人,如何制作一个mymath.so共享库?main ...
20155217 2016-2017-2 《Java程序设计》第3周学习总结
20155217 2016-2017-2 <Java程序设计>第3周学习总结教材学习内容总结第四章要产生对象必须先定义类,类定义时使用class关键词,建立实例要使用new关键词. ...
20155229--Java实验四《Android开发基础》
20155229 Java实验四<Android开发基础> 实验内容: 任务一: Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(E ...
1563: [NOI2009]诗人小G
1563: [NOI2009]诗人小G https://lydsy.com/JudgeOnline/problem.php?id=1563 分析: 直接转移f[i]=f[j]+cost(i,j),co ...
AngularJS中Directive指令系列 - 基本用法
参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...