vue-组件demo

• 组件Header

<template>
  <header>
  <h1>{{title}}</h1>
  </header>
</template>
<script>
export default {
   name:'app-header',
   data(){
     return{
        title:"Vue.js Demo",
     }
   }
}
</script>

<style scoped>
header{
    background:lightgreen;
    padding:10px;
}
h1{
    color:#222;
    text-align:center;  
}

</style>

• 组件Footer

<template>
  <footer>
  <p>{{copyright}}</p>
  </footer>
</template>

<script>
export default {
   name:'app-footer',
   data(){
     return{
        copyright:"Copyright 2017 vue demo",
     }
   }
}
</script>
<style scoped>
footer{
    background:#222;
    padding:6px;
}
 p{
    color:lightgreen;
    text-align:center;  
}
</style>

• HTML

<template>
  <div class="users">
    <ul>
      <li v-for="user in users" @click="user.show=!user.show">
       <h2>{{user.name}}</h2>
       <h3 v-show="user.show">{{user.position}}</h3>
      </li>
    </ul>
  </div>
</template>

• JS

<script>
export default {
  name:'users',
  data() {
      return {

          users: [{name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                  {name:"Herry",position:"Emliy",show:false},
                 ],    
    }
  }
}
</script>

• CSS

<style scoped>
.users{
  backgroundcolor:green;
  width:100%;
  max-width:2000px;
  margin:40px,auto;
  padding:0 20px;
  //规定盒子宽度
  box-sizing:border-box;
}
ul{
  display:flex;
  //盒子容器子标签灵活换行;
  flex-wrap:wrap;
  list-style-type:none;
  padding:0;
}
li{
  //撑满整行（一个或者多个撑满整行）
  flex-grow:1;
  flex-basis:200px;
  text-align:center;
  padding:30px;
  bordor:1px solid #222;
  margin:10px;
}
</style>