vue学习3

组件化应用结构

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

        <div id="app-7">
            <ol>
                <!-- 创建一个 todo-item 组件的实例 -->
                <todo-item>11</todo-item>
            </ol>
        </div>

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

var app7 = new Vue({
    
})

这样会为每个待办项渲染同样的文本，正常使用应该能从父作用域将数据传到子组件，下面修改一下组件的定义，使之能够接受一个 prop

        <div id="app-7">
            <ol>
                <!-- 为每个 todo-item 提供 todo对象
                 todo 对象是变量
                 同时也为每个组件提供一个key
                 -->
                <todo-item
                    v-for="item in groceryList"
                    v-bind:todo="item"
                    v-bind:key="item.id"
                ></todo-item>
            </ol>
        </div>

var app7 = new Vue({ 
    el:'#app-7',
    data:{
        groceryList:[
            {id:10, text: '开发'},
            {id:11, text: '测试'},
            {id:12, text: '运维'}
        ]
    }
})

待续...