02.22 국비학원 98일차 (vuetify설정, 바인드/클릭이벤트/컴포넌트 테스트)

어제는 Vue.js 를 생성했고 오늘은 vuetify 를 설정해주었다.

vuetify란? : vue.js를 기반으로 구축된 UI 프레임워크로, ui 컴포넌트들을 별도의 디자인 스킬 없이 예쁘게 꾸며주는 역할을 한다. (이전에 썼던 부트스트랩 같은 역할)

 

++설치과정 참고

[ 라이트 컬럼 ] Vuetify 설정하기 : 네이버 카페 (naver.com)

에디로봇아카데미 : 네이버 카페

모든 설정을 마친 후 정상적으로 작동하는 모습을 확인할 수 있다.

 

BindTest.vue 파일 생성

템플릿은 실제 화면에 보여지는 html 태그가 들어가고 스크립트에는 html에서 동작할 자바스크립트를 작성한다.

router 의 index.js 에서 맵핑 설정하기. import 자동 생성 안되면 직접 작성해주기

여기서 name속성은 식별용이지 현재는 따로 쓰이진 않고 있다. import 할때 BindTest는 component 를 의미한다. name을 'bindt' 이런식으로 변경하여도 상관없음

path, name, component 모두 원하는대로 설정해주면 되는데, 보통 name명은 path 나 component 와 동일하게 맞춘다.

 

ClickEventTest.vue 파일 생성

ComponentTest.vue 파일 생성 (전역컴포넌트와 지역컴포넌트 차이를 확인)

/src/components 폴더 안에 생성하여 사용한다. globalComponent 라는 전역 태그를 생성한 것.

props 안에 vue 파일들끼리 주고받을 데이터를 넣는다.

전역컴포넌트의 경우 main.js 에 등록해야 사용가능하다.

router 에서 맵핑 경로 설정하기.

click-test 화면

click-test 화면

카운트하기 버튼을 네번 클릭함

component-test 화면

두번 클릭했을때 첫번째꺼는 1씩 증가해서 2이고, 두번째는 2씩 증가하여 104가 되었다.

 

++지역컴포넌트 참고

[Vue]Vue 기초 문법 배우기 8. 컴포넌.. : 네이버블로그 (naver.com)

[Vue]Vue 기초 문법 배우기 8. 컴포넌트 등록 및 사용법(전역 컴포넌트, 지역 컴포넌트, props)

 

 

---

• vue 파일을 변경 후 package.json을 다시 저장해주어야만 정상적으로 컴파일 되는 이슈가 있었는데, vue.config.js에 밑줄친 구문을 넣어주면 해결된다. (서버 재실행 필요)

• vscode 확장프로그램 중 vetur 을 설치하면 템플릿 자동완성 기능을 사용할 수 있다. vue 입력하면 기능 활성화