prop assertions

Author: yyx990803

source/guide/components.md

@@ -140,25 +140,6 @@ new Vue({
 
 <p class="tip">It is also possible to expose `$data` as a prop. The passed in value must be an Object and will replace the component's default `$data`.</p>
 
-### Prop Binding Types
-
-By default, all props form a **one-way-down** binding between the child property and the parent one: when the parent property updates, it will be synced down to the child, but not the other way around. This default is meant to prevent child components from accidentally mutating the parent's state, which can make your app's data flow harder to reason about. However, it is also possible to explicitly enforce a two-way or a one-time binding:
-
-Compare the syntax:
-
-``` html
-<!-- default, one-way-down binding -->
-<child msg="{{parentMsg}}"></child>
-<!-- explicit two-way binding -->
-<child msg="{{@ parentMsg}}"></child>
-<!-- explicit one-time binding -->
-<child msg="{{* parentMsg}}"></child>
-```
-
-The two-way binding will sync the change of child's `msg` property back to the parent's `parentMsg` property. The one-time binding, once set up, will not sync future changes between the the parent and the child.
-
-<p class="tip">Note that if the prop being passed down is an Object or an Array, it is passed by reference. Mutating the Object or Array itself inside the child will affect parent state, regardless of the binding type you are using.</p>
-
 ### Passing Callbacks as Props
 
 It is also possible to pass down a method or a statement as a callback to a child component. This enables declarative, decoupled parent-child communication:
@@ -188,6 +169,69 @@ Vue.component('child', {
 <child on-load="{{onChildLoaded}}"></child>
 ```
 
+### Prop Binding Types
+
+By default, all props form a **one-way-down** binding between the child property and the parent one: when the parent property updates, it will be synced down to the child, but not the other way around. This default is meant to prevent child components from accidentally mutating the parent's state, which can make your app's data flow harder to reason about. However, it is also possible to explicitly enforce a two-way or a one-time binding:
+
+Compare the syntax:
+
+``` html
+<!-- default, one-way-down binding -->
+<child msg="{{parentMsg}}"></child>
+<!-- explicit two-way binding -->
+<child msg="{{@ parentMsg}}"></child>
+<!-- explicit one-time binding -->
+<child msg="{{* parentMsg}}"></child>
+```
+
+The two-way binding will sync the change of child's `msg` property back to the parent's `parentMsg` property. The one-time binding, once set up, will not sync future changes between the the parent and the child.
+
+<p class="tip">Note that if the prop being passed down is an Object or an Array, it is passed by reference. Mutating the Object or Array itself inside the child will affect parent state, regardless of the binding type you are using.</p>
+
+### Prop Validation
+
+It is possible for a component to validate the props it is receiving. This is useful when you are authoring a component that is intended to be used by others, as these prop validation requirements essentially constitute your component's API, and ensure your users are using your component correctly. Instead of defining the props as strings, you can use Objects that contain validation requirements:
+
+``` js
+Vue.component('example', {
+  props: [
+    // type check
+    {
+      name: 'on-something',
+      type: Function
+    },
+    // presence check
+    {
+      name: 'required-prop',
+      type: String,
+      required: true
+    },
+    // custom validator function
+    {
+      name: 'greater-than-ten',
+      validator: function (value) {
+        return value > 10
+      }
+    }
+  ]
+})
+```
+
+The `type` can be one of the following native constructors:
+
+- String
+- Number
+- Boolean
+- Function
+- Object
+- Array
+
+In addition, `type` can also be a custom constructor function and the the assertion will be made with an `instanceof` check.
+
+When a prop validation fails, Vue will refuse the set the value on the child component, and throw a warning if using the development build.
+
+You can still use strings if your props don't need any validation, and you can mix string and object props in the option array.
+
 ### Inheriting Parent Scope
 
 If you want, you can also use the `inherit: true` option for your child component to make it prototypally inherit all parent properties:

themes/vue/source/css/page.styl

@@ -175,7 +175,7 @@ $header-height = 40px
     p, ul, ol
         line-height 1.6em
     ul, ol
-        padding-left 1em
+        padding-left 1.5em
     a
         color $green
         font-weight 600