<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
.container{
padding:10px;
border:1px solid red;
width:300px;
box-sizing:border-box;
margin:20px auto;
}
.container h3{
font-size:16px;
line-height:40px;
font-weight:bold;
border-bottom:1px dashed #AAA;
}
</style>
</head>
<body>
<div id="app">
<my-vote title="张三"></my-vote>
<my-vote title="李四"></my-vote>
<my-vote title="王五"></my-vote>
</div>
<template id="MyVoteTemplate">
<div class="container">
<h3><span v-text="title"></span>(<span>0</span>)</h3>
<vote-content></vote-content>
<vote-button></vote-button>
</div>
</template>
<template id="VoteContentTemplate">
<div class="content">
<p>支持人数:<span>0</span></p>
<p>反对人数:<span>0</span></p>
<p>支持率:<span>0%</span></p>
</div>
</template>
<template id="VoteButtonTemplate">
<div class="footer">
<button type="button" class="btn btn-primary">支持</button>
<button type="button" class="btn btn-danger">反对</button>
</div>
</template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const VoteContent={
template:'#VoteContentTemplate',
data(){
return {}
}
}
const VoteButton={
template:'#VoteButtonTemplate',
data(){
return {}
}
}
const MyVote={
template:'#MyVoteTemplate',
/*子组件设置props用来接收父组件属性传递过来的信息:在props中注册的属性和data一样，也会挂载到实列上 this.title{{title}}*/
/*1.父组件传递过来的属性名是kebab-case格式,子组件在注册的时候应该按照camelCase/PasalCase格式接收和使用:属性名传递是大写的，其实也是按照小写的来传递的，所以props注册和使用的时候都是按照小写来处理即可*/
/*2.注册属性校验(不符合格式校验的，依然可以在组件中使用，只不过在控制台会输出报错信息)
* props:{
* title:String
* }
* props:[
* String,
* Number
*
* ]
* props:{
* title:String,
* aaa:[Number,Array]
* }
* * props:{
* title:String,
* aaa:{
* type:[Number,Array],
* 是否必传
* required:true
* }
*
* props:{
* title:String,
* default:'我是默认值'
* aaa:{
* type:[Number,Array],
* 是否必传
* required:true
* }
* }
* * props:{
* title:String,
* default:'我是默认值'
* aaa:{
* type:[Number,Array],
* 是否必传
* required:true
* 自定义验证规则 val传递的属性值 在函数中，根据自己的规则返回布尔值
* validator(val){
*
* }
* }
* }
* */
props:[
'title'
],
data(){
return {}
},
components:{
VoteContent,
VoteButton
}
}
let vm=new Vue({
el:'#app',
data:{
},
components:{
MyVote
}
})
</script>
</html>
