FRONT/Vue.js (8) 썸네일형 리스트형 [Vue.js] 카드 테이블 (Card Table) 만들기 참고한 사이트 https://element-plus.org/en-US/component/space.html#basic-usage Space | Element Plus element-plus.org 카드 등록 / 수정 / 삭제 기능 구현 세부 기능은 보안 문제로 각설. 아래는 내가 응용해서 실사용한 테이블 템플릿이다. Sample 추가 test 명 수정 삭제 {{ slotData.row.id }} {{ slotData.row.nm }} 상세 목록 등록 / 수정 등록 / 수정 시 다른 메뉴 정보 조회 및 선택 체크 박스로 다중 선택 후 추가 추가 후 목록에 반영 삭제 버튼 클릭 시 등록 data에서 삭제 목록에서 상세 버튼 클릭 시 기본 틀이 잡혀있는 상태에 내가 살만 붙이면 되서 너무 편리하다. [Vue.js] 체크박스(checkbox) 체크 유무를 특정 값으로 바인딩 하기 체크박스에 바인딩 된 모델의 값은 기본적으로 true / false 하지만 다른 문자로 치환이 필요한경우가있다 체크 유무를 따져서 값을 변경해주는 방법 외에 input의 true-value와 false-value props를 사용한다. 문자열 뿐만 아니라 메소드도 가능하다. 이때 주의할점은 form submit시 체크 되지않은 값은 전송되지 않는다. [Vue.js] 접히는(folding) 테이블 만들기 - Expandable Table 1. vuetifyjs 사용 https://v15.vuetifyjs.com/ko/components/data-tables/ Data tables Component — Vuetify.js The v-data-table component is used for displaying tabular data. Features include sorting, searching, pagination, inline-editing, header tooltips, and row selection. v15.vuetifyjs.com Expandable Table 검색해서 참고 사용. 2. type="expand" 사용 https://element-plus.org/en-US/component/table.html#expandable.. [Vue.js] Vue3 데이터 중복 검사 유효성 검사와 마찬가지로 많이 사용하는 데이터 중복 검사. 간편하게 해보자. index 기준으로 중복 데이터 찾기. 이미 존재하는 이름 입니다. const checkData = (index) => { if (tableData.value.length > 1) { let dataIndex = 0; for (let data of tableData.value) { if (data.name != "" && dataIndex != index) { if (data.name == tableData.value[index].name) { return true; } } dataIndex++ } } return false; } 중복 될 때. 중복 되지 않을 때. 입력 값 기준으로 찾는거라 실시간으로 적용 된다. + 이런식으로.. [Vue.js] Vue3 : Vuetify Form-validation 유효성 검사 vuetify는 기본적으로 form input에서 validation을 제공한다. :rule 을 활용하면 validate를 적용할 수있다. vuetify Form 에는 input 값들을 validation 하는 기능을 기본적으로 제공한다. 보통은 v-text-field의 rule을 사용하는데, 다음처럼 넣으면 validate처리가 쉽게 된다. 이 방식은 구글링 하면 다 나와서 예시만. 아래는 내가 사용하는 방식이다. components const state = reactive({ sample : { name: "", desc: "" }, rules: { name: [ { required: true, message: "이름을 입력하세요.", trigger: "blur", }, { min: 0, messag.. [Vue.js] Node.js , Vue.js 설치하기 - Windows 10 npm 으로 한 번에 설치 하는 것도 가능하지만, 나는 npm run 실행 시 해당 경로를 못 찾아서 삭제 후 개별 설치함. 나 같은 사람들에게 도움이 되고자 글을 쓴다. 1. Node.js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Vue를 생성하기 위해선 Node.js 와 npm 을 먼저 설치해줘야 한다. 안정적인 버전을 받는 걸 추천한다. 설치 완료 후 (윈도우 + R) cmd 를 열어 설치가 됐는지 확인 한다. node -v 2. Vue.js 설치 npm을 통해 설치한다. node.js 를 설치하면 npm도 같이 설치 된다. 명령어.. [Vue.js] Vue3 Composition API - life cycle Composition API란? Vue3가 나오고 Composition API 를 제공하고 있다. Vue2와 유사하게 작동하지만, 해당 API를 사용할 경우 라이프 사이클 훅(Life cycle hook)에 대한 엑세스가 변경된다. Vue3에서는 beforeCreate , created 를 setup()이 대체하고 수행한다. setup() 안에 life cycle methods에 on을 추가해 Call back hook 을 만들 수 있다. beforeDestroy, destryoed 는 beforeUnmount, unmounted 로 변경 됐다. Vue3 New Methods ● onRenderTracked reactive dependency 가 렌더 함수에서 처음 접근 되었을 때 호출 된다. 추적 중인.. [Vue.js] Life cycle -인스턴스 생명주기 생명주기란? 인스턴스의 상태에 따라서 호출 할 수 있는 속성들. 라이프 사이클 훅(Life cycle hook)이란? 라이프 사이클마다 개발자가 추가한 커스텀 로직. Creation 컴포넌트 초기화 단계 Creation 단계에서 실행되는 훅(hook)들이 라이프 사이클 중 가장 먼저 실행된다. 컴포넌트가 DOM에 추가되기 전이며 서버 렌더링에서도 지원되는 훅이다. 클라이언트, 서버 모두에서 처리해야 할 작업이 있다면 해당 단계에 적용. ● beforeCreate 가장 먼저 실행되는 훅 데이터나 이벤트가 세팅되지 않은 시점이므로 화면 요소 접근 불가능. ● created 데이터, 이벤트가 활성화되어 접근이 가능함 템플릿과 virtual DOM은 마운트 및 렌더링 되지 않은 상태. Mounting DOM 삽.. 이전 1 다음
