文章目录
一 Prop的大小写
HTML 中的 attribute
名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM
中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:
var vm = new Vue({
el: '#components-demo',
components: {
blog_post: {
props: ['HelloWorld'],
template: '<div><h3>What I said is :</h3>{
{HelloWorld}}</div>'
}
}
})
<div id="components-demo">
<blog_post hello-world="你好哇,李银河"></blog_post>
</div>
二 Prop指定类型
2.1 用法
var vm = new Vue({
el: '#components-demo',
components: {
book_info: {
props: {
prize: Number,
author: Array,
book:String
},
computed:{
author_nums:function(){
var str = ""
for(index in this.author){
str = str + this.author[index] + " "
}
return str;
}
},
template: '<div><h3>The Book : <i>{
{book}}</h3>Writeen by <strong>{
{ author_nums }}</strong> is priced at {
{prize}}¥</div>'
}
}