02慕课网《vue.js2.5入门》——Vue中的组件,实现todolist

TodoList功能开发

例子:输入字符,在列表中显示;

由于有v-for属性,

  • 不会被渲染,它已经和数据绑定在一起,有数据来决定

    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>

    无数据时:

     02慕课网《vue.js2.5入门》——Vue中的组件,实现todolist_第1张图片

    有数据时:

     02慕课网《vue.js2.5入门》——Vue中的组件,实现todolist_第2张图片    02慕课网《vue.js2.5入门》——Vue中的组件,实现todolist_第3张图片

     

     

    TodoList中组件拆分

    组件:页面上的某一部分,将大型网页拆分成几个部分

    定义组件:

    全局:Vue.component('todo-list(组件名称)',{   });只用组件

    局部:定义var+声明componts

    组件之间的通信:父子组件之间

     

     组件实现的例子:将

  • 标签拆成一个组件

    (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: '
  • {{content}}
  • ' }); // 定义局部组件 var TodoItem = { template: '
  • 局部组件
  • ' } // vue实例 new Vue({ el: "#root", data: { inputValue: '', list: [] }, // 声明局部组件 components: { 'todo-itemonly': TodoItem }, methods: { handleSubmit: function () { this.list.push(this.inputValue); this.inputValue = ''; } } }) script>

            02慕课网《vue.js2.5入门》——Vue中的组件,实现todolist_第4张图片

    组件与实例之间的关系

     每个组件都是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: '
  • {{content}} {{index}}
  • ', 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>

     

  • 转载于:https://www.cnblogs.com/-beauTiFul/p/9032077.html

    你可能感兴趣的:(02慕课网《vue.js2.5入门》——Vue中的组件,实现todolist)