|
@@ -7,11 +7,21 @@
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
|
<div id="app">
|
|
<div id="app">
|
|
|
- <child></child>
|
|
|
|
|
|
|
+ <child content="hello world"></child>
|
|
|
</div>
|
|
</div>
|
|
|
<script>
|
|
<script>
|
|
|
Vue.component('child',{
|
|
Vue.component('child',{
|
|
|
- template: '<div>Child</div>'
|
|
|
|
|
|
|
+ props: {
|
|
|
|
|
+ content: {
|
|
|
|
|
+ type: [String,Number],
|
|
|
|
|
+ required: false,
|
|
|
|
|
+ default: "default value",
|
|
|
|
|
+ validator: function(value){
|
|
|
|
|
+ return (value.length > 5)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ template: '<div>{{content}}</div>'
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
var vm = new Vue({
|
|
var vm = new Vue({
|
Yi