vue.js 3 [2] vue 컴포넌트

vue 컴포넌트 : 여러곳에서 가져다 쓸 수 있음

컴포넌트 파일 확장자는 .vue

 

3개 부분으로 나뉘어짐

 

<template> html 코드

<script> javascript 로직

<style> css 코드

 

컴포지션 API는 vue.js 3에 새로 추가된 것

 

<script> 안에 

<template>
  <div class="name">{{name}}</div>  <!-- template안에서 접근할 때는 중괄호를 앞뒤로 붙여야 한다다-->
</template>

<script>

export default {
  setup(){	//이 안에 필요한 로직 작성
    const name = 'CYP';

    return {  //object를 return해주면 template안에서 접근 가능해짐
      name
    };
  }
}
</script>

<style>
  .name {
    color: red;
  }
</style>