-字符串String
-数值 Number
-布尔值 Boolean
-数组 Array
-对象 Object
学习代码如下:
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div>{{pmsg}}</div>
<menu-item :pstr='pstr' :pnum='12' :pboo='true' :parr='parr' :pobj='pobj'></menu-item>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
/*
父组件向子组件传值-props属性名类型
*/
Vue.component('menu-item',{
props: ['pstr','pnum','pboo','parr','pobj'],
template:`
<div>
<div>{{pstr}}</div>
<div>{{12 + pnum}}</div>
<div>{{pboo}}</div>
<ul>
<li :key='index' v-for='(item,index) in parr'>{{item}}</li>
</ul>
<div>{{pobj}}</div>
<div>
<span>{{pobj.name}}</sapn>
<span>{{pobj.age}}</sapn>
</div>
</div>
`
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件内容',
pstr: 'hello',
parr: ['apple','orange','banana'],
pobj: {
name: 'poowicat',
age: '22'
}
}
})
</script>
</body>
</html>