数据验证

一、Vue 组件中命名

camelCase（骆峰式）命名 | kebab-case (短横线) 命名

1､在组件中的html ，不能用骆峰式，必须用kebab-case（短横线）命名，因为myMessage===mymessage

//html
<div id="app">
    //报错：[Vue warn]: Unknown custom element: <mycomponent> 
    <myComponent></myComponent> 
    // 因为html 中 是不区分大小写的 也就是 myComponent === mycomponent--
</div>

//js
Vue.component('myComponent',{//js中是区分大小写的
    template: '<div>我是一个组件</div>'
})
...

2､在组件中，父组件给子组件传递数据必须用短横线

//html
<div id="app"> //父组件给子组件传递数据,必须用短横线
    <my-component my-msg="hello"></my-component>
</div>

3､在组件的template中和data中用this.xxx引用时，只能是驼峰式，如果用短横线，会直接报错

//js
var app=new Vue({
    el: '#app',
    components:{
        'my-component':{
            props: ['myMsg'],
            template:'<div>{{myMsg}}</div>',//在template中，必须用骆峰式
            data:function(){
              return{
                title:this.myMsg ////在data中用this.xxx引用时，必须用骆峰式
              }
            }
        }
    }
})

4､在组件的props中随意

//html
<div id="app"> //父组件给子组件传递数据,必须用短横线
    <my-component my-msg="hello"></my-component>
</div>

//js
var app=new Vue({
    el: '#app',
    components:{
        'my-component':{
            props: ['myMsg'],//props随意，也就是 myMsg 或 my-msg 都可以的
            template:'<div>{{title}}</div>',//在template中，必须用骆峰式
            data:function(){
              return{
                title:this.myMsg
              }
            }
        }
    }
})

二、六种验证的type类型(可以有)

String | Number | Boolean | Object | Array | Function

Vue component(my-component,{
    props: {
       propA: Number,//必须是数字
       propB: [String,Number],//必须字符串或是数字
       propC: {//布尔值，如果没定义，默认值是 true
           type: Boolean,
           default: true
       },
       propD: {//数字而且必须传
           type: Number,
           required: true // 必须传
       },
       propE: {//如果是数组或对象，默认值必须是一个函数来返回
           type: Array,
           default: function(){
               return []
           }
       },
       propF: {//自定义一个验证函数
           validator: function(value){
               return value > 10
           }
       }
    }
})

【Demo实例 https://jsbin.com/zonohokihe/edit?html,output】