Vue组件学习

html代码

 <div id="app">
        <toitem v-for="item in gor" v-bind:todo="item">

        </toitem>
    </div>

js代码

    //定义了Vue的组件的实例，props来传递数据，父组件的todo作为参数传了进来  父组件中通过bind绑定的
    Vue.component('toitem',{
        props:['todo'],
        template:"<li>{{todo.text}}</li>"
    })
var app=new Vue({
    el:"#app",
    data:{
        gor:[{text:"1111"},{text:"2222"},{text:"3333"}]
    },
})

值得注意的是 组件的定义必须在new Vue之前