Vue 컴포넌트

vue_app2 프로젝트

MyCheckbox3 컴포넌트

MyCheckbox3 컴포넌트 만들기

src/MyCheckbox3.vue

<template>
  <div class="box">
    <h1>checkbox</h1>
    <p>{{ value }}</p>
    <hr />
    <input type="checkbox" v-model="value" />
    <div id="hello" v-show="value">Hello Vue.js</div>
  </div>
</template>

<script>
export default {
  name: 'MyCheckbox3',
  data() {
    return {
      value: false
    };
  }
}
</script>

<style scoped>
  div.box { display: inline-block; padding: 20px; width: 300px; 
        border: 1px solid gray; box-shadow: 5px 5px 5px #aaa; }
  p { font-size: 15pt; color: blue; }
  input { width: 30px; height: 30px;  }
  div#hello { margin-top: 20px; padding: 20px;
    background-color: lightGreen; border: 1px solid gray;
    text-align: center; font-size: 20pt; }
</style>

컴포넌트 이름은 반드시 여러 단어이고, pascal-case(첫 문자는 대문자)이어야 한다.

 name: 'MyCheckbox3',

#@## App 컴포넌트 수정
scr/App.vue

<template>
<div>
<img alt="Vue logo" src="./assets/logo.png">
    <MyCheckbox3 />
  </div>
</template>

<script>
import MyCheckbox3 from './MyCheckbox3.vue'

export default {
  name: 'App',
  components: {
    MyCheckbox3
  }
}
</script>

<style scoped>
div { vertical-align: top; margin: 10px; }
img { margin: 10px; }
</style>

<MyCheckbox3 />

이 부분에 MyCheckbox3 컴포넌트 내용이 출력

import MyCheckbox3 from './MyCheckbox3.vue'

MyCheckbox3 컴포넌트 소스코드를 import

components: {
    MyCheckbox3
  }

MyCheckbox3 컴포넌트를 사용하겠다는 선언

MyButton1 컴포넌트

MyButton1 컴포넌트 만들기

src/MyButton1.vue

<template>
  <div class="box">
    <h1>button</h1>
    <p>{{ visible }}</p>
    <hr />
    <button type="button" v-on:click="show">보이기</button>
    <button type="button" v-on:click="hide">감추기</button>
    <div id="hello" v-show="visible">Hello Vue.js</div>
  </div>
</template>

<script>
export default {
  name: 'MyButton1',
  data() {
    return {
      visible: false
    };
  },
  methods: {
    show() {
      this.visible = true;
    },
    hide() {
      this.visible = false;
    }
  }
}
</script>

<style scoped>
  div.box { display: inline-block; padding: 20px; width: 300px; 
        border: 1px solid gray; box-shadow: 5px 5px 5px #aaa; }
  p { font-size: 15pt; color: blue; }
  button { padding: 0.4em 3em; margin-right: 5px; }
  div#hello { margin-top: 20px; padding: 20px;
    background-color: lightGreen; border: 1px solid gray;
    text-align: center; font-size: 20pt; }
</style>

App 컴포넌트 수정

src/App.vue

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png">
    <MyCheckbox3 />
    <MyButton1 />
  </div>
</template>

<script>
import MyCheckbox3 from './MyCheckbox3.vue'
import MyButton1 from './MyButton1.vue'

export default {
  name: 'App',
  components: {
    MyCheckbox3, MyButton1
  }
}
</script>

<style scoped>
div { vertical-align: top; margin: 10px; }
img { margin: 10px; }
</style>

<MyButton1 />

여기에 MyButton1의 컴포넌트가 출력됨

import MyCheckbox3 from './MyCheckbox3.vue'
import MyButton1 from './MyButton1.vue'

MyButton1 컴포넌트 소스코드 import

components: {
    MyCheckbox3, MyButton1
  }

MyButton1 컴포넌트를 사용하겠다는 선언

MySelect3 컴포넌트 만들기

src/MySelect3.vue

<template>
  <div class="box" v-bind:class="color">
    <h1>select</h1>
    <select v-model="color">
      <option>yellow</option>
      <option>green</option>
      <option>blue</option>
      <option>red</option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'MySelect3',
  data() {
    return {
      color: "yellow"
    };
  }
}
</script>

<style scoped>
  div.box { display: inline-block; padding: 20px; width: 300px; 
        border: 1px solid gray; box-shadow: 5px 5px 5px #aaa; }
  select { padding: 5px; font-size: 15pt; width: 150px; margin: 10px; }
  .yellow { background-color: #ffa; }
  .green { background-color: #bfb; }
  .blue { background-color: #bbf; }
  .red { background-color: #fbb; }
</style>

App 컴포넌트 수정

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png">
    <MyCheckbox3 />
    <MyButton1 />
    <MySelect3 />
  </div>
</template>

<script>
import MyCheckbox3 from './MyCheckbox3.vue'
import MyButton1 from './MyButton1.vue'
import MySelect3 from './MySelect3.vue'

export default {
  name: 'App',
  components: {
    MyCheckbox3, MyButton1, MySelect3
  }
}
</script>

<style scoped>
div { vertical-align: top; margin: 10px; }
img { margin: 10px; }
</style>