[vue] vue tutorial 뷰 튜토리얼 -3- (뷰 앱바 만들기)

소스코드 첨부합니다(https://github.com/jaeho310/vue-tutorial)

목차

vue tutorial -1- (뷰 시작하기)

vue tutorial -2- (컴포넌트와 인스턴스)

vue tutorial -3- (앱바 만들기)

vue tutorial -4- (props 사용하기)

vue tutorial -5- (뷰 라우터 사용하기)

vue tutorial -6- (뷰티파이 테이블)

 

 

이번 게시글에서는 vuetify를 활용하여 앱바를 만들고 vue 인스턴스 method 사용법을 정리합니다.

 

1. AppBar.vue

<template>
  <div>
    <v-app-bar
      dense
      dark
    >
      <ul class="menu">
        <li>
          <v-btn
          @click="toHome"
          >
          Home
          </v-btn>
        </li>
        <li>
          <v-btn
          @click="toPage1"
          >
          Page1
          </v-btn>
        </li>
        <li>
          <v-btn
          @click="toPage2"
          >
          Page2
          </v-btn>
        </li>
      </ul>
    </v-app-bar>
  </div>
</template>

<script>
export default {

  methods: {
    toHome() {
      alert("home")
    },
    toPage1() {
      alert("Page1")
    },
    toPage2() {
      alert("Page2")
    }
  }
}
</script>

<style>
  ul.menu li{ display: inline;}
</style>

vuetify를 사용합니다.

https://vuetifyjs.com/en/components/app-bars/

App-bar component

 

(1) 메뉴구성

상단 appbar 컴포넌트는 <v-app-bar>를 써서 만들어줍니다.

vuetify에 더 이쁜것들이 많지만 튜토리얼에서는 최대한 쉽게 ul, li 태그를 이용하여 메뉴를 구성해줍니다.

ul, li의 css는 맨 아래 <style>태그에서 설정해줍니다.

옆으로 나열될 수 있도록 diaplay를 inline으로 변경합니다. 

 

(2) 클릭이벤트

li 내부 요소는 <v-btn>입니다.

더 이쁘게 하고싶다면 vuetify 공식 홈페이지에 가서 더 이쁘게 만드시면 됩니다.

저는 간단하게 click이벤트와 이름만 넣었습니다.

@click="메서드명"만 넣어주시면 됩니다.

 

(3) vue 인스턴스 methods

export default로 밖으로 내보내는 vue 인스턴스에 methods라는 인스턴스를 추가하고

@click="메서드명"에 추가한 메서드를 선언해 주고 내부에 원하는 로직을 작성합니다.

저는 alert 창을 띄웠습니다.

 

2. 웹브라우저에서 확인

npm run serve 명령어를 통해 프론트 서버를 띄우고 localhost:8080에 들어가서 HOME을 클릭합니다.

상단 appbar가 완성되었습니다.