vue3组件概念初识，component

一、示例

const app = Vue.createApp({ 
        data(){
            return{
                inputValue:'',
                list:[]

            }
        },
        methods:{
            handelAddItem(){
                this.list.push(this.inputValue);
                this.inputValue = "";
            }
        },
        template:
            `div>
                <input v-model="inputValue"/>
                <button v-on:click="handelAddItem" v-bind:title="inputValue">增加</button>
            </div>
            <ul>
                <todo-item v-for="(item,index) in list" v-bind:content="item" v-bind:index="index"/>
                
            </ul>`
    })
    app.component('todo-item',{
        props:["content","index"],
        template:`
            <li>{{index}}--{{content}}</li>
        `
    })
    app.mount('#root')

二、逐行解析