IT기록 isaac

[Vue.js] Vue CLI 프로젝트 : props의 활용 이전 글 2022.02.12 - [JS & Framework/vue.js] - [Vue.js] Vue.js CLI 프로젝트 : 부모 자식 간의 데이터 전달 Props 2022.02.12 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vuetify Buttons 버튼 사용하기 2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : 컴포넌트(Component) 등록과 사용 2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vue 파일 공부하기 2022.02.11 - [JS & Fram..

[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 파일의 코드는 아래 이미지와 같..

[Vue.js] Vue CLI 프로젝트 : 컴포넌트(Component) 등록과 사용 2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vue 파일 공부하기 지난 글에 이어서 글을 작성합니다. 이번 글에서는 Vue 컴포넌트(Component)를 등록하고 사용하는 방법을 알아보겠습니다. # 컴포넌트를 사용하는 방법 1 먼저 Vue CLI 프로젝트 구조에서 App.vue 파일과 같은 위치에 Home.vue라는 파일을 생성합니다. Home.vue 파일은 다음과 같이 작성합니다. 그리고 App.vue 파일로 돌아와서 태그 제일 상단에 위에서 만든 home 컴포넌트에 대한 정보를 입력합니다. import homeComponent from "./home...

[Vue.js] Vue CLI 프로젝트 : Vue 파일 공부하기 Vue CLI 프로젝트 설치 및 Vuetify 플러그인도 설치를 하게 되면 프로젝트의 구조는 아래 이미지와 같이 복잡한 구조를 나타내게 됩니다. App.vue 파일을 main 페이지로 생각하고 App.vue 파일부터 확인해봅니다. 아래 이미지에서 왼쪽이 처음 소스고, 오른쪽 이미지가 변경한 소스인데요. 태그 안에 html 코드를 넣으면 메인 페이지가 아래 이미지 [ 왼쪽에서 오른쪽으로 ] 와 같이 변경되는 것을 확인할 수 있습니다. 태그의 바인딩을 사용해서 작업도 해보죠. data에 세팅된 title의 값 "Hello Vuetify"를 바인딩된 것을 확인할 수 있습니다. 버튼하고 버튼의 간단한 조작도 추가해봅니다. 다음과 같은 화면을 확인할..