App.vue

<template>
  <div>
    <h2>hello Teleport</h2>
    <teleport to="#extra-modal" :disabled="isTeleport">
      <div class="modal">
        this is modal
        <button @click="isTeleport = !isTeleport">teleport toggle</button>
      </div>
    </teleport>
    <teleport to="#extra-modal">
      <div class="modal2">this is modal2</div>
    </teleport>
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      isTeleport: true,
    };
  },
};
</script>

<style scoped>
.modal {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-size: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <div id="extra-modal"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

원래는 App.vue에 작성하는 모든 내용은

index.html의 id가 app인 div태그로 들어가게 된다.

하지만

텔레포트를 이용하면 App.vue에 있는 내용들을

index.html 에서 id가 app인 div태그 외부로 보낼 수 있다.

'Web > Vue' 카테고리의 다른 글

[Vue] slot (0)	2022.06.29
[Vue] Component5 , keep-alive, dynamic component (0)	2022.06.29
[Vue] Component4, your input is (0)	2022.06.29
[Vue] Component 3 (0)	2022.06.29
[Vue] Component 2 (0)	2022.06.25

app.vue

<template>
  <div>
    <h2>hello slots</h2>
    <CardView
      ><template v-slot:header>
        <h3>Random Image</h3>
      </template>
      <template v-slot:default>
        <img src="https://placeimg.com/200/100/any" alt="" />
      </template>
      <template v-slot:footer>
        <small>thank you</small>
      </template>
    </CardView>
  </div>
</template>
<script>
import CardView from "./components/slot/CardView";
export default {
  name: "App",
  components: { CardView },
  data() {
    return {};
  },
};
</script>

<style></style>

CardView.vue

<template>
  <div class="card">
    <div class="card-header"><slot name="header"></slot></div>
    <div class="card-body"><slot></slot></div>
    <div class="card-footer"><slot name="footer"></slot></div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
  padding: 1rem;
  margin-bottom: 1rem;
  width: 200px;
}

.card-header {
  color: red;
}
.card-body {
  color: green;
}

.card-footer {
  color: pink;
}
</style>

'Web > Vue' 카테고리의 다른 글

[Vue] teleport (0)	2022.06.29
[Vue] Component5 , keep-alive, dynamic component (0)	2022.06.29
[Vue] Component4, your input is (0)	2022.06.29
[Vue] Component 3 (0)	2022.06.29
[Vue] Component 2 (0)	2022.06.25

App.vue

<template>
  <div>
    <!-- <CompLevel1></CompLevel1> -->
    <h2>Hello Component</h2>
    <!-- <button @click="clickMenu(0)">Menu1</button>
    <button @click="clickMenu(1)">Menu2</button>
    <button @click="clickMenu(2)">Menu3</button>
    <Menu1 v-if="displayMenu[0]"></Menu1>
    <Menu2 v-if="displayMenu[1]"></Menu2>
    <Menu3 v-if="displayMenu[2]"></Menu3> -->

    <button @click="activeTab = 'Menu1'">Menu1</button>
    <button @click="activeTab = 'Menu2'">Menu2</button>
    <button @click="activeTab = 'Menu3'">Menu3</button>
    <!-- 
    <Menu1 v-if="activeTab === 'Menu1'"></Menu1>
    <Menu2 v-if="activeTab === 'Menu2'"></Menu2>
    <Menu3 v-if="activeTab === 'Menu3'"></Menu3> -->
    <!-- dynamic component -->
    <!-- is에 컴포넌트 명만 넘겨주면 해당 컴포넌트가 나오게 된다! -->
    <keep-alive>
      <component :is="activeTab"></component>
    </keep-alive>
  </div>
</template>
<script>
import Menu1 from "./components/tabItems/Menu1";
import Menu2 from "./components/tabItems/Menu2";
import Menu3 from "./components/tabItems/Menu3";
// import CompLevel1 from "./components/provider-inject/CompLevel1";
export default {
  name: "App",
  components: {
    // CompLevel1,
    Menu1,
    Menu2,
    Menu3,
  },
  data() {
    return {
      // displayMenu: [false, false, false],
      username: "scalper",
      activeTab: "Menu1",
    };
  },
  provide() {
    return {
      name: this.username,
    };
  },
  methods: {
    clickMenu(num) {
      this.displayMenu[num] = this.displayMenu[num] ? false : true;
    },
  },
};
</script>

<style></style>

Menu1.vue

<template>
  <h2>Menu1</h2>
</template>

<script>
export default {
  name: "MyMenu1",
};
</script>

<style></style>

Menu2.vue

<template>
  <h2>Menu2</h2>
</template>

<script>
export default {
  name: "MyMenu2",
};
</script>

<style></style>

Menu3.vue

<template>
  <h2>Menu3</h2>
  <!-- 다른 메뉴로 옮기면 input 새로 렌더링 되서 사라진다<br /> -->
  <input type="text" v-model="username" />
</template>

<script>
export default {
  name: "MyMenu3",
  data() {
    return {
      username: "",
    };
  },
};
</script>

<style></style>

'Web > Vue' 카테고리의 다른 글

[Vue] teleport (0)	2022.06.29
[Vue] slot (0)	2022.06.29
[Vue] Component4, your input is (0)	2022.06.29
[Vue] Component 3 (0)	2022.06.29
[Vue] Component 2 (0)	2022.06.25

App.vue

<template>
  <div>
    <h2>Your Input is!</h2>
    <h3>{{ input }}</h3>
    <button @click="displayDetail = true">입력하기</button>
    <DetailView
      v-if="displayDetail"
      @closeDetail="close"
      @sendData="showData"
    ></DetailView>
  </div>
</template>
<script>
import DetailView from "./components/DetailView.vue";
export default {
  name: "App",
  components: {
    DetailView,
  },
  data() {
    return {
      displayDetail: false,
      input: "default",
    };
  },
  methods: {
    close() {
      this.displayDetail = false;
    },
    showData(data) {
      this.input = data;
    },
  },
};
</script>

<style></style>

Defalut.vue

<template>
  <div class="wrapper">
    <div class="container">
      <h2>Detail Page</h2>
      <button @click="closeDetail">close</button>
      <input type="text" v-model="username" />
      <button @click="sendData">send Data</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "detailPage",
  data() {
    return {
      username: "",
    };
  },
  methods: {
    closeDetail() {
      this.$emit("closeDetail");
    },
    sendData() {
      this.$emit("sendData", this.username);
      this.closeDetail();
    },
  },
};
</script>

<style scoped>
.wrapper {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  background: #fff;
  width: 60%;
}
</style>

자식은 부모의 데이터를 변환할 수 없다.

단 자식의 이벤트를 부모에게 넘겨주어서

부모에서 처리해줄 수 있다.

부모에게 이벤트를 전달할 땐 emit을 해주고 뒤에 파라미터를 넣어줄 수 있다.

'Web > Vue' 카테고리의 다른 글

[Vue] slot (0)	2022.06.29
[Vue] Component5 , keep-alive, dynamic component (0)	2022.06.29
[Vue] Component 3 (0)	2022.06.29
[Vue] Component 2 (0)	2022.06.25
[Vue] Component 1 (0)	2022.06.25

App.vue

<template>
  <div>
    <GreetingUser id="greeting"></GreetingUser>
  </div>
</template>
<script>
import GreetingUser from "./components/GreetingUser";
export default {
  name: "App",
  components: {
    GreetingUser,
    // ProductList,
  },
  data() {
    return {
      // products: [
      //   { id: 0, name: "TV", price: 500000, company: "LG" },
      //   { id: 1, name: "전자렌지", price: 200000, company: "삼성" },
      //   { id: 2, name: "가스오븐", price: 300000, company: "한화" },
      //   { id: 3, name: "냉장고", price: 50000, company: "대우" },
      //   { id: 4, name: "에어컨", price: 1000000, company: "해태" },
      // ],
    };
  },
  methods: {},
};
</script>

<style></style>

GreetingUser.vue

<template>
  <div>
    <h2 v-bind="$attrs">Hello {{ username }}</h2>
    <h3 v-bind="$attrs">오늘이 {{ numberOfVisit }} 번째 방문입니다.</h3>
    <h3>사이트 이름은 {{ siteInfo.name }}입니다</h3>
  </div>
</template>
<script>
export default {
  name: "GreetingUser",
  inheritAttrs: false,
  props: {
    //username: String,
    username: {
      type: String,
      default: "user!",
    },
    numberOfVisit: {
      type: Number,
      default: 0,
    },
    siteInfo: {
      type: Object,
      default: () => {
        return { name: "-", teacher: "-" };
      },
    },
  },
};
</script>
<style scoped></style>

ProductList.vue

<template>
  <div>
    <ul>
      <ProductItem
        v-for="product in products"
        :key="product.id"
        :product="product"
      ></ProductItem>
    </ul>
    <ProductItem />
  </div>
</template>

<script>
import ProductItem from "./ProductItem";

export default {
  name: "product-list",
  components: {
    ProductItem,
  },
  props: {
    products: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>

<style></style>

ProductItem.vue

<template>
  <li>
    <p class="title">{{ product.name }}</p>
    <p>
      <img
        :src="`https://placeimg.com/200/100/${product.id}`"
        :alt="product.name"
      />
    </p>
    <p class="price">{{ product.price }}</p>
  </li>
</template>

<script>
export default {
  name: "product-item",
  props: {
    product: {
      type: Object,
      default: () => {
        return { id: 0, name: "TV", price: 500000, company: "LG" };
      },
    },
  },
};
</script>

<style scoped>
li {
  border: 2px solid salmon;
  margin-bottom: 0.5rem;
}

.title {
  font-size: 24px;
  color: #2c82c9;
  font-weight: bold;
}
</style>

vue Component 사용법

1. import

2. components object 추가

3. props value 넘겨줌

4. 컴포넌트에서 props 받아서 처리

'Web > Vue' 카테고리의 다른 글

[Vue] Component5 , keep-alive, dynamic component (0)	2022.06.29
[Vue] Component4, your input is (0)	2022.06.29
[Vue] Component 2 (0)	2022.06.25
[Vue] Component 1 (0)	2022.06.25
[Vue] Watch (0)	2022.06.25

GreetingUser.vue

<template>
  <h2>Hello {{ username }}</h2>
  <h3>오늘이 {{ numberOfVisit }} 번째 방문입니다.</h3>
  <h3>사이트 이름은 {{ siteInfo.name }}입니다</h3>
</template>
<script>
export default {
  name: "GreetingUser",
  props: {
    //username: String,
    username: {
      type: String,
      default: "user!",
    },
    numberOfVisit: {
      type: Number,
      default: 0,
    },
    siteInfo: {
      type: Object,
      default: () => {
        return { name: "-", teacher: "-" };
      },
    },
  },
};
</script>
<style scoped></style>

App.vue

<template>
  <div>
    <!-- 데이터를 자식 컴포넌트에서 바꿀 수 없다. -->
    <GreetingUser
      :username="username"
      :numberOfVisit="numberOfVisit"
      :siteInfo="siteInfo"
    />
    <GreetingUser username="abcd" />

    <GreetingUser />
    <button @click="changeName()">change</button>
  </div>
</template>
<script>
import GreetingUser from "./components/GreetingUser.vue";
export default {
  name: "App",
  components: { GreetingUser },
  data() {
    return {
      username: "scalper",
      numberOfVisit: 25,
      siteInfo: {
        name: "vue practice",
        teacher: "scalper",
        subject: "frontend",
      },
    };
  },
  methods: {
    changeName() {
      this.username = "Ddochi";
    },
  },
};
</script>

<style></style>

'Web > Vue' 카테고리의 다른 글

[Vue] Component4, your input is (0)	2022.06.29
[Vue] Component 3 (0)	2022.06.29
[Vue] Component 1 (0)	2022.06.25
[Vue] Watch (0)	2022.06.25
[Vue] Computed (0)	2022.06.25

GreetingUser.vue

<template>
  <h2>Hello {{ username }}</h2>
</template>
<script>
export default {
  name: "GreetingUser",
  props: {
    //username: String,
    username: {
      type: String,
      default: "user!",
    },
  },
};
</script>
<style scoped></style>

App.vue

<template>
  <div>
    <!-- 데이터를 자식 컴포넌트에서 바꿀 수 없다. -->
    <GreetingUser :username="username" />
    <GreetingUser username="abcd" />
    <GreetingUser username="pororo" />
    <GreetingUser username="monkey" />
    <GreetingUser />
    <button @click="changeName()">change</button>
  </div>
</template>
<script>
import GreetingUser from "./components/GreetingUser.vue";
export default {
  name: "App",
  components: { GreetingUser },
  data() {
    return {
      username: "scalper",
    };
  },
  methods: {
    changeName() {
      this.username = "Ddochi";
    },
  },
};
</script>

<style></style>

'Web > Vue' 카테고리의 다른 글

[Vue] Component 3 (0)	2022.06.29
[Vue] Component 2 (0)	2022.06.25
[Vue] Watch (0)	2022.06.25
[Vue] Computed (0)	2022.06.25
[Vue] Directives (0)	2022.06.24

<template>
  <div>
    <h1>watchers</h1>
    <h1>current money :: {{ money }}</h1>
    <div>
      <button @click="money += 100">earn money</button>
      <button @click="money -= 100">spend money</button>
    </div>
    <h3>{{ receipt }}</h3>
    <button @click="receipt.food += 500">buy food</button>
    <hr />
    <input type="text" v-model="userName" />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      userName: "scalper",
      money: 0,
      receipt: {
        food: 3000,
        fee: 2000,
        fare: 10000,
      },
    };
  },
  watch: {
    //오브젝트의 경우 다르게 해야함
    // receipt(newValue, oldValue) {
    //   console.log("영수증에 값 변화가 있음", newValue, oldValue);
    // },
    userName: {
      handler(newValue) {
        console.log(newValue, "newValue");
      },
      immediate: true,
    },

    receipt: {
      handler(newValue) {
        console.log("영수증에 값 변화", newValue);
      },
      deep: true,
    },
    money(newValue, oldValue) {
      console.log(oldValue);
      if (newValue > 2000 && newValue > oldValue) {
        console.log("mission complete");
      }

      if (oldValue < 1500 && newValue < oldValue) {
        console.log("save money!");
      }
    },
  },
};
</script>

<style>
a {
  font-size: 24px;
  display: block;
}

label {
  font-size: 22px;
  font-weight: bold;
  margin-right: 1 rem;
}

div {
  margin-bottom: 1rem;
}
</style>

watch는 값의 변화를 추적할 수 있다.

'Web > Vue' 카테고리의 다른 글

[Vue] Component 2 (0)	2022.06.25
[Vue] Component 1 (0)	2022.06.25
[Vue] Computed (0)	2022.06.25
[Vue] Directives (0)	2022.06.24
[Vue] 폼 핸들링 (0)	2022.06.24

딩코딩 : Computer Science 블로그

Web/Vue

[Vue] teleport

'Web > Vue' 카테고리의 다른 글

[Vue] slot

app.vue

CardView.vue

'Web > Vue' 카테고리의 다른 글

[Vue] Component5 , keep-alive, dynamic component

'Web > Vue' 카테고리의 다른 글

[Vue] Component4, your input is

'Web > Vue' 카테고리의 다른 글

[Vue] Component 3

'Web > Vue' 카테고리의 다른 글

[Vue] Component 2

'Web > Vue' 카테고리의 다른 글

[Vue] Component 1

'Web > Vue' 카테고리의 다른 글

[Vue] Watch

'Web > Vue' 카테고리의 다른 글

+ Recent posts

티스토리툴바