Vue.js学习-组件注册与使用

Vue.js学习文档 地址：https://cn.vuejs.org/v2/guide/

关于自定义组件注册：

建议将<script></script>放在body标签之后

HTML：

   　　　<p>
            看不到自己注册的组件todo-item：
            <todo-item></todo-item>
        </p>
        <p>上面，注册组件失败，
            因为：使用这个组件的p元素Vue并不认识.
　　　　　　　其实只要Vue中el通过id找到p就可以，能被识别
            下面的成功了</p>
        <p id="todo-item-example">
            <todo-item></todo-item>
        </p>

JS：

　　　　　　　Vue.component('todo-item',{
                template: '<span>这是一个待办项</span>'
            })

            new Vue({
                el:'#todo-item-example'
            })

显然，这个组件设计不太好，它不能灵活的变换内容，另一个例子（来自学习文档）：

HTML：

　　　　 <div id="app7">
            <todo-item1
                v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key="item.id">
            </todo-item1>
        </div>

JS：

　　　　 Vue.component('todo-item1', {
            props: ['todo'],
            template: '<p>{{todo.text}}</p>'
        })
        var app7=new Vue({
            el:'#app7',
            data:{
                groceryList:[
                    {id:0,text:'蔬菜'},
                    {id:1,text:'奶酪'},
                    {id:2,text:'随便其他什么人吃的东西'}
                ]
            }
        })

v-for：相当于java中的foreach循环

v-bind:todo：这个应该是绑定组件（component）中的props，内容可变

v-bind:key：查了资料，说也可以用v-bind:id表示

vue.js - v-bind中为什么key和id都可以？ - SegmentFault 思否 https://segmentfault.com/q/1010000012226071