2017.04 vue学习笔记---02

/*

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin-bottom: 20px;
        }
    </style>
    <script src="js/vue.js"></script>
    <script src="js/jquery-1.12.3.min.js"></script>
</head>
<body>
    <!--demo7-->
    <div id="app7">
        <ol>
            <!--创建待办事项项组件的实例-->
            <!--现在，我们提供了每个待办事项项目-->
            <!--他的内容可以是动态的-->
            <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
        </ol>
    </div>



    <script>
        /*待办事项组件现在接受一个“道具”，这就像一个自定义属性。*/
        Vue.component('todo-item',{
            props:['todo'],
            template:'<li>{{ todo.text }}</li>'
        })
        var app7 =new Vue({
            el:"#app7",
            data:{
                groceryList:[
                    {text:'1111'},
                    {text:'2222'},
                    {text:'3333'}
                ]
            }
        })
    </script>
</body>
</html>

*/

posted @ 2017-04-07 14:45  敷衍轻笑  阅读(108)  评论(0)  编辑  收藏  举报