Vue.js 영화 App) 영화 정보 만들기

1. 기본 데이터 정의하기

<template>
  <h1>영화 정보</h1>
  <div>
    <h3>{{title}}</h3>
    <p>개봉: {{year}}</p>
    <p>장르: {{category}}</p>
  </div>
</template>

<script>
export default {
  name: 'App', // 컴포넌트 명
  data() {
    return {
      title: "에일리언",
      year: 2023,
      category: "SF"
    }
  }
}
</script>

<style>

</style>

2. 제목에 CSS 주기

• :속성명="데이터"

<template>
  <h1>영화 정보</h1>
  <div>
    <h3 class="bg-yello" :style="titleColor">{{title}}</h3> <!--:속성명="데이터"-->
    <p>개봉: {{year}}</p>
    <p>장르: {{category}}</p>
  </div>
</template>

<script>
export default {
  name: 'App', // 컴포넌트 명
  data() {
    return {
      title: "에일리언",
      year: 2023,
      category: "SF",
      titleColor: "color: red"
    }
  }
}
</script>

<style>
.bg-yellow {
  background: yellow;
  padding: 10px;
}
</style>

3. 음식명 반복문 돌리기

<template>
  <h1>영화 정보</h1>
  <div>
    <h3 class="bg-yello" :style="titleColor">{{title}}</h3> <!--:속성명="데이터"-->
    <p>개봉: {{year}}</p>
    <p>장르: {{category}}</p>
  </div>
  <p>{{ foods[0] }}</p>
  <p>{{ foods[1] }}</p>
  <p>{{ foods[2] }}</p>
  <hr />
  <p v-for="(item, i) in foods" :key="i">{{ item }}</p>
</template>

<script>
export default {
  name: 'App', // 컴포넌트 명
  data() {
    return {
      foods: ["팝콘", "오징어다리", "핫도그"],
      title: "에일리언",
      year: 2023,
      category: "SF",
      titleColor: "color: red"
    }
  }
}
</script>

<style>
.bg-yellow {
  background: yellow;
  padding: 10px;
}
</style>

4. 영화 정보 객체로 반복문 돌리기

<template>
  <h1>영화 정보</h1>
  <div v-for="(movie, i) in movies" :key="i">
    <h3 class="bg-yellow" :style="{ color: movie.titleColor }">{{ movie.title }}</h3>
    <p>개봉: {{ movie.year }}</p>
    <p>장르: {{ movie.category }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      movies: [
        {
          title: "에이리언: 로물루스",
          year: "2024년 8월 16일",
          category: "SF, 호러, 액션, 스릴러, 크리처",
          titleColor: "red"
        },
        {
          title: "트위스터스",
          year: "2024년 8월 14일",
          category: "재난, 액션, 모험, 드라마",
          titleColor: "brown"
        },
        {
          title: "스픽 노 이블",
          year: "2024년 9월 11일",
          category: "공포/드라마",
          titleColor: "grey"
        },
        {
          title: "안녕, 할부지",
          year: "2024년 9월 4일",
          category: "다큐멘터리, 애니메이션",
          titleColor: "green"
        },
      ]
    }
  }
}
</script>

<style>
.bg-yellow {
  background: yellow;
  padding: 10px;
}
</style>