vuejs23简单组件使用

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title></title>

</head>

<body>

<div id="app">

        <ol>

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

        </ol>

    </div>

<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>

<script>

Vue.component("todo-item",{

props:['todo'],

template:'<li>`todo`.`text`</li>'

});

new Vue({

el:'#app',

data:{

groceryList:[

{ text: 'Vegetables' },

      { text: 'Cheese' },

      { text: 'Whatever else humans are supposed to eat' }

]

}

});

</script>

</body>

</html>

vuejs23简单组件使用