Vue.js

Modal 0. 시작하기 전 일단 시작하기 전에 페이지를 꾸며봅시다. #1. App.vue에 들어가서 다음과 같이 입력해 이미지를 추가해 줍니다. ... ... ... // 1. Modal 이번엔 Modal 창을 만들어 봅시다. Modal이란? 추가 정보를 제공하거나 사용자 입력을 요구하거나 확인을 요청하기 위해 메인 콘텐츠 위에 나타나는 창을 의미합니다. #1. 바로 실습해 봅시다. 다음과 같이 입력하여, modal 창 생성 및 기본 디자인을 구현해 줍니다. 상세 페이지 상세 페이지 내용 ... // 이제 동적인 UI를 만들어야 합니다. 동적인 UI를 만들기 위해선 UI의 현재 상태를 데이터에 저장해두고, 데이터에 따라 UI가 어떻게 보일지 작성하면 됩니다. #2. script 태그 안에 다음과 같은 ..

이벤트 핸들러 (Event Handler) 1. 이벤트 핸들러 (Event Handler) 이번엔 이벤트 핸들러에 대해 배워봅시다. Vue.js의 이벤트 핸들러란? 사용자의 클릭, 요소 위로 마우스를 올리거나 입력 필드에 타이핑하는 등 특정 이벤트가 발생할 때, 실행되는 메서드 or 함수입니다. 버튼을 눌렀을 때, JS를 실행하려면 다음과 같이 입력하면 됩니다. v-on:click="JavaScript 문장" // v-on을 @로 사용할 수 있음 @click="JavaScript 문장" #1. 바로 실습해 봅시다. App.vue에 들어가 다음과 같이 입력하여, 버튼 이벤트를 생성해 줍시다. 허위매물신고 신고수 : {{ declareNo }} // → 브라우저에 들어가면, 버튼을 누를 때마다 숫자가 오르는..

v-for 반복문 1. v-for 반복문 이번엔 v-for 반복문에 대해 배워봅시다. #1. 바로 실습으로 들어갑니다. App.vue에 들어가 다음과 같이 입력합니다. Home Products About // → 브라우저를 실행하면, 다음과 같이 나오게 됩니다. 이렇게 코드를 짜다보면, 반복적인 HTML 태그가 나옵니다. 그것을 간단하기 위해 v-for 반복문을 사용합니다. v-for 반복문은 다음과 같이 사용합니다. #2. 그러면 방금 코드를 다음과 같이 수정하여, a 태그를 이용할 수 있습니다. Home // // → 브라우저를 보면, Home 메뉴가 3개 생긴 것을 확인할 수 있습니다. #3. 이제 배열과 v-for 반복문을 사용해 다음과 같이 입력하여, 메뉴를 생성할 수 있습니다. {{ menu ..

데이터 바인딩 1. 데이터 바인딩(Data Binding) Vue.js의 데이터 바인딩에 대해 알아봅시다! Vue.js에서 데이터 바인딩은 JS 데이터를 HTML에 넣는 문법을 말합니다. 데이터 바인딩을 쓰면, HTML을 코딩하기 쉽고 Vue의 실시간 자동 렌더링을 쓸 수 있습니다. #1. 바로 실습해봅시다. App.js에 들어가서 다음과 같이 입력해 줍니다. XX 원룸 XX 만원 XX 원룸 XX 만원 전에 보셨다시피 template 태그와 script 태그가 있습니다. 이 섹션들은 무엇을 의미할까요? 1) 템플릿(Template) 템플릿은 사용자에게 보여지는 HTML의 모양과 내용을 정의합니다. Vue.js의 템플릿은 HTML과 Vue.js의 특별한 구문을 혼합하여 사용합니다. 이 구문은 브라우저에서 ..

Vue.js 설치 1. Vue.js 설치 그러면 Vue.js를 설치해 봅시다! #1. 공부할 폴더를 생성한 후, VSCode의 터미널에 다음과 같이 입력하여 Vue.js를 설치해 줍니다. npm install -g @vue/cli #2. 설치가 끝났으면, 다음과 같이 입력하여 프로젝트를 생성해 줍니다. (저는 프로젝트명을 vuedongsan이라고 입력하였습니다.) vue create vuedongsan #3. 그러면 다음과 같이 나오게 됩니다. Vue 3버전의 Default를 클릭해 줍니다. → 조금만 기다리면, 정상적으로 설치가 되었습니다! #4. 터미널을 보면 cd test로 넘어간 후, npm run serve로 실행하면 된다고 나와있습니다. 그대로 해줍시다. #5. 그러면, localhost:80..

Vue.js 1. Vue.js Vue.js에 대해 배워봅시다! Vue.js란? 프론트엔드 웹 애플리케이션을 개발하기 위한 오픈 소스 JavaScript 프레임워크입니다. 화면에 데이터를 바인딩하고 동적으로 업데이트하기 위해 설계되었습니다. 이를 통해 개발자들은 UI를 쉽게 만들고 관리할 수 있습니다. 2. 기능 및 특징 1) 바인딩(Binding) 데이터와 DOM 요소 사이의 양방향 데이터 바인딩을 제공합니다. 이를 통해 데이터의 변경이 자동으로 화면에 반영되고, 화변의 변경이 데이터에도 반영됩니다. 2) 컴포넌트 기반 아키텍처(Component-Based Architecture) 컴포넌트 기반 아키텍처를 기반으로 하여, UI를 작은 독립적인 컴포넌트로 구성합니다. 이는 코드의 재사용성을 높이고, 유지보..