전체 글101 Vue의 렌더링 문법 v-for v-for은 data()의 return 값으로 내보내지는 리스트를 반복해서 렌더링을 하는 Vue의 디렉티브이다. v-for은 (값, 인덱스) 구조로 이루어져 있으며, 아래의 코드처럼 productList를 순회하면서 을 출력하는 방식을 지시한다. productList는 data()의 return 값이며 배열 형태를 가진다. v-for을 사용할 때 주의할 점은 v-bind를 통해 key값을 지정해줘야 한다는 점이다. 제품명 가격 카테고리 배송료 {{ product.product_name }} {{ product.price }} {{ product.category }} {{ product.delivery_price }} v-if 조건에 따라 태그를 출력해 주는 디렉티브이며, 조건이 true일 때만.. 2024. 2. 28. Vue의 컴포넌트와 데이터 바인딩 컴포넌트 Vue는 React와 유사한 폴더구조를 가진다. React에서 라우팅 되는 컴포넌트들을 src/page라는 폴더에 담아서 관리했다면, Vue는 src/views라는 폴더에 담아서 관리를 한다. 이외에 공통 컴포넌트는 React와 마찬가지로 src/components에 담아서 관리를 한다. 데이터 바인딩 Vue는 React와는 다르게 양방향 데이터 바인딩을 지원한다. 학습을 하면서, React와 크게 차이를 느끼지 못해서 이 부분에 대해서는 추가 학습이 필요하다는 생각이 든다. React에서 데이터 바인딩을 할 때 {}를 사용했다면, Vue에서는 {{}}를 사용한다. 아래의 코드는 {{}}를 사용해서 데이터를 바인딩 한 코드이다. htmlString의 값이 문자열이라면 세 번째 줄과 같이 바인딩을.. 2024. 2. 27. Vue의 Router 설정과 main.js Router 설정 Router 설치(프로젝트 폴더에서 진행) `vue add router` 수동으로 프로젝트를 생성하지 않고 default로 프로젝트를 생성하게 되면 Router를 따로 설치해 줘야 하며, 설치 방법은 아래와 같다. // Router 설치(프로젝트 폴더에서 진행) `vue add router` // 이후 src/router/index.js에서 라우트 설정할 수 있으며 객체는 path, name, component 등을 요소로 갖음 const routes = [ { path: "/", name: "home", component: HomeView, } ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL.. 2024. 2. 27. Vue로 프로젝트 생성하기 Vue.js란? Vue.js는 사용자 인터페이스 개발을 위한 Progressive Framework이다. Vue는 Model-View-ViewModel(MVVM) 패턴을 사용하는데, 이는 프로그래밍 로직과 UI를 분리해서 개발하는 패턴을 말한다. 이러한 개발 패턴은 ViewModel을 통해 데이터 바인딩 처리 및 가상 DOM을 통한 성능 및 개발 편의성을 제공하는데, 이는 Angular와 React의 장점을 모두 가진다고 볼 수 있다. Vue CLI로 프로젝트 생성하기 Vue CLI는 Vue 프로젝트 구성, 빌드 및 배포를 쉽게 해주는 플러그인이다. Vue CLI를 통해 프로젝트를 생성하는 방법은 크게 default option과 manually select option이 있으며, manually sel.. 2024. 2. 27. 이전 1 2 3 4 5 ··· 26 다음 728x90