1. v-for 로 map이나 forEach 역할을 할 수 있다.

<Card
    v-for="person of people"
	v-bind:key="person.id"
    v-bind:name="person.name"
    v-bind:hobby="person.hobby"
  />

2. Card 컴포넌트 구현

 const Card = {
  props: {
    name: String,
    hobby: String,
  },
  template: `
    <h1>{{ name }}</h1>
    <h2>{{ hobby }}</h2>
  `,
};

3. 부모App에서 Card 컴포넌트 사용

const App = {
  data() {
    return {
      people: [
        {
          id: 1,
          name: 'Wendy',
          hobby: '자전거',
        },
        {
          id: 2,
          name: '박유진',
          hobby: '노래',
        },
        {
          id: 3,
          name: '한수빈',
          hobby: '독서',
        },
      ],
    };
  },
  components: {
    Card,
  },
  methods: {
    addPerson() {
      this.people.push({
        id: 4,
        name: '장원영',
        hobby: '춤',
      });
    },
  },
};

 

[전체 예시 코드]

<!DOCTYPE html>
<html>
  <head>
    <title>Example 05</title>
  </head>
  <body>
    <div id="app">
      <Card
        v-for="person of people"
        v-bind:name="person.name"
        v-bind:hobby="person.hobby"
      />
    </div>
  </body>

  <script src="https://unpkg.com/vue"></script>
  <script>
    const Card = {
      props: {
        name: String,
        hobby: String,
      },
      template: `
        <h1>{{ name }}</h1>
        <h2>{{ hobby }}</h2>
      `,
    };

    const App = {
      data() {
        return {
          people: [
            {
              id: 1,
              name: 'Wendy',
              hobby: '자전거',
            },
            {
              id: 2,
              name: '박유진',
              hobby: '노래',
            },
            {
              id: 3,
              name: '한수빈',
              hobby: '독서',
            },
          ],
        };
      },
      components: {
        Card,
      },
      methods: {
        addPerson() {
          this.people.push({
            id: 4,
            name: '장원영',
            hobby: '춤',
          });
        },
      },
    };
    Vue.createApp(App).mount('#app');
  </script>
</html>

 

[실행 결과]

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

[Vue.js] #6 카드 컴포넌트 & 카드 리스트 만들기  (0) 2022.03.03
[Vue.js] #5 vite로 Vue 프로젝트 (진짜) 시작하기  (0) 2022.03.03
[Vue.js] #3 컴포넌트 생명주기 / v-if 속성 사용  (0) 2022.03.03
[Vue.js] #2 부모 - 자식 관계 컴포넌트 구현  (0) 2022.03.03
[Vue.js] #1 시작하기  (0) 2022.03.03

1. 컴포넌트들의 생명 주기별로 콘솔을 찍어본다. -> hook 으로 각각 콘솔 찍어보기 가능

const Display = {
        props: {
          emoji: String,
        },
        beforeCreate() {
          console.log('beforeCreate');
        },
        created() {
          console.log('created');
        },
        beforeMount() {
          console.log('beforeMount');
        },
        mounted() {
          console.log('mounted');
        },
        beforeUpdate() {
          console.log('beforeUpdate');
        },
        updated() {
          console.log('updated');
        },
        beforeUnmount() {
          console.log('beforeUnmount');
        },
        unmounted() {
          console.log('unmounted');
        },
        template: `
          <h1>{{ emoji }}</h1>`,
      };

 

2. v-if 속성 사용

boolean 값으로 컴포넌트를 display / undisplay 한다.

const Toggle = {
        data() {
          return {
            isOn: true,
            emoji: '🌙',
          };
        },
        components: {
          Display,
        },
        template: `
        <div v-if=isOn><Display :emoji="emoji" /></div>
        <button @click="emoji='☀️'">sun</button>
        <button @click="isOn=!isOn">toggle</button>`,
      };

 

[전체 예시 코드]

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
      const Display = {
        props: {
          emoji: String,
        },
        beforeCreate() {
          console.log('beforeCreate');
        },
        created() {
          console.log('created');
        },
        beforeMount() {
          console.log('beforeMount');
        },
        mounted() {
          console.log('mounted');
        },
        beforeUpdate() {
          console.log('beforeUpdate');
        },
        updated() {
          console.log('updated');
        },
        beforeUnmount() {
          console.log('beforeUnmount');
        },
        unmounted() {
          console.log('unmounted');
        },
        template: `
          <h1>{{ emoji }}</h1>`,
      };

      const Toggle = {
        data() {
          return {
            isOn: true,
            emoji: '🌙',
          };
        },
        components: {
          Display,
        },
        template: `
        <div v-if=isOn><Display :emoji="emoji" /></div>
        <button @click="emoji='☀️'">sun</button>
        <button @click="isOn=!isOn">toggle</button>`,
      };

      Vue.createApp(Toggle).mount('#app');
    </script>
  </body>
</html>

 

[실행 결과]

1. 최초 랜더링

2. Sun 버튼 클릭

3. toggle 버튼 클릭

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

[Vue.js] #6 카드 컴포넌트 & 카드 리스트 만들기  (0) 2022.03.03
[Vue.js] #5 vite로 Vue 프로젝트 (진짜) 시작하기  (0) 2022.03.03
[Vue.js] #4 v-for 사용하여 리스트 자료 하나씩 컴포넌트에 표현하기  (0) 2022.03.03
[Vue.js] #2 부모 - 자식 관계 컴포넌트 구현  (0) 2022.03.03
[Vue.js] #1 시작하기  (0) 2022.03.03

부모 - 자식 관계의 컴포넌트 구현

 

1. 자식 요소를 태그로 사용 가능

v-bind -> : 으로 축약표현

왜? bind를 하면 Vue에서 정의한 데이터를 찾음 -> count 라는 데이터(Parent에서 정의) 를 찾아서 Child에게 props로 넘김

<body>
    <div id="app">
      <Child :something="count" />
    </div>
</body>

2. 자식 요소 생성 (순서 중요 : 자식먼저 작성)

<script src="https://unpkg.com/vue"></script>
  <script>
    const Child = {
      props: { somthing: Number },
      data() {
        return {
          color: 'red',
        };
      },
      methods: {
        changeColor: function () {
          if (this.color === 'red') return (this.color = 'blue');
          this.color = 'red';
        },
      },
      template: `
        <h1 v-bind:style="{ color : color }"> Child Componont </h1>
        <h2> {{ something }} </h2>
        <button @click="changeColor">Switch Color</button>
        `,
    };

3. 부모 요소 생성

const Parent = {
      data() {
        return {
          count: 0,
        };
      },
      components: {
        Child,
      },
    };

    Vue.createApp(Parent).mount('#app');
  </script>

 

 

전체 예시 코드

<!DOCTYPE html>
<html>
  <head>
    <title>Example 03</title>
  </head>
  <body>
    <div id="app">
      <Child :something="test" />
    </div>
  </body>

  <script src="https://unpkg.com/vue"></script>
  <script>
    const Child = {
      props: { somthing: Number },
      data() {
        return {
          color: 'red',
        };
      },
      methods: {
        changeColor: function () {
          if (this.color === 'red') return (this.color = 'blue');
          this.color = 'red';
        },
      },
      template: `
        <h1 v-bind:style="{ color : color }"> Child Componont </h1>
        <h2> {{ something }} </h2>
        <button @click="changeColor">Switch Color</button>
        `,
    };

    const Parent = {
      data() {
        return {
          count: 0,
        };
      },
      components: {
        Child,
      },
    };

    Vue.createApp(Parent).mount('#app');
  </script>
</html>

 

실행 결과

 

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

[Vue.js] #6 카드 컴포넌트 & 카드 리스트 만들기  (0) 2022.03.03
[Vue.js] #5 vite로 Vue 프로젝트 (진짜) 시작하기  (0) 2022.03.03
[Vue.js] #4 v-for 사용하여 리스트 자료 하나씩 컴포넌트에 표현하기  (0) 2022.03.03
[Vue.js] #3 컴포넌트 생명주기 / v-if 속성 사용  (0) 2022.03.03
[Vue.js] #1 시작하기  (0) 2022.03.03

빈 폴더에 index.html 새파일 추가

 

필수 핵심

1. vue 라이브러리 cdn

<script src="https://unpkg.com/vue"></script>

2. 정의한 app 마운트 위치 잡기

Vue.createApp(Counter).mount('#counter');

 

전체예시 코드

#index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Example 02</title>
  </head>
  <body>
    <div id="counter">
      <div>Counter : <span v-text="count"></span></div>
      <div>DoubleCounter : {{ count * 2 }}</div>
      <button v-on:click="increase">up</button>
      <button @click="decrease">down</button>
    </div>
  </body>
   <script src="https://unpkg.com/vue"></script>
    <script>
      const Counter = {
        data() {
          return {
            count: 0,
          };
        },
        methods: {
          increase() {
            this.count++;
          },
          decrease() {
            this.count--;
          },
        },
      };
      Vue.createApp(Counter).mount('#counter');
    </script>
</html>

실행결과

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

[Vue.js] #6 카드 컴포넌트 & 카드 리스트 만들기  (0) 2022.03.03
[Vue.js] #5 vite로 Vue 프로젝트 (진짜) 시작하기  (0) 2022.03.03
[Vue.js] #4 v-for 사용하여 리스트 자료 하나씩 컴포넌트에 표현하기  (0) 2022.03.03
[Vue.js] #3 컴포넌트 생명주기 / v-if 속성 사용  (0) 2022.03.03
[Vue.js] #2 부모 - 자식 관계 컴포넌트 구현  (0) 2022.03.03

+ Recent posts

티스토리툴바