Vue.js 영화App) 네비게이션 바 추가하기

1. Navbar.vue 만들기

• 컴포넌트의 이름은 대문자로 시작

2. 코드 스니펫 기능으로 자동완성하기

vinit

<template lang="">
    <div>
        
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="">
    
</style>

3. 네브바 컴포넌트 만들기

• 이름만 적어도 되나 너무 간단한 이름은 에러가 날 수 있기에 뒤에 Component를 붙임

<template>
    <nav>
        <a href="">Home</a>
        <a href="">Movies</a>
        <a href="">About</a>
    </nav>
</template>

<script>
export default {
    name: 'NavbarComponent',
}
</script>

<style>
    
</style>

4. 네브바 적용하기

• 네브바 컴포넌트 항목을 가져와서 추가하고 변수로 정의

• 필요한 곳에 추가

<template>
  <div>
    <Navbar />
    ...
  </div>
</template>

<script>
import movies from './assets/movies'; // 영화 데이터
import Navbar from './components/Navbar.vue'; // 네브바 데이터

export default {
  name: 'App',
  data() {
    return {
      isModal: false,
      selectedMovie: {},
      movies: movies
    }
  },
  methods: {
    incrementLike(i) {
      this.movies[i].like++;
    },
    openModal(movie) {
      this.selectedMovie = movie;
      this.isModal = true;
    }
  },
  components: {
    Navbar: Navbar,
  }  
}
</script>

<style>
...
</style>

5. Navbar.vue에 CSS 적용하기

<template>
    <nav class="navbar">
        <a href="">Home</a>
        <a href="">Movies</a>
        <a href="">About</a>
    </nav>
</template>

<script>
export default {
    name: 'NavbarComponent',
}
</script>

<style>
.navbar {
    background: #000;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.navbar a{
    color: #fff;
    text-decoration: none;
    padding: 1em;
}
</style>