vue 컴포넌트의 주요 기능

vue.js의 자바스크립트에서는 다양한 기능이 있어 컴포넌트를 구성하고, 데이터와 이벤트를 관리할 수 있다.

 

vue 컴포넌트에서 사용할 수 있는 주요 기능

1. data()

• 컴포넌트의 상태(데이터)를 정의한다.
• 이 함수는 객체를 반환하며, 반환된 객체는 컴포넌트 인스턴스의 데이터로 사용된다.

data() {
  return {
    message: 'Hello, Vue!',
    count: 0
  };
}

2. methods

• 컴포넌트에서 사용할 메서드를 정의한다.
• 메소드는 템플릿에서 호출하거나 다른 메소드 내에서 호출할 수 있다.

methods: {
  increment() {
    this.count++;
  }
}

3. computed

• 계산된 속성을 정의한다.
• 계산된 속성은 종속된 데이터가 변경될 때 자동으로 다시 계산된다.

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

4. watch

• 데이터 변화를 감시하고, 데이터가 변경될 때 특정 로직을 실행한다.

watch: {
  count(newValue, oldValue) {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
  }
}

5. props

• 부모 컴포넌트로부터 전달받을 수 있는 데이터를 정의한다.
• props는 컴포넌트 간 데이터 전달에 사용된다.

props: {
  initialCount: {
    type: Number,
    default: 0
  }
}

6. components

• 하위 컴포넌트를 등록한다.
• 이를 통해 컴포넌트 내에서 다른 컴포넌트를 사용할 수 있다.

components: {
  ChildComponent
}

7. 라이프사이클 훅

• 컴포넌트의 생명주기 동안 특정 시점에 호출되는 메소드이다.
• 주요 라이프사이클 훅
  • created: 인스턴스가 생성된 후 호출
  • mounted: 인스턴스가 DOM에 마운트된 후 호출
  • updated: 데이터가 변경되어 DOM이 업데이트된 후 호출
  • destroyed: 인스턴스가 파괴된 후 호출

created() {
  console.log('Component created!');
},
mounted() {
  console.log('Component mounted!');
},
updated() {
  console.log('Component updated!');
},
destroyed() {
  console.log('Component destroyed!');
}

8. directives

• directives를 정의하여 DOM 요소의 동작을 제어할 수 있다.

directives: {
  focus: {
    inserted(el) {
      el.focus();
    }
  }
}

9. filters

• 데이터를 형식화하기 위한 필터를 정의한다.

filters: {
  capitalize(value) {
    if (!value) return '';
    value = value.toString();
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

10. mixins

• 다른 컴포넌트 간에 재사용 가능한 기능을 정의할 수 있다.

const myMixin = {
  created() {
    console.log('Mixin created!');
  }
};

export default {
  mixins: [myMixin],
  created() {
    console.log('Component created!');
  }
};

11. template

• HTML 템플릿을 정의하여 컴포넌트의 구조를 나타낸다.
• 템플릿은 데이터 바인딩을 통해 동적으로 업데이트된다.

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

 

예제)

<template>
  <div>
    <p>{{ message }}</p>
    <p>Reversed: {{ reversedMessage }}</p>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  name: "ExampleComponent",
  data() {
    return {
      message: 'Hello, Vue!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    }
  },
  created() {
    console.log('Component created!');
  },
  mounted() {
    console.log('Component mounted!');
  }
};
</script>

<style scoped>
p {
  font-size: 1.5rem;
  color: #333;
}
button {
  padding: 10px;
  font-size: 1rem;
}
</style>

 

이러한 기능들을 통해 vue.js를 더 잘 다룰 수 있다.