#18 [Vue 1] 메소드, 컴퓨티드 함수, 객체배열 반복문, Props, Emit

메소드
#2 소프트 코딩(바인딩 속성 이용) : this 사용(뷰가 모든 재산(data, 함수 등)을 참고할 수 있음

 

1. H_MethodView.vue 조작

 

1) html 코딩 쪽에 button 적고, @ 적고 click="clickBtn2" 적기

@ = v-on

 

2) data 함수 안에 바인딩 속성넣기 : 여기서는 message 가 바인딩 변수(속성)

data

  { return

       { message: "Hello World"

   }

}

 

3) clickBtn () { this.message } 로 소프트 코딩하기

clickBtn () { Hello World } 는 하드코딩

 

 

버튼 누르면 alert 뜸

 

메소드
#3 매개변수가 있는 함수

 

vue는 보통 함수뒤에 ( ) 생략하고 쓰는데 생략했다 = 매개변수가 없다는 뜻 ex) clickBtn ( ) => clickBtn

 

1. H_MethodView.vue 조작

 

1) html 코딩 쪽에 button 적고, @ 적고 click="clickBtn3" 적기

 

2) clickBtn3 함수 만들기 (괄호 안에 매개변수 적기)

clickBtn3 (num) {

        alert (num);

}

 

 

함수 연습

 

1. views - H_MethodExam.vue 생성

 

1) html 코딩 부분에 button 자동완성 - click="clickBtn" 적고 앞에 @

 

2) 객체의 속성에는 : 5가지 자료형 (문자열, 숫자, 참과 거짓, 객체, 배열)_참고에 적음

그래서 쌍따옴표로 적어야함!

name : "홍길동",

id : "hong"

 

3) alert 안에는 문자열 붙이기 가능

 

2. App.vue에 링크 달기

 

 

3. router 페이지 연결

 

 

4. 화면 확인

 

 

 

참고 : 함수  - 객체속성

 

* 객체 : 중괄호 사용

alert 에 this.name.name 으로 name 한번 더 써야 그 객체의 속성이 선택됨

 

* 배열 : [ ] 사용

console.log 를 보통 사용함

 

---

 

컴퓨티드(computed) 함수 : 특수목적 함수
1) 무조건 콧수염 표기법 사용 2) 매개변수 없음 3) js 쪽에 computed 쓰고 무조건 return 사용
#1 숫자

 

1. view - I_ComputedView.vue 생성

 

2. App.vue

 

3. router 

 

4. I_ComputedView.vue 조작

 

 

컴퓨티드 함수
#2 백분율

 

1. data 바인딩에는 num : 10

 

2. data와 평등하게 □ computed 자동완성

 

3. computed 속성 안에 - percentAmount 라는 함수 만들기

 

4. return 쓰고 ( ) 안에 num/100 쓰는데 vue함수에서는 this 적어야 함!  this.num/100

 

5. 백분율 콧수염 표기법에 {{ percentAmount }} 적기

 

 

컴퓨티드 함수
#3 연산

 

1. data 바인딩에는 num : 10

 

2. data와 평등하게 □ computed 자동완성

 

3. computed 속성 안에 - cal 함수 만들기

 

4. return 쓰고 ( ) 안에 num + 30 * 20 쓰는데 vue함수에서는 this 적어야 함!  this.num + 30 * 20

 

5. 백분율 콧수염 표기법에 {{ cal }} 적기

 

 

5. 정리하자면

 

함수 연습

 

1. view - I_ComputedExam.vue 생성

 

2. App.vue

 

3. router

 

4. 조작

---

객체 배열 - 반복문 돌려서 화면에 출력 ★포트폴리오에 필수★
(객체 배열 = 배열안에 객체들이 있는것) [ {}, {} ]

 

1. view - J_ForObjectView.vue 생성

 

1) a 링크 작성

2) img 작성 < img :src="require()" alt="" >

 

 

2. 메뉴 달기(App.vue -> router - index.js)

 

 

3. css (사진 너무 커서 줄이기)

 

 

4. data 바인딩 속성 이용 ★

[ {객체:속성} {객체:속성} ]

 

1) □ data 자동완성 : 위에 있는 문자들 대체하기 위함

 

2) text 속성 : "암스테르담"

url 속성 : "주소"

src 속성 : "주소"

 

3) html 에 콧수염 표기법으로 대체하기

 

4) 밑에 파리는 주석으로 막기 : 어차피 반복문 돌릴거라 하나만 있으면 됨

 

5) div에 v-for 걸면 링크랑 이미지 같이 반복됨

 

6) 배열안에 문자열이 들어간게 아니라 객체가 들어감(data)

 

- 객체에는 속성이 들어가있다.

data에는 객체의 속성인 text이 있어서 data.text 적어야 함

 

- images 가 data 에 들어가있음

images.url -> data.url

 

- images.src -> data.src

 

- alt 에는 써도 되고 안써도 됨

 

* 반복문의 data, index, images

images 가 배열 => images에서 첫번째 원소를 a(data)라는 변수에 넣음.

여기서의 data는 □data 와는 다른것

 

 

 

 

7) 파리 이미지도 data안에 넣기

 

5. 화면 확인

 

객체 배열 반복문 연습

 

1. 메뉴 달기 (App.vue, index.js)

 

2. 템플릿 조작

콧수염 표기법은 객체 출력이 안된다는거 잊지말기!!

div는 자동으로 줄바꿈

:key 에서 콜론(:)은 딱 붙여서 쓰기

data : 배열의 값이 들어간 변수

index : 배열의 인덱스 번호

dept : 배열

dname, loc : 속성

[ ] : 배열

{ } : 객체

 

3. 화면 확인

 

여기까지는 Vue의 80-90%을 다 아는것!

포트폴리오를 만들 수 있는 상태

이 뒤에 배우는 특수목적은 잘 안씀

---

Props : 부모쪽에서 자식쪽으로 데이터 전달 (자식 -> 부모 X)

 

1. 메뉴 만들기

 

2. 컴퍼넌트 이용할 예정

부모 컴퍼넌트(views - K_PropsView.vue)

자식 컴퍼넌트(components - K_TodoItem.vue) 파일 만들기

 

 

3. Props 에서 template 작성 : 부모 컴포넌트

 

1) 사용할 자식컴포넌트 정의하기 (data와 평등)

export default 부분에 자식 components : { K_TodoItemVue } 작성

 

2) 자식컴포넌트 import

import 자식컴포넌트 from 자식컴포넌트 위치

 

3) 부모쪽에 있는 변수의 값을 자식으로 보내려고 함

export default 부분에 data 바인딩 

list : "값" 적기

 

4) 부모쪽에서 자식쪽으로 데이터 전달하기 : 여기에 자식부분 컴포넌트가 띄워지는 부분

<자식컴포넌트 :자식 바인딩속성 = "부모 바인딩속성" />

헷갈리니 보통 두개를 같은 단어로 두는 경우가 많음

이해를 돕기 위해 자식 바인딩속성을 list2라고 적음

 

 

4. TodoItem 에서 template 작성 : 자식 컴포넌트

머리말, 꼬리말 : 자식 컨퍼넌트

 

1) 부모쪽에서 데이터 전송하면 props 속성에 저장됨

export default에서 props : ['자식 바인딩속성']  => props : ['list2'] 라고 적음

 

2) 근데 이 list2는 부모쪽에 있음

화면에 콧수염표기법 : {{ 자식 바인딩속성 }} 이라고 적기 => props : {{ list2 }}

(부모쪽 :list2 에 있는 list2가 자식의 props : ['list2'] 인것

쌍따옴표 "list" 는 부모쪽)

 

5. 화면 확인

 

Props 연습

 

1. 메뉴 만들기

 

 

2. 부모 컴퍼넌트

1) import K_ 하면 자동완성 Tap

 

2) components : { } 작성

s 붙이기!

 

3) data 에 pdata : "Hello Vue" 작성

 

4) html 태그부분에 <자식 컴퍼넌트 :자식 컴퍼넌트="부모 컴퍼넌트" />

콜롬 ( : ) 과 자식 컴퍼넌트 붙여서 써야함!!

 

 

 

3. 자식 컴퍼넌트

1) props : ['pdata']

 

2) html 태그 부분에  {{ pdata }}

 

---

 

Emit : 자식쪽에서 부모에 있는 함수 호출 (잘 쓰지는 않음)
methods 사용

 

react 와 vue 는 부모, 자식 섞어 쓰는 경우가 많음

부모 -> 자식만 가능 (자식 -> 부모 불가능)

Vue는 자식쪽에서 부모에 있는 함수를 호출할 수 있음 = Emit 함수

 

1. 메뉴 달기

App.vue, index.js

 

2. 부모 컨퍼넌트 생성 : views - L_EmitView.vue

 

3. 자식 컴퍼넌트 생성 : components - L_ChildCom.vue

 

4. 부모 컨퍼넌트

 

1) 자식 컴퍼넌트 import 

 

2) export default 에 components 추가

components : { L_ChildCom.vue }

 

3) 꺽새 써서

<L_ChildCom.vue />

 

4) methods 함수안에 message() { alert("안녕") }

 

 

5. 자식 컨퍼넌트

1) 버튼 누르면 함수 불러오기

<button @click="msg"></button>

 

2) 함수(메소드) 정의

methods : {

msg(

         { alert("테스트") }

        )

}

 

 

 

3) 이거 대신에 부모함수 호출하기

alert 지우고 this.$emit("부모함수명"); 

 

6. 부모 컨퍼넌트 html 부분에

@message=" message "

 

7. 화면 확인

부모함수 버튼 클릭하면 뜸

---

여기까지가 Vue 기본기 끝

components는 react가 더 쉬움