<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{pmsg}}</div>
<meun-item :pstr="pstr" :pnum="12" :pboo="true" :parr="parr" :pobj="pobj"></meun-item>
</div>
<script>
Vue.component('meun-item', {
props: ['pstr', 'pnum', 'pboo', 'parr', 'pobj'],
template: `
<div>
<div>{{pstr}}</div>
<div>{{12+pnum}}</div>
<div>{{typeof pnum}}</div>
<!--如果绑定pnum，则类型为number型 没有绑定则为字符串-->
<div>{{pboo}}</div>
<div>{{typeof pboo}}</div>
<!--如果绑定pboo，则类型为布尔值 没有绑定则为字符串-->
<ul>
<li v-for="(item,index) in parr" :key="index">{{item}}</li>
</ul>
<div>
<span>{{pobj.name}}</span>
<span>{{pobj.age}}</span>
<span>{{pobj.sex}}</span>
</div>
</div>
`
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件内容',
pstr: 'hello',
parr: ['apple', 'orange', 'peach'],
pobj: {
name: 'lisa',
age: 18,
sex: 'famale'
}
}
})
</script>
</body>
</html>
