<body>
<script src="../libs/vue.js"></script>
<div id="app">
{{message}}
<com
ctitle="你睡醒了吗"
:cmessage="message"
:author="author"
:comment-id="commId"
></com>
</div>
<template id="temp">
<div>
<h2>{{msg}}</h2>
<h2>{{ctitle}}</h2>
<h2 v-show="isShow">Hello</h2>
<h2 v-for="(value,key,index) in author" :key="index">{{value}}</h2>
<h5 v-for="item in commentId" :key="item">{{item}}</h5>
{{cmessage}}
</div>
</template>
<script>
//全局组件
Vue.component('com', {
template: '#temp',
//String
//Html是对大小写不敏感的语言
//碰到驼峰式命名，html中应该转换成is-show
// props: ['msg', 'ctitle', 'isShow']
// props: {
// msg: String,
// ctitle: String,
// isShow: Boolean,
// likes: Number,
// author: Object,
// commentId: Array
// }
props: {
cmessage: {
/*type决定cmessage的数据类型 Number String */
type: String,
/*默认数据*/
default: '默认cmessage',
/*必传值*/
required:true
},
author:{
type: Object,
default(){
return{
title:'',
age:''
}
}
}
}
})
var app = new Vue({
el: '#app',
data: {
message: 'hello vue',
title: '这是一个标题',
commId: [2, 3, 4],
author: {
name: 'xiaosu',
age: 18
}
},
components: {}
})
</script>
</body>
网友评论