[Vue.js] Vue CLI 프로젝트 : Vuetify Buttons 버튼 사용하기

[Vue.js] Vue CLI 프로젝트 : Vuetify Buttons 버튼 사용하기

 

이전 글

2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI로 시작하기

2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트, vuetify 설치하기

2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vue 파일 공부하기

2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : 컴포넌트(Component) 등록과 사용

 

이전 글에 이어서 글을 작성하겠습니다. App.vue 파일의 코드는 아래 이미지와 같이 간단하게 수정하였습니다.

웹페이지 결과

웹 페이지 결과를 보면 button 태그가 이쁘지 않게, 버튼답지 않게 출력되는 것을 확인할 수 있는데요. 지난 번에 Vuetify를 설치하면 bootstrap 같은 Vue 컴포넌트형 플러그인(디자인 프레임워크)을 설치했는데, Vuetify의 태그를 이용해 버튼을 이쁘게 사용할 수 있습니다.

 

Vuetify 사이트(https://vuetifyjs.com/en/)에서 Learn > Guide > UI Components > Buttons 에서 다양한 버튼 모양을 제공하고 있습니다. (자세한 경로 이미지는 글 최 하단에서 확인!)

 

제공되는 코드를 그대로 복사해서 넣고, 웹 페이지를 보면 버튼 모양으로 바뀐 것을 확인할 수 있습니다.

클릭 이벤트를 넣어서 이름을 변경해보겠습니다.

 

App.vue 파일로 이동해서 methods를 추가했습니다. 

버튼에 클릭 이벤트도 추가했습니다.

결과 : 버튼 클릭으로 이름이 변경된 것을 확인할 수 있습니다.

 

 

 

---

# Vuetify Buttons 사용을 위한 가이드 문서 경로

Vuetify 사이트(https://vuetifyjs.com/en/)에서 Learn > Guide > UI Components > Buttons 에서 다양한 버튼 모양을 제공하고 있습니다.

 

Vuetify 사이트 접속 > Learn 클릭

Learn 클릭 > Guide 클릭 

왼쪽 문서 목록이 나타나게 되는데 여기에서 UI Components 선택 후 Buttons을 선택합니다.

 

Guide > UI Components > Buttons

Usage 사용방법이 나오고, 제공하고 있는 해당 태그를 사용하면 가운데에 버튼 모양이 제공되어서 보여집니다.

복사해서 자신의 프로젝트에 코드를 붙여넣습니다. 버튼 모양이 바뀐 것을 확인할 수 있습니다.

 

---

이번 글은 Vuetify Button 사용방법에 대해 알아보았습니다. 도움이 되셨다면 좋아요♥ 꾹! 구독♥ 꾹! 광고♥ 꾹! 은 저에게 큰 힘이 됩니다! 감사합니다!