Vue学习笔记（六）建立一个todolist练习一个简单的todolist为todolist进行组件拆分组件与实例的关系

78 阅读 0 评论 52 点赞

我是靠谱客的博主陶醉水壶，最近开发中收集的这篇文章主要介绍Vue学习笔记（六）建立一个todolist练习一个简单的todolist为todolist进行组件拆分组件与实例的关系，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一个简单的todolist

我们将之前学过的知识进行汇总，写出一个简单的输入列表。

效果如下。可以通过点击按钮为列表添加新的元素。

<body>
    <div id="root">
//添加双向数据绑定
        <input v-model="inputValue"/>
//为按钮添加点击事件
        <button @click="handleClick">Go</button>
//让表格显示数组中的各项内容
        <ul>
            <li v-for="(item,index) of dataList":key="index">{{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                inputValue:"",
                dataList:[],
            },
            methods:{
                handleClick:function(){
                    this.dataList.push(this.inputValue);
                    this.inputValue="";
                }
            }
        })
    </script>
</body>

为todolist进行组件拆分

在使用Vue时，某些内容可以拆分为单个的组件，方便我们重复使用和单独维护。

原则：可复用、可组合

这里我们将列表<li>元素进行组检拆分，将其拆分为单个的可复用组件。

全局组件

使用Vue.component创建全局组件，任何Vue对象都可以直接引用

<body>
    <div id="root">
        <ul>
            <todo-item></todo-item>
        </ul>
    </div>
    <script>
<!-- 使用Vue.component创建全局组件，任何Vue对象都可以直接引用 -->
        Vue.component('todo-item',{
            template:'<li>123</li>'
        });
        new Vue({
            el:'#root',
        })
    </script>
</body>

局部组件

使用var声明局部组件。

对于局部组件，只能通过在Vue对象中进行组件声明后方可调用。

<body>
    <div id="root">
        <ul>
            <todo-item></todo-item>
        </ul>
    </div>
    <script>
//声明局部组件
        var TodoItem={
            template:'<li>item</li>'
        }
        new Vue({
            el:'#root',
//在Vue实例中声明组件
            components:{
                'todo-item':TodoItem,
            }
        })
    </script>
</body>

进行组件拆分后的todoList：

<body>
    <div id="root">
        <input v-model="inputValue"/>
        <button @click="handleClick">Go</button>
        <ul>
            <todo-item
                v-for="(item,index) of dataList"
                    :key=index
//建立content属性保存数据
                    :content=item
            ></todo-item>
        </ul>
        
    </div>
    <script>
        var TodoItem={
//使用props属性引入content
            props:['content'],
            template:'<li>{{content}}</li>'
        }
        new Vue({
            el:'#root',
            data:{
                inputValue:'',
                dataList:[],
            },
            components:{
                'todo-item':TodoItem,
            },
            methods:{
                handleClick:function(){
                    this.dataList.push(this.inputValue);
                    this.inputValue="";
                }
            }
        })
    </script>
</body>