075 Introducing Components

最新推荐文章于 2024-11-05 22:12:47 发布

黄健华Yeah

最新推荐文章于 2024-11-05 22:12:47 发布

阅读量286

点赞数 3

本文链接：https://blog.csdn.net/KevinHuang2088/article/details/141648713

版权

03 Vue3 - Udemy Top 1（完结）专栏收录该内容

307 篇文章 0 订阅

订阅专栏

示例

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <header>
      <h1>FriendList</h1>
    </header>
    <section id="app">
      <ul>
        <friend-card></friend-card>
        <friend-card></friend-card>
      </ul>
    </section>
  </body>
</html>

app.js

const app = Vue.createApp({
    data() {
        return {
            friends: [
                {id: 1, name: 'John', phone: '123456789', email: 'john@gmail.com', address: '123 Main St'},
                {id: 2, name: 'Jane', phone: '987654321', email: 'jane@gmail.com', address: '45'},
                {id: 3, name: 'Bob', phone: '124567890', email: 'bob@gmail.com', address: '567 Main St'},
                {id: 4, name: 'Alice', phone: '0987654321', email: 'alice@gmail.com', address: '123 Main St'},
                {id: 5, name: 'Tom', phone: '1234567890', email: 'tom@gmail.com', address: '12'},
                {id: 6, name: 'Jerry', phone: '0987654321', email: 'jerry@gmail.com', address: '123 Main St'},
            ],
        };
    },
});


//Cretate a Component
app.component('friend-card',{
    template: `
        <li>
          <h2>{{friend.name}}</h2>
          <button @click="toggleDetails">{{detailsVisible?'Hide':'Show'}} Details</button>
          <ul v-if="detailsVisible">
            <li><strong>Phone:</strong>{{friend.phone}}</li>
            <li><strong>Email:</strong>{{friend.email}}</li>
          </ul>
        </li>`,
    props: ['friend'],
    data() {
        return {
            detailsVisible: false,
            friend: {id: 1, name: 'John', phone: '123456789', email: 'john@gmail.com', address: '123 Main St'},  
            friend2: {id: 2, name: 'Jane', phone: '987654321', email: 'jane@gmail.com', address: '45'},
        };
    },
    methods: {
        toggleDetails() {
            this.detailsVisible = !this.detailsVisible;
        },
    }
});
//Component

app.mount('#app');

styles.css

* {
  box-sizing: border-box;
}

html {
  font-family: 'Jost', sans-serif;
}

body {
  margin: 0;
}

header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  background-color: #58004d;
  color: white;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#app ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#app li {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 1rem auto;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#app h2 {
  font-size: 2rem;
  border-bottom: 4px solid #ccc;
  color: #58004d;
  margin: 0 0 1rem 0;
}

#app button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #ff0077;
  background-color: #ff0077;
  color: white;
  padding: 0.05rem 1rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}

#app button:hover,
#app button:active {
  background-color: #ec3169;
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}