728x90 프론트엔드/Vue14 [Vue JS] Vue ref / $refs 속성으로 엘리먼트 선택하기 [뷰 / VUE] ref / this.$refs vue 에서 자바스크립트의 엘리먼트 선택자를 사용하는 경우가 많은데 Ref 속성을 통한 엘리먼트의 제어도 사용성이 높다 결과 창 2022. 1. 31. [Vue.js] 뷰 라우터 params 전달 feat. vue-router [Vue.Js] 뷰 라우터 Params 전달 feat. vue-router 뷰 라우터를 통해 SPA를 구현하였다면 이제는 어떻게 분기된 라우터 간 구분값(?)을 전달할수 있을까 이다 위에서 언급한 구분값은 데이터가 될수도 있고 단순히 페이지 로딩에 필요한 해당 페이지의 아이디 정보가 될수도 있다. 기본 형태 [routes 설정] //라우터 path 에 id 입력 가능 설정 const routes = [ { path : '/blog/:id', component : Detail }, { path : '/List', component : List } ] [라우팅페이지.vue] //url에 입력한 params 중 id 값 $route.params.id 샘플 예제 아래 예제에서는 라우터에 param을 전달하여 해.. 2021. 8. 19. [Vue.js] 뷰 라우팅 feat. npm vue-router [Vue.Js] 뷰 라우팅 feat. npm vue-router 🌈 라우팅이란 ? 서버에서 웹 페이지를 미리 받아 놓고 새로고침 없이 원하는 부분만 해당 화면을 갱신하는 기술, 다른 말로 SPA (Single Page Application) 🌈 vue-router? 뷰에서 라우팅을 사용할수 있도록 공식 라이브러리로 지원 ⭐️ 설치 (vue-router 4 버전 이후 설치) npm i vue-router@4 ⭐️ 기본 형태 [router.js 파일] import { createWebHistory, createRouter } from "vue-router"; import 컴포넌트1 from './components/.....vue' import 컴포넌트2 from './components/.....vue' .. 2021. 8. 18. [Vue.js] 뷰 라이프 사이클 VUE Life Cycle [Vue.js] 뷰 라이프 사이클 Vue Life Cycle 뷰를 통한 UI 구현에 있어서 알맞은 타이밍에 서버에서 데이터를 전달 받거나 전달 해주어야 하는데 뷰의 라이프 사이클을 통해 해당 '타이밍'에 데이터를 전달하거나 받을 수 있다 ⭐️ 기본 형태 ⭐️ 라이프 사이클은 크게 Create - Mount - Update - Unmount로 나뉘는데 1️⃣ Create 는 컴포넌트 UI 랜더 이전에 데이터를 구성하는 단계, 2️⃣ Mount 는 UI 랜더 단계, 3️⃣ Update 는 Vue의 State [Data()]가 바뀔때, 4️⃣ Unmount 는 컴포넌트 종료시를 뜻한다. ⭐️ 뷰에서는 이를 이전 / 이후 단계로 세분화하여 구현이 가능하다. 🌈. beforeCreate() Create 단계 직전.. 2021. 8. 18. [Vue.js] 뷰 조건부 랜더링 v-if v-else-if v-else [Vue.js] 뷰 조건부 랜더링 v-if v-else-if v-else ⭐️ VUE 조건부 랜더링 뷰에서 조건부 랜더링시 v-if를 쓰면 편하다 즉, 자바스크립트 없이 그냥 해당 문법만으로 해당 태그를 포함하여 랜더하거나 제외시킬수 있다 ⭐️ 샘플 예제 (로직) 간단한 예제를 위해 dropdown내 짱구 선택시, 짱구 이미지가 나오고 흰둥이 선택시 흰둥이 이미지 등 선택한 이미지가 출력되는 예제이다 ⭐️ App Component 짱구 흰둥이 철수 영희 맹구 🌈 출력 결과 2021. 8. 14. [Vue.js] 뷰 v-model 활용하여 입력값 관리하기 [Vue.js] 뷰 v-model 활용하여 입력값 관리하기 사용자가 input 이나 textarea에 데이터를 입력하였을때 v-model을 이용하여 이를 실시간으로 저장하고 저장한 데이터를 가공할수 있다 ⭐️ 샘플 예제 {{number * 2}} 2021. 8. 14. [Vue.js] 뷰 컴포넌트간 양방향 데이터 바인딩 [Vue.js] 뷰 자식 컴포넌트와 부모컴포넌트 데이터 양방향 바인딩 ⭐️ 학습 목표 props를 통해 부모-> 자식 컴포넌트로 데이터를 전달했다면 자식 컴포넌트에서 이벤트 발생시 부모 컴포넌트로 데이터를 다시 바인딩 해야하는 경우도 있는데 아래 예제를 통해 이를 학습해보도록 하자 ⭐️ 기본 형태 부모에게 데이터 전송! ⭐️ 샘플 예제 (로직) 메뉴와 상품 리스트가 나오는 예제인데 부모 컴포넌트는 App, 자식 컴포넌트는 Menu, Product,Modal이다 자식 컴포넌트 내 상품 제목을 클릭하면 모달창이 출력되고 닫기 버튼을 클릭시 모달창이 종료되는 로직인데 자식 컴포넌트인 상품 컴포넌트에서 제목 클릭 이벤트 발생시 상품의 고유번호와 모달창 닫힘 상태를 부모 컴포넌트로 전달하고 부모 컴포넌트에서 해당.. 2021. 8. 14. [Vue.js] 뷰 props 사용 방법 [Vue.js] 뷰 props 사용 방법 ⭐️ props 란 ? 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용되어지는 단방향 데이터 전달 방식이다 ⭐️ 사용 방법 부모 컴포넌트에서 자식 컴포넌트를 호출시 자식 컴포넌트 태그 내 v-bind나 : 키워드를통해 데이터를 전달하고 자식 컴포넌트에서 props객체를 통해 데이터를 전달받는 방식이다 ⭐️ 기본 형태 ⭐️ 샘플예제 (로직) 쇼핑몰 상품 리스트가 출력되는 예제를 만들어 보았다. App은 부모 컴포넌트, Menu와 Product는 자식 컴포넌트이고 각 자식 컴포넌트는 props를 통하여 해당하는 데이터를 전달 받아 출력하는 형식이다 ⭐️ App 컴포넌트 (부모컴포넌트) ⭐️ Menu 컴포넌트 (자식 컴포넌트 - 메뉴) {{item}} ⭐️ P.. 2021. 8. 14. [Vue.js] 뷰 컴포넌트 사용법 Vue Component [VueJs] 뷰 컴포넌트 사용 방법 Vue Component ⭐️ 컴포넌트 (Component) 란? 캡슐화된 코드 블록으로 한번 생성해 놓을시 쉽게 재사용이 가능하다. (인스타그램이나 페이스북 같이 비슷한 UI가 데이터만 다르게 반복되어 출력되는데 해당 프레임을 컴포넌트로 이해하면 쉽다) ⭐️ 컴포넌트를 왜 쓰는가? 첫번째로 코드가 복잡해지면 가독성이 기하 급수적으로 떨어지기에 이럴때 컴포넌트는 복잡한 코드를 보기쉽게 하는 장점이 있다 (복잡한 파일을 카테고리 폴더별로 정리 하는 것과 비슷) 두번째로 유지보수가 쉬워진다. 같은 코드를 여러번 반복하지 않고 여러번 사용하기에 하나의 컴포넌트만 수정하면 컴포넌트 사용한 모든 코드에 수정 사안이 반영이 된다. ⭐️ 샘플 예제 (로직) 쇼핑몰 상품 리스트가 .. 2021. 8. 14. [Vue.js] Vue.js 이벤트 사용 방법 (클릭 이벤트) [Vue.js] 뷰 태그 이벤트 사용 방법 뷰에서 클릭 이벤트를 사용하는 방법에는 두가지가 있는데 아래와 같다 그럼 하단의 샘플 예제를 통해 두 가지 이벤트 사용 방법을 알아보도록 하자 ⭐️ 기본 형태 ⭐️ 샘플 예제 간단 설명 샘플 예제에서는 좋아요 버튼과 싫어요 버튼을 클릭시 오른쪽에 좋아요 싫어요 개수가 올라가는 간단한 예제이다 ⭐️ 샘플예제 좋아요 좋아요 : {{likecnt}} 싫어요 싫어요 : {{dislikecnt}} export default { name: 'App', data(){ return { likecnt : 0, dislikecnt : 0 } } } 🌈 출력 결과 2021. 8. 12. 이전 1 2 다음 728x90
