memo-app 클론코딩 1

 

🌮 props 속성

props 속성은 부모 컴포넌트에서 자식 컴포넌트로 단방향으로만 바인딩(전달)되는 데이터를 말한다.

String, Number, Boolean, Array, Object, Date, Function, Symbol을 전달할 수 있다.

변수를 할당하게 되면 props를 동적으로 할당 할 수 있게 된다

 

🍀 단방향으로만 바인딩

부모 컴포넌트에서 속성이 변경되면 자식 컴포넌트에 전달이 되지만,

자식에서 변경된 데이터는 부모 컴포넌트에 전달되지 않는다는 뜻이다.

부모 컴포넌트가 업데이트 될 때마다 자식 요소의 모든 props들이 최신 값으로 새로고침이 된다.

# 부모 컴포넌트 <child :memo="memo" /> # 자식 컴포넌트 props: ['memo']

 

 

🍀 props를 변경 할 수 있는 두가지 예시

1. props는 초기 값만 전달, 자식 컴포에서 그 초기값으로 로컬 데이터 속성으로 사용할 경우

export default { name : 'memo', /* props의 유효성 검사 가능 */ props: { memo: { type: Object } }, data: () => ({ memoData: this.memo, }), }

 

2. 전달된 props의 형태를 바꿔야 할 경우

export default { name : 'memo', props: ['memo'], computed: { computedMemo: function () { return this.memo.trim().toLowerCase(); } }, }

 

 

🌮 디렉티브

디렉티브는 '지시문'이라는 뜻. DOM의 모든 것을 관리 하거나 지시 할 수 있다.

html 속성과 같은 문법을 사용하고 v-접두사를 갖고 있다.

 

🍀 v-bind

1. html 속성의 값을 동적으로 바인딩

2. 컴포넌트의 props 속성에 값을 주입

# 기본 <span v-bind:href="url"></span> # 줄임말 : 사용가능 <span :href="url"></span> # 속성 객체를 바인딩 가능! <span v-bind="{ id: test.id, path: url }"></span> # css style인 class 바인딩 <span :class="{ block: memo.length }"></span> # 컴포넌트의 props에 값 주입 <child :memo="memo" />

 

🍀 v-on

DOM 엘리먼트나 컴포넌트에 이벤트 리스너를 연결

디렉트브 값으로 함수 또는 문, 객체를 사용할 수 있다.

# methods에 선언되어 있는 메서드와 바인딩 <button v-on:click="onClick">click button</button> # 줄임말 @ <button @click="onClick">click button</button> # 한 줄로 표현 가능한 문을 바인딩 <button @click="isToggle = !isTogle">click button</button> # 속성 객체를 바인딩 <button @click="{ click: onClick, hover: onHover }">click button</button>

 

그리고, v-on은 뒤에 수식어를 붙일 수 있다. 수식어를 붙이면 이벤트에 기능을 간단하게 붙일 수 있다.

• 0열 선택0열 다음에 열 추가
• 1열 선택1열 다음에 열 추가

• 0행 선택0행 다음에 행 추가
• 1행 선택1행 다음에 행 추가
• 2행 선택2행 다음에 행 추가
• 3행 선택3행 다음에 행 추가
• 4행 선택4행 다음에 행 추가
• 5행 선택5행 다음에 행 추가
• 6행 선택6행 다음에 행 추가
• 7행 선택7행 다음에 행 추가
• 8행 선택8행 다음에 행 추가

셀 전체 선택

열 너비 조절

행 높이 조절

수식어	기능
.stop	event.stopPropagation을 호출하여 이벤트 전파를 금지
.prevent	event.preventDefault를 호출하여 이벤트의 기본 동작을 방지
.capture	이벤트 캡쳐 모드로 이벤트 리스너 추가
.self	이벤트가 이 엘리먼트에서 전달된 경우에만 처리. event.target 속성의 값이 이벤트 리스너를 바인딩한 엘리먼트어야만 리스너가 호출
.keyCode.keyAlias	특정 키에 대한 이벤트 처리 가능. @keydown.enter="updateMemo"
.once	단 한번만 호출
.left .right .middle	마우스 버튼 이벤트 트리거
.passive	이벤트의 passive 속성을 true로 변경, 이벤트 호출 시 브라우저에 이 이벤트가 event.preventDefault를 호출 하지 않음을 알림