Vue 파일 구조

Vue 구조를 파악하기 위해서 vue create 했을 때 기본 생성된 구조를 참조해도 좋습니다. 복잡해 보이면 단숙하게 만들어 놓고 살펴보는 것도 좋습니다.

App.vue 파일이 있을텐데요. 들어있던 내용을 모두 지우고 화면에 표시되는 부분인 template 부분만 남기고 모두 지워보세요.

<template>
Hello Vue  
</template>

localhost:8080 웹페이지에 Hello Vue 내용이 그대로 보일 것입니다.

이번에는 script 부분을 추가해보세요. name 부분의 오른쪽에 있는 값을 변경할 때마다 바뀌는 것을 알 수 있을 것입니다. 이런 부분을 활용해소 자바스크립트를 이용해서 값을 동적으로 할당 가능해집니다.

<template>
Hello {{ name }} 
</template>

<script>
export default {
  setup() {
    const name = "Vue Code"
    return {
      name
    }
  }
}
</script>

시각적인 부분으로 style을 지정해보세요. 글자 색이 바뀌는 것을 알 수 있습니다.

<template>
  <div class="name">
    Hello {{ name }} 
  </div>
</template>

<script>
export default {
  setup() {
    const name = "Vue Code"
    return {
      name
    }
  }
}
</script>

<style scoped>
.name {
  color: orange
}
</style>

template 영역으로 콘텐츠를 관리하고 script 부분에 코딩을 작성하고 script 화면을 예쁘게 한다고 생각하면 될 것 같습니다.