전체 글 (140) 썸네일형 리스트형 Vue.js - 리스트 렌더링 v-for로 엘리번트에 배열 매핑 v-for 디렉티브를 사용 하여 배열을 기반으로 리스트를 렌더링 할 수 있다. v-for 디렉티브는 item in items 형태로 특별 한 문법이 필요하다. items -> 원본 데이터 배열 item -> 반복되는 배열 엘리번트의 별칭 사용 방법 v-for 디렉티브의 경우 현재 항목의 인덱스에 대한 두 번째 전달 인자 옵션을 제공한다. 사용방법 v-for에서 기존 엘리먼트를 재사용, 재정렬 하기 위해서는 각 항목들에 고유한 key 속성을 제공 해주어야 한다. key의 경우 각 항목을 식별 할 수 있는 고유한 ID이다. 내용이 단순한 경우나 의도적인 성능 향상을 위해 기본동작에 의존 하지 경우를 제외하면 v-for에 key를 추가하는것이 제일 좋다. Vue.js - 조건부 렌더링 v-if 디렉티브는 조건에 따라 블록을 렌더링 하기 위해 사용된다. 사용방법 -> v-else-if if - else if - else 와 동일한 문법 Vue.js 2.1.0+ 부터 사용 가능 문법 사용 방법 조건부 그룹 생성 방법 사용 방법 Vue.js - watch 속성 프로그램이 진행되면서 변경 값에 대한 감시가 필요한경우, 또는 변경 전 후 값이 필요 한 경우 watch 속성을 주로 사용한다. Vue.js - Computed 속성 Computed 속성 템플릿 내에 표현식을 사용 할 수 있으나 간단한 연산이 아닐경우 코드의 양이 많아지며 유지보수가 어렵다. 복잡한 로직이 사용 될경우 computed 속성을 사용 해야 한다. 사용 예시 Computed 속성 사용시 중복 제거에 효과가 있다. {{reversedMessage}} 템플릿이 3개가 있을 경우 computed 객체 내 reversedMessage 함수만 변경 해주면됨. computed 속성과 method 차이점 method 함수 사용시에는 템플릿에서 호출시 () 괄호를 사용 해야 한다. computed 속성 사용 시 () 괄호 생략이 가능하다. computed 속성의 경우 렌더링 후에 데이터를 캐싱(저장) 하는 방식이며 대상이 변경 될 때만 함수를 실행한다. -> 변경 되지 .. Vue.js 폼 입력 바인딩 v-model 속성을 사용하여 input 요소와 일반 텍스트 요소에 양방향 데이터 바인딩을 생성 할 수 있다. 단일 문자열 바인딩 방법 HTML Vue.js 여러줄 문자열 바인딩 html Vue.js Vue.js 이벤트(Event) 이벤트(Event)란 사건이 발생 했을때 무엇을 진행 할것인지를 뜻한다. 간단한 click event 버튼 클릭시 alert 이벤트 실행 예제 사용방법 javascript 에서는 html 요소에서 onclick = "" 이벤트를 사용 하였으나 Vue에서는 다른 방식을 사용함. 결과 메소드 이벤트 핸들러 이벤트 진행시 methods 객체내 함수를 추가하여 사용 할 수 있다. html Vue.js 결과 키 수식어 이벤트 키보드 이벤트를 발동 시켜야 할때 Vue.js 에서는 키 수식어 이벤트를 사용한다. input 박스 내 엔터키 이벤트 발동시 사용방법 예시 html Vue.js 이외 이벤트 리스너 부분 Vue.js 레퍼런스 참조 https://kr.vuejs.org/ input 태그 데이터 바인딩 - Vue.js 인스턴스 데이터를 사용 하여 요소의 데이터 바인딩이 필요 할 경우 하단 과 같이 사용한다. - 예시 Vue 인스턴스내 존재하는 객체 데이터를 바인딩을 하고 싶은경우 Vue 인스턴스 생성 후 data 객체내 inputData 객체가 있는경우 태그 내 v-bind 기능을 이용 하여 데이터 바인딩을 실시한다. 속성에도 바인딩이 가능하다. v-bind:value가 불편할 경우 type 처럼 :type으로 :value 사용이 가능하다. 같은 방식으로 함수 바인딩으로도 대체 가능하다. @Autowired 이용한 빈 주입 방법 XML에서 빈을 설정 한 후 애플리케이션이 실행 될 때 빈을 주입해서 사용 하면 관리 및 사용이 불편해진다. 현재 스프링에서는 @Autowired를 사용 하여 개발자가 만든 클래스들의 빈을 직접 자바코드에서 생성하여 사용한다. - @Autowired 특징- 기존 XML 파일에서 각각의 빈을 DI로 주입했던 기능을 코드에서 애너테이션으로 자동으로 수행 @Autowired를 사용 하면 별도의 setter나 생성자 없이 속성에 빈을 주입 할 수 있다. 스프링에서 제공하는 클래스로 생성되는 빈인 sqlSession 같은 클래스는 XML 파일에서 생성 후 사용 해야 한다. - MemberControllerImpl.java - - MemberDAOImpl.java - - MemberServiceImpl.java - 이전 1 2 3 4 5 ··· 18 다음
