머털&보약의 기록

전체선택 {{ item.name }} checkbox element를 v-model로 data의 items의 isChecked속성과 양방향 바인딩 시킨 후 전체선택 버튼 클릭 시 items를 순회하며 isChecked를 현재 상태와 반대로 설정

upload.html 첨부파일 [.jpg, .jpeg, .png, .xlsx, .hwp, .docx, .pptx, .pdf] add remove 확장자는 .jpg, .jpeg, .png, .xlsx, .hwp, .docx, .pptx, .pdf 만 가능합니다. 5MB이하 파일만 올려주세요. {{ item.num }}.첨부 @change="handleFileChange($event, index)" 파일 첨부 저장 위 코드는 동적으로 첨부파일 영역을 추가/삭제 후 첨부파일을 업로드 하는 간단한 예제이다. 전체적으로 포스팅을 위해 편집한 코드라서 태그 열고 닫고 안 맞을 수도 있다. 첨부파일 관련 메소드는 총 4개이다. 첨부파일 데이터를 담을 배열이 인스턴스의 data 객체안에 초기화 된 상태이고 addAtt..

2가지 방법 존재 node.js 환경으로 구동(node.js 런타임 환경 필요, 서비스 구동 시 서버와 port 다르게 구성) 기존 thyemeleaf파일에 script만 추가(thyemelaf 렌더링 이후 조작하는 방식이라 node.js 불필요) 여기선 2번 째 방법 채택 기존 html의 body 태그안에 Vue.js 관련 script import(실제 배포 시엔 js파일 직접 import 권장) vue.js를 입힐 div root id 설정(예시) 주소록 사원명 검색 초기화 사원 목록 사원승인 신청 순번 사원명 직급 직책 전화번호 이메일 {{ item.no }} {{ item.empNm }} {{ item.positionCd }} {{ item.roleCd }} {{ item.empHp }} {{ i..

부모 컴포넌트 new Vue({ //element id el: '#main', //vue에서 관리할 데이터 data: { items: [], // 데이터 목록 currentPage: 1, //현재 페이지 firstPage: 0, //첫번 째 페이지 lastPage: 0, //마지막 페이지 startIdx: 0, //첫번 째 페이지 번호 endIdx: 0, //마지막 페이지 번호 empNm: '', //사원명 }, //data를 기반으로 변경할 속성(data의 변경 감지) computed: { //변경된 데이터 displayedItems() { return this.items; }, }, //vue 컴포넌트 화면에 렌더링 된 직후 실행(컴포넌트의 템플릿이 DOM에 추가/화면에 표시된 직후) mounted(..

하위(자식)컴포넌트에서 상위(부모) 컴포넌트로 데이터 전달 시 사용하는 속성 //하위컴포넌트인 app-header에 click 이벤트(v-on:click을 @click으로 표현 가능)를 설정 let appHeader = { template: 'click me', //methods 속성에 리벤트 핸들러를 생성 후 this.$emit('이벤트명')으로 이벤트 발생 시킴 //해당 이벤트는 부모 컴포넌트에서 감지해서 처리 가능 methods: { passEvent: function() { this.$emit('pass'); } }, } new Vue({ el: '#app', components: { 'app-header': appHeader, }, }) 결과 버튼 클릭 시 pass라는 이벤트가 발생하는 것 확인..

Vue.js에서 상위(부모)컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달할 때 사용하는 속성 const appHeader = { template: 'Header', props: ['propsdata'] } new Vue({ el: '#app', components: { 'app-header': appHeader, }, //전달하려는 데이터 data: { message: '부모 컴포넌트의 메시지', name: '아이언맨', } }) 결과 data 키값 변경 시 변경된 데이터가 자식 컴포넌트에도 표시됨 Root 컴포넌트의 데이터값 변경 시 props로 내려받은 자식 컴포넌트의 데이터에도 적용됨(reactivity) 하위 컴포넌트 추가 후 새로운 props 전달 //appContent라는 하위 컴포넌트 내..

인스턴스 뷰 인스턴스는 뷰 개발 시 필수로 생성해야 하는 코드 {{ message }} console.log(vm)에 찍힌 vue 인스턴스의 속성과 API들 new Vue({…})로 인스턴스를 만들고 인스턴스에 미리 정의된 속성과 기능들을 사용 크롬 확장프로그램(Vue.js devtools) 설치 시 브라우저에서 Vue 개발을 더 효율적으로 할 수 있음 인스턴스를 div에 붙이면 인스턴스를 적용한 엘리먼트는 Root 컴포넌트가 됨 생성자 함수 일반함수와 구분하기 위해 함수명 앞이 대문자로 되어 있고 new 연산자를 통해 인스턴스를 생성 생성자 함수에 속성, 기능들을 미리 정의해 놓고 인스턴스를 만들어서 미리 정의된 속성과 기능 사용 reference: https://www.inflearn.com/cour..

Vue.js에서 컴포넌트 등록 시 부모-자식관계가 형성되는데 각 컴포넌트는 데이터를 독립적으로 가지고 있음 부모 자식끼리 데이터를 전달 방법: 부모는 자식에게 내려만 주고, 자식은 부모에게 올려만 준다. 이 때 부모가 사용하는 속성이 props이고 자식이 사용하는 속성이 event emit이다. 이를 활용한 간단한 예제 동영상 내용 정리 부모에서 props를 활용해 부모의 data 중 message를 자식에게 내려주고 자식에서 이벤트 발생 시 부모의 메소드를 실행해서 부모 컴포넌트의 데이터 중 num을 1증가 시킨다. image source: https://v2.ko.vuejs.org/v2/guide/components.html 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크..