vue2创建组件与组件的使用

1.引用vue2

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2.创建组件容器

<div id="app-7">

        <ol>

            v-bind 绑定数据

3.使用组件，并通过绑定数据进行传值

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

        </ol>

    </div>

4.创建组件模板

    <script>

4.通过Vue.component('组件名',{

props:'接收数据名'

})

        Vue.component('todo-item', {

  prop接口接受组件上传递的数据

            props: ['todo'],

            template: '<li>{{ todo.text }}</li>'

        })

5.加载入容器，和定义数据和属性

        var app7 = new Vue({

            el: '#app-7',

绑定的数据

            data: {

                groceryList: [

                    { id: 0, text: '蔬菜' },

                    { id: 1, text: '奶酪' },

                    { id: 2, text: '随便其它什么人吃的东西' }

                ]

            }

        })

    </script>