前端学习——Prop

一 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>'
        }
    }