<div id="app-1">
  <!-- HTML 中是 kebab-case -->
  <blog-post post-title="你好！"></blog-post>
</div>

//Prop 的大小寫 (camelCase vs kebab-case)
Vue.component('blog-post', {
  //在 js 中是 camelCase
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
});
new Vue({
  el: '#app-1'
})

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

<blog-post title="開花啦"></blog-post>

<!-- 動態(tài)賦予一個變量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 動態(tài)賦予一個復(fù)雜表達(dá)式的值 -->
<blog-post v-bind:title="post.title + ' 作者： ' + post.author.name"></blog-post>

<!-- 靜態(tài)-->
<!-- 這里的 40 實際是 JS 表達(dá)式-->
<blog-post v-bind:likes="40"></blog-post>
<!-- 動態(tài)-->
<blog-post v-bind:likes="post.likes"></blog-post>

<!-- 傳入布爾值-->
<!-- 如果 prop 沒有該值，則表示 true-->
<blog-post is-published></blog-post>
<!-- 靜態(tài)-->
<!-- 這里的 false 實際是 JS 表達(dá)式-->
<blog-post v-bind:is-published="false"></blog-post>
<!-- 動態(tài)-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

<!-- 靜態(tài) -->
<blog-post v-bind:comment-ids="[1,2,3]"></blog-post>
<!-- 動態(tài)-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

<!-- 靜態(tài) -->
<blog-post v-bind:author="{name:'Deniro',company:'DreamWork'}"></blog-post>
<!-- 動態(tài)-->
<blog-post v-bind:author="post.author"></blog-post>

post: {
  id: 1,
  title: 'xx 新聞'
}

<blog-post v-bind="post"></blog-post>

<blog-post
 v-bind:id="post.id"
 v-bind:title="post.title"
></blog-post>

props: ['initialCounter'],
data: function () {
 return {
  counter: this.initialCounter
 }
}

props: ['size'],
computed: {
 normalizedSize: function () {
  return this.size.trim().toLowerCase()
 }
}

Vue.component('my-component', {
  props: {
    //基礎(chǔ)類型檢查（null 可以匹配任意類型）
    propA: Number,
    //多個可能的類型
    propB: [String, Number],
    //必填字符串
    propC: {
      type: String,
      required: true
    },
    //帶默認(rèn)值的數(shù)字
    propD: {
      type: Number,
      default: 100
    },
    propE: {
      type: Object,
      //對象或數(shù)組會從工廠函數(shù)返回默認(rèn)值
      default: function () {
        return {message: 'hello'}
      }
    },
    //自定義驗證函數(shù)
    propF: {
      validator: function (value) {
        //value 必須是字符串?dāng)?shù)組中的某一個值
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
});

function Person(firstName,lastName){
  this.firstName=firstName;
  this.lastName=lastName;
};

Vue.component('blog-post', {
 props: {
  author: Person
 }
});

<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

<input type="date" class="form-control">

<bootstrap-date-input
 data-date-picker="activated"
 class="date-picker-theme-dark"
></bootstrap-date-input>

Vue.component('my-component', {
 inheritAttrs: false,
 // ...
})

{
 class: 'username-input',
 placeholder: 'Enter your username'
}

Vue.component('base-input', {
 inheritAttrs: false,
 props: ['label', 'value'],
 template: `
  <label>
   {{ label }}
   <input
    v-bind="$attrs"
    v-bind:value="value"
    v-on:input="$emit('input', $event.target.value)"
   >
  </label>
 `
})

<base-input
 v-model="username"
 class="username-input"
 placeholder="Enter your username"
></base-input>