Vue 시작하기: Todolist 예제 글로벌 구성 요소 및 로컬 구성 요소 시작하기

<div id="root">
        <div>
            <input v-model="inputValue" />
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>

            <todo-item v-bind:content="item" v-for="item in list"></todo-item>
        </ul>
    </div>

    <script>
        Vue.component("TodoItem",{
            props:[&#39;content&#39;],
            template:"<li>{{content}}</li>"
        })


        new Vue({
            el:"#root", 
            data:{
                inputValue:&#39;&#39;,
                list:[]
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = &#39;&#39;  //每次提交后清空
                }
            }
        })
    </script>

Vue.component("TodoItem",{
            props:['content'],
            template:"<li>{{content}}</li>"
        })

todo-item v-bind:content="item" v-for="item in list"></todo-item>