【Vue.js学习笔记】12：组件嵌套的Demo页面

版权声明：本文为博主原创学习笔记，如需转载请注明来源。 https://blog.csdn.net/SHU15121856/article/details/85265678

组件嵌套的Demo页面

这里按照课程视频里所做，将Header和Footer使用相应的语义化标签包装成组件，一起装进根组件中来使用，建立一个小Demo网页。

App.vue

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

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

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

<style scoped>
  h2 {
    color: purple;
  }
</style>

Header.vue

<template>
  <header>
    <h1>{{title}}</h1>
  </header>
</template>

<script>
  export default {
    name: "Header",
    data() {
      return {
        title: "Vue组件嵌套demo"
      }
    }
  }
</script>

<style scoped>
  header {
    background: lightgreen;
    padding: 10px;
  }

  h1 {
    color: #222;
    text-align: center;
  }

</style>

Users.vue

<template>
  <div class="users">
    <h2>Hello Users</h2>
    <ul>
      <!--点击li时取反show的值-->
      <li v-for="user in users" v-on:click="user.show=!user.show">
        <h2>{{user.name}}</h2>
        <!--仅当show为true时显示岗位-->
        <h3 v-show="user.show">{{user.position}}</h3>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "Users",
    data() {
      return {
        users: [
          {name: "lzh1", position: "Web开发", show: false},
          {name: "lzh1", position: "Web开发", show: false},
          {name: "lzh1", position: "Web开发", show: false},
          {name: "lzh1", position: "Web开发", show: false},
          {name: "lzh1", position: "Web开发", show: false},
          {name: "lzh1", position: "Web开发", show: false},
          {name: "lzh1", position: "Web开发", show: false},
        ]
      }
    }
  }
</script>

<style scoped>
  .users {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    /*border-box定义的盒子,不会随着padding和boder的加入而增大盒子的占用空间*/
    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;
    border: 1px solid #222;
    margin: 10px;
  }

</style>

Footer.vue

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

<script>
  export default {
    name: "Footer",
    data() {
      return {
        copyright: "Copyright 2018"
      }
    }
  }
</script>

<style scoped>
  footer {
    background: #222;
    padding: 6px;
  }

  p {
    color: lightgreen;
    text-align: center;
  }
</style>

运行结果

点击可以显示"web开发"字样。