App.vue 파일

1. Vue

• JavaScript로 작성된 프런트엔드 JavaScript 프레임워크

• 비슷한 프레임워크로는 React와 Angular가 있음

• Vue가 더 가볍고 시작하기 쉬움

• JavaScript 파일로 배포되며 스크립트 태그로 웹 페이지에 추가할 수 있음

2. 코드를 작성하는 방법

• 기본 개념은 동일

• 하나를 배운 후 다른 하나로 쉽게 전환할 수 있음

3. App.vue : 메인 페이지

• Vue.js 애플리케이션의 루트 컴포넌트

• 애플리케이션의 기본 레이아웃과 초기 설정을 정의하는 역할

• <template> 섹션
•  Vue 컴포넌트의 HTML 구조를 정의
• 화면에 표시될 요소들을 작성
• Vue의 템플릿 문법을 사용하여 데이터 바인딩, 조건부 렌더링, 리스트 렌더링 등을 수행
• HTML 코드 추가해보기

<!--HTML 코드 작성-->
<template>
    <img alt="Vue logo" src="./assets/logo.png">
    <H1>Hello~</H1>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>


<!--Java Script 코드 작성-->
<script>
// 컨퍼넌트를 사용하지 않으면 오류남
import HelloWorld from './components/HelloWorld.vue'

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

<!--CSS 코드 작성-->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

• <script>섹션
• Vue 컴포넌트의 로직과 데이터를 정의
• 컴포넌트의 동작과 상태를 관리
• JavaScript 코드를 포함
• 컴포넌트의 데이터, 메서드, 라이프사이클 훅, 컴포넌트 간 통신을 관리
• export default: 컴포넌트를 외부에서 사용할 수 있도록 내보냅니다.
• data(), methods, computed, props, components 등 Vue 컴포넌트의 다양한 옵션을 설정

• <style>섹션
• Vue 컴포넌트의 스타일을 정의
• HTML 요소들이 어떻게 보여질지를 결정
• CSS 코드가 포함
• 컴포넌트 내에서 사용되는 요소들의 스타일을 정의
• <style>태그: 전역 스타일을 적용 가능
• scoped 속성을 사용하면 해당 컴포넌트에만 적용되는 로컬 스타일을 정의 가능
• CSS 전처리기(SCSS, LESS 등)를 사용 가능
 

• 각 섹션의 상호작용
• <template>와 <script>
• <template>의 HTML 구조는 <script>의 데이터와 로직을 통해 동적 변경
• <template>와 <style>
• <template>의 요소들은 <style>의 CSS 규칙에 따라 스타일이 적용
• <style>의 클래스와 ID 선택자들은 <template>의 요소에 직접 적용, 화면에 표시되는 방식에 영향
• <script>와 <style>
• <script>의 동적 클래스나 인라인 스타일은 <style>의 규칙과 결합되어 동적으로 요소의 스타일 변경