딩코딩 : Computer Science 블로그

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>

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을 해주고 뒤에 파라미터를 넣어줄 수 있다.

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 받아서 처리

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>

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>

<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는 값의 변화를 추적할 수 있다.

<template>
  <div>
    <h1>Computed</h1>
    <h2>{{ address }}</h2>
    <h2>내가 받은 점수의 합 {{ totalScore }}</h2>
    <h2>method : {{ getTotalScore() }}</h2>
    영어점수<input type="number" v-model="grade.eng" /> 학생이름<input
      type="text"
      v-model="studentName"
    />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      username: "scalper",
      address1: "성남시",
      address2: "분당구",
      address3: "정자로",
      grade: {
        math: 70,
        kor: 90,
        eng: 50,
        sci: 55,
      },
      studentName: "",
    };
  },
  computed: {
    //computed는 cache가 된다 !!
    address() {
      return `${this.address1} - ${this.address2} - ${this.address3}`;
    },
    totalScore() {
      console.log("computed!!");
      // destructuring
      const { math, kor, eng, sci } = this.grade;
      return math + kor + eng + sci;
    },
  },
  methods: {
    //메서드는 화면에 변동이 있을 때마다 계산을 한다!
    getTotalScore() {
      console.log("methods!!");
      const { math, kor, eng, sci } = this.grade;
      return math + kor + eng + sci;
    },
  },
};
</script>

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

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

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

Computed는 간략한 계산

값 캐시효과

<template>
  <div>
    <h1 v-focus>Directives</h1>
    <h2 v-once>유저의 이름은 {{ username }}</h2>
    <button @click="changeName">change name</button>

    <!-- pre 사용하면 해당 dom은 컴파일에서 제외되고 출력 -->
    <h2 v-pre>{{ username }}</h2>
    <input v-focus type="text" />
    highlight -> <input type="text" v-highlight />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      username: "scalper",
    };
  },
  directives: {
    focus: {
      mounted(e1) {
        e1.focus();
      },
    },
    highlight: {
      mounted(e1) {
        console.log({ e1 });
        e1.oninput = () => {
          e1.style.background = "salmon";
          e1.style.color = "#fff";
        };
        e1.onmouseout = () => {
          e1.style.background = "green";
        };
      },
    },
  },
  methods: {
    changeName() {
      console.log("name change!!!");
      this.username = "code!!!";
    },
  },
};
</script>

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

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

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