定义页面的局部区域块,完成单独的页面功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="myApp">
<ol>
<div v-for = "item in games">{{item.title}}</div>
</ol>
<ol>
<game-item v-for = "item in games" v-bind:game = "item"></game-item>
</ol>
<!-- v-bind:class="classProperty" 中,v-bind 是指令,: 后面的 class 是参数,而 classProperty 则在官方文档中被称为“预期值” -->
<!-- v-bind:game = "item" 可理解为给game赋以与item一样的功能 -->
</div>
<script>
Vue.component('game-item',{
props:['game'], //定义了一个game属性
template:'<li>{{ game.title }}</li>'
});
var myApp = new Vue({
el:'#myApp',
data:{
games:[
{title:'斗地主'},
{title:'打麻将'},
{title:'打游戏'}
]
}
});
</script>
</body>
</html>