<!--组件的拆分

    1. 定义并使用一个全局组件（任意地方都可以使用）-->

        <div id="root">

            <input type="text" v-model="inputValue">

            <button @click="handleSubmit">提交</button>

            <ul>

                <todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>

            </ul>

        </div>

        <script>

            Vue.component("todo-item",{

                props:['content'],     //传值 Vue 中，父组件到子组件的传值，是通过属性进行传递的。

                template:"<li>{{content}}</li>" //模板

            })

            new Vue({

                el:"#root",

                data:{

                    inputValue="",  

                    list:[]

                },

                methods:{

                    handleSubmit:function() {

                        this.list.push(this.inputValue),

                        this.inputValue=""

                    }

                }

            })

        </script>

</body>

</html>