vue学习 20实战Demo

App.vue

<template>
  <div id="app">
    <app-header></app-header>
    <users></users>
    <app-footer></app-footer>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import Header from './components/Header'
import Footer from './components/Footer'
import Users from './components/Users'

export default {
  name: 'App',
  components: {
    HelloWorld,
    'app-header': Header,
    'app-footer': Footer,
    'users': Users
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Header.vue

<template>
  <header class="header">
    <h1>顶部</h1>
  </header>
</template>

<script>
export default {
  name: 'header',
  data () {
    return {
      msg: ''
    }
  }
}
</script>


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

Footer.vue

<template>
  <footer class="footer">
    <h1>{{copyright}}</h1>
  </footer>
</template>

<script>
export default {
  name: 'footer',
  data () {
    return {
      copyright: 'copyright 2019 vue Demo'
    }
  }
}
</script>


<style scoped>
footer{
    background: lightgray;
    padding: 6px;
}
h1{
    color: #999;
}
</style>

Users.vue

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

<script>
export default {
  name: 'users',
  data () {
    return {
      users: [
        {name: "亨利", info: "信息", show:false},
        {name: "亨利", info: "信息", show:false},
        {name: "亨利", info: "信息", show:false},
        {name: "亨利", info: "信息", show:false},
        {name: "亨利", info: "信息", show:false},
        {name: "亨利", info: "信息", show:false}
      ]
    }
  }
}
</script>


<style>
.users{
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;/*将该对象设置为 怪异盒模型 */
}

ul{
    display: flex; /* 让所有的li摆在一行, */
    flex-wrap: wrap; /* 换行：所有的li都会在容器里面，不会超出容器 */
    list-style-type: none;
    padding: 0;
}

li{
    flex-grow: 1; /* 如果一行里面只有一个li的话，这个li会撑满整行;如果是两个的话，则两个li会撑满整行 */
    flex-basis: 200px; /* 让每个li有200px的宽 */
    text-align: center;
    padding: 30px;
    border: 1px solid #222;
    margin: 10px;
}
</style>