<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 这里的msg111属性可以使用v-bind也可以不使用 -->
<my-component :newv="true"></my-component>
</div>
<script type="text/x-template" id="my-component">
<div>
{{msg111}}
</div>
</script>
<script type="text/javascript">
var app = new Vue({
data: {
msg: '世界,你好!'
},
components: {
myComponent: {
template: '#my-component',
//这里使用props接收属性,,是props不是prop
props: {
msg111: {
type: String, //只能是字符串类型
default: '666' //如果没传msg111属性,则默认是666
},
newv: {
type: [Boolean,Number], //可以是布尔或数字
default(){ //默认值可以是函数返回值
return '999'
}
},
oldv: {
validator(v){ //验证也可以是函数
return v===1 || v===0;
}
}
},
data(){
return{
}
}
}
}
}).$mount('#app')
</script>
</body>
</html>
网友评论