본문 바로가기

분류 전체보기474

v-model 수식어 예제 @input="msg= $event.target.value" input 태그에 입력하면 바로 msg데이터가 변하여 적용 되는 이벤트 v-model="msg" @input 이벤트와 마찬가지로 값을 입력하면 바로 데이터가 변경된다. @change="msg= $event.target.value" input 태그에 값을 입력한 후 엔터를 누르거나 포커스를 다른곳으로 옮기면 값이 변하는 이벤트 v-model.lazy="msg" @change 이벤트와 마찬가지로 입력후 포커스를 다른곳으로 이동하면 데이터가 변경된다. v-model.number="msg" 데이터가 숫자형일때 선언해 주어야 숫자형으로 입력이 가능하다 v-model.trim="msg" 입력한 데이터의 앞뒤로 공백이 존재하면 제거하여 출력한다. App.v.. 2021. 7. 27.
클래스와 스타일 바인딩 참고 공식 사이트 https://v3.ko.vuejs.org/guide/class-and-style.html#html-%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A2%E1%84%89%E1%85%B3-%E1%84%87%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AB%E1%84%83%E1%85%B5%E1%86%BC 클래스와 스타일 바인딩 | Vue.js 클래스와 스타일 바인딩 데이터 바인딩의 일반적인 요구사항은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하는 것입니다. 클래스와 스타일 모두 속성이므로, v-bind를 사용하여 처리할 수 v3.ko.vuejs.org 1. 클래스를 데이터와 바인딩하여 해당 데이터가 true일때 원하는 클래스를 적용시킬 수 있다.. 2021. 7. 27.
Watch Watch: 사용자가 원하는 데이터를 감시하는 역할, 계산된 데이터도 감시를 진행할 수 있다. App.vue 코드 {{ msg }} {{ reversedMessage }} 브라우저 확인 2021. 7. 26.
Computed Getter, Setter 예제 주로 Vuex(Store, 중앙 집중식 저장소)를 사용할 때 활용된다. 기본적인 Computed 기능은 읽기전용인 Getter 기능으로만 사용가능하지만 computed 내의 get(), set() 메소드를 이용하여 Getter, Setter 기능을 사용할 수 있다. 지난번에 게시물을 사용하여 예제 코드를 작성하였다. 버튼을 클릭하면 문자열을 추가해주는 예제 App.vue add {{ msg.split('') }} {{ msg.split('').reverse() }} {{ msg.split('').reverse().join('') }} {{ reverseMessage() }} {{ reversedMessage }} 2021. 7. 26.
Computed 캐싱 Computed 캐싱 기술을 이용하여 복잡하거나 간편한 연산을 한번 계산하여 나온 반환값을 여러번 사용할 수 있다. App.vue 파일 {{ msg.split('') }} {{ msg.split('').reverse() }} {{ msg.split('').reverse().join('') }} {{ reverseMessage() }} {{ reversedMessage }} 브라우저 확인 2021. 7. 26.
1 대 1 관계 설정하는 방법 Book 코드 수정 @GeneratedValue(strategy = GenerationType.IDENTITY): 테이블마다 각각의 ID값이 증가하도록 설정 @OneToOne: 1대1 관계를 형성할 때 사용하는 어노테이션 optional = false: 절대 null값을 허용하지 않겠다는 의미 (inner join), 기본값으로 설정하면 left outer 조인이 된다. mappedBy = "book": 해당 객체가 테이블로 생성될때 선언한 컬럼은 키값을 생성하지 않도록 설정 @ToString.Exclude: 어노테이션을 이용하여 해당 컬럼이 ToString에서 제외될 수 있도록 설정, 선언하지 않으면 스택오버플로우 에러가 발생하게 된다. 따라서 단방향 관계를 맺거나 ToString에서 해당 컬럼을 제외.. 2021. 7. 24.

티스토리툴바