Vue入門基礎（多組件嵌套demo）

Header.vue

<template >
    <div class="Header">
        <h1>{{title}}</h1>
    </div>
</template>

<script>
//js 邏輯部分
export default {
  name: 'Header',
  data() {
     return {
         title:"多組件嵌套demo"
    };
  }
}
</script>

<style scoped>
.Header{
     padding:10px;
     background-color: green
}
h1{
    color: black;
    text-align: center
}
</style>

Footer.vue

<template >
    <div class="Footer">
        <h1>{{copyright}}</h1>
    </div>
</template>

<script>
//js 邏輯部分
export default {
  name: 'Footer',
  data() {
     return {
         copyright:"copyright333"
    };
  }
}
</script>

<style scoped>
.Footer{
     padding:10px;
     background-color:black
}
h1{
    color: white;
    text-align: center
}
</style>

Users.vue

<template >
  <div class="users">
    <ul>
        <!-- vue 遍歷需要key屬性綁定-->
        <li @click="val.isshow=!val.isshow" v-for="(val,index) in users" :key="index">
            <h2>{{val.name}} </h2>
            <h3 v-show="val.isshow">{{val.wechat}} </h3>
        </li>
    </ul>
  </div>
</template>

<script>
//js 邏輯部分
export default {
  name: 'users',
  data() {
    return {
     users:[
       {name:"我是1",wechat:"1111",isshow:false},
       {name:"我是2",wechat:"1111",isshow:false},
       {name:"我是3",wechat:"1111",isshow:false},
       {name:"我是4",wechat:"1111",isshow:false},
       {name:"我是5",wechat:"1111",isshow:false},
       {name:"我是6",wechat:"1111",isshow:false}
     ]
    };
  }
}
</script>

<style scoped>
.users{
  width: 100%;
  max-width: 1200px;
  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;
  border: 1px solid #222;
  margin: 10px;
}
</style>

App.vue

<template>
  <div id="app">
     <Header/>
    <!--使用組件-->
    <Users/>
    <Footer/>
  </div>
</template>

<script>
//註冊局部組件
//1 引入組件
import Users from './components/Users.vue'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
  name: 'app',
  components: { //2 註冊組件
    Users,
    Header,
    Footer
  }
}
</script>

<style>
 h1{
  color:red;
} 

</style>

頁面效果