veu.method

속성을 이용한 출력

어제는 함수를 만들어서 alert으로 출력을 해보았다. 이번에 export에 속성으로 출력할 문자열을 지정하고, 이걸 함수로 내보내보자.

버튼 2를 누르면 Hello world를 나오게 할건데 이걸 함수를 이용해서 하는 것이다. ckickBtn2라는 함수를 만들었고 여기에 alert(message)를 해주었다.

그런데 오류가 나고 보니 this를 넣어주어야했다.vue에서 자신의 속성을 함수에서 사용할때 this를 넣어 이게 어니서 왔는지 출처를 알려줘야한다.

this는 자기자신의 message를 사용한다는 것이다. 자바에서도 배웠는데 this의 상반되는 개념으로는 super이 있는데 이것은 부모의 것이라는 뜻이다. 이 외에도 매개변수를 받을때 이것을 자신이 가지는 변수로 대입시킬때 자신의 변수앞에 this를 붙여준다.

매개변수를 이용한 출력

매개변수를 이용하여 함수에 값을 입력하여 함수를 사용할 수도 있다.

호출시에는 html태그 속성값에 있는 함수에 매개변수에 들어갈 값을 넣어주면된다. 그림에서 "재밌다."가 매개변수인word에 들어가서 함수가 실행된다.
결과

문장이 잘 완성되었다.

computed함수

// TODO: 컴퓨티드 함수 정의
// TODO: 특징 : 1) 콧수염 표기법에 사용
// TODO:        2) 매개변수 없음, 무조건 return 사용

나중에 API를 불러오거나 통신을 하거나 하는 등 큰 데이터를 다루는 계산일 때는 퍼포먼스를 생각하여 작성할 때 computed로 선언하여 작성하는 것이 좋다.

함수와 달리 속성형으로 콧수염태그에 넣어야한다.()를 넣을 필요 없다.

그냥함수랑 원리가 거의 같다 하지만 차이점은 존재하는데
1. 매개변수를 사용할 수 없다.
2. 반드시 return이 되야한다.
3. 함수형태로 호출하지 않고 속성형태로 호출한다.
4. methods 객체에 입력하는 것이 아니고 computed객체가 따로 존재한다.

변수를 사용할 수 없기에 직접 지정해준 변수들이나 함수안에서 만들어진 변수들을 계산할때 사용하기 좋다고 생각한다. 일반함수보다 좋다고 하니 위와같은 상황에 사용하도록 하자.

반복문으로 객체 여러개 만들기

똑같은 요소들을 여러개 만들때 사용하기 좋다.

이렇게 똑같은 형태의 요소들을 여러번 반복해야하는 상황이 생길수 있다. 그런데 이걸 코드로 여러개찍어내면 보기도 안 좋고 수고도 많이 든다 그래서 이걸 반복문을 통해 자동으로 찍게 해보자.

a태그의 url이 들어가야하는 자리에는 imgs.url을 넣어주면 된다. 하지만 우리는 for문에서 data라는 매개변수가 imgs라는 객체를 대신하게 했기 때문에 data.url이라고 해야한다.
나머지들도 다 같은 원리로 "data.속성"을 넣어주면 된다.
객체배열 imgs에 있는 모든 속성들이 잘 나왔다.

props

• 컴포넌트는 독립적으로 동작이 가능하도록 다른 컴포넌트와 연결점이(의존성 등) 없음
• 코딩을 하다보면 컴포넌트간에 데이터 전달이 필요한 경우가 있음, 이때 props 속성을 이용해서 전달함
• 물이 위에서 아래로 흐르듯, 부모컴포넌트에서 자식컴포넌트으로 데이터 전달만 가능, 반대는 불가(단방향 데이터 전달)

자식component 부모 component에 연결시키기

이건 전에 footer와 header연결 시킬때 했던 것이다. app.vue가 부모 cm

부모 속성 자식에게 전달하기

연결은 되는 걸 배웠는데 그럼 부모의 소스를 자식에게 전달해 자식에서 사용하는 것도 가능 할까?

왼쪽이 자식이고 오른쪽이 부모이다.

전달
부모의 data에 list라는 속성이 존재 한다 이것을 자식에게 보내고 싶다면 자식컴포넌트의 html태그에 속성을 하나 걸어주고(사진에서는 list, 정해주고 싶은걸로 해줘도 된다.) 속성값으로 속성명을 준다.

호출
이것을 자식컴포넌트에서 사용하는 방법은export default자리에 data를 할 필요없이 바로 props라는 속성을 걸고 대괄호 안에 부모가 전달해준 속성명을 입력하면된다. 이렇게 되면 자식이 부모의 속성을 가지게 되고 자신의 것처럼 콧수염 태그로 사용할 수 있다.

emit 자식컴포넌트에서 부모함수 실행

자식컴포넌트에서 부모컴포넌트의 함수를 실행하게 할 수 있다.

전달
부모의 message하는 속성이 존재한다. 이것을 자식도 사용할 수있게 하고 싶다면 props때 처럼 똑같이 자식의 html에 속성을 걸어주고 속성값으로 속성명을 준다.

호출
사용 방법은 export default자리에 methods 객체를 만들고 거기에 함수를 만든뒤 함수안에 "this.$emit("부모함수이름")을 해주면 사용이 가능하다

VUE 응용

쇼핑카트 만들기

1. bootstrap vue에 연결하기

vue에는 html이 딱한 장 있는데 그게 public폴더에 존재한다.

vue에서 작성함 모든 코드의 내용이 html의 body에 있는 div안에 들어간다. 그래서 body에서 뭘 건들일 일은 없다.

여기의 head부분에 bootstrap css cdn을 연결해주면된다.
body에는 js cdn을 연결해주면된다.

2. 나브바 가져오기

부트스트랩에서 nav바 하나를 가져와서 새로만든haeder컴포넌트에 복사했다. 이번 시간에는 아래 모양의 나브바를 가져왔다.

3. 나브바 수정

나브바코드를 보면서 주석달아주고 원하는 내용들 수정

중메뉴
서치바 안쓸거라 지우기
홈 url /로 바꿔주기
안쓰는 메뉴 지우기 link, disable

소메뉴
소메뉴 안쓰는거 3개 지우고 나머지 하나는 binding으로 바꾸기
binding url바꿔주기 /binding
a링크 성능 안 좋으니 router링크로 고치고 to에 /binding 입력

binding 메뉴 vue 파일과 연결

bindingView라는 vue파일을 만들어서 header에 있는 소메뉴에 넣을 것이다.
맨처음 vue파일을 vues폴더에 만들고 이걸 header에 있는 router링크에 url을 통일시켜서 연결시킨다.

product : "lamp"속성을 이용해서

css app.vue와 연결

선생님께서 보내주신 css파일을 appvue와 연결한다.
appvue의 style태그에 @import "css파일의 경로"를 넣어주면 끝

부트스트랩의 cdn은 html파일에 넣어야하지만 css파일의 import는 꼭 appvue에 해야한다. 나중에 cdn말고 부트스트래도 파일을 import하는 법이 있는데 이 방법은 app.vue에서 import해야한다.