vue-basic
/
index5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习-参数校验</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <h1 v-text="title"></h1>
        <!-- 参数校验 组件原始事件-->
        <parmst @click.native = "handleNativeClik" ></parmst>
    </div>
    <script>
            // 定义局部组件
            var parmst = {
                // 参数校验
                props: {
                    // 返回一个对象
                    content: {
                        type: [String, Number], // 指定数据类型
                        required: true,  // 是否必填
                        default: "Default String",  // 指定默认值
                        validator: function(value){ //自定义校验
                            return (value.length >5 )
                        }
                    }
                },
                template: '<div >{{ content }}</div>'
            };

            var app = new Vue({
                el: '#app',
                data: {
                    title: 'Vue学习',
                },
                components: {
                    parmst: parmst,
                },
                methods: {
                    // 原生事件
                    handleNativeClik: function(){
                        alert("NativeClik");
                    }
                }
            });
        </script>
</body>
</html>