코딩애플 vue.js 1~4강

데이터 바인딩

 

데이터 바인딩이란 JS데이터를 HTML에 꽂아넣는 문법이다.

바닐라 자바스크립트의 데이터 바인딩 스타일은 아래와 같다.

document.getElementById().innerHTML = ??

vue에서는 간단히 데이터바인딩을 할 수 있다.

data(){

 return{ } } 이러한 형태로 object를 리턴해주면 이걸 바로 위의 template에서 사용할 수 있다고 한다.

ByeBye.vue

props

props라는 곳에서는 변수명과 타입을 명시해주는 것 같다.  ByeBye.vue를 App.vue에 import 해와서 컴포넌트 형식으로 채워 넣었더니 화면에도 잘 출력이 되는 것을 확인할 수 있다 

 

데이터 바인딩 쓰는 이유?

1. 하드코딩 해놓으면 나중에 변경이 어렵다. ( 쇼핑몰 상품처럼 변동이 생길 수도 )

2. Vue의 실시간 자동 렌더링기능을 사용할 수 있다. ( Data를 변경하면 변경사항이 html에도 실시간으로 반영이 된다 )

 

따라서 애초에 바뀔일이 없으면 굳이 데이터바인딩을 하지 않아도 된다.

 

태그 안에 있는 것도 변수 사용이 가능하다.

 

태그 안의 내용물 같은 경우에는 {{ }}을 사용!

html안의 속성으로 사용할 경우에 속성앞에 : (콜론) 붙임

 

v-for

 

data()에 배열을 넣고 하나씩 꺼내서 써보자.

위와 같이 인덱싱을 활용하여 표현할 수 있지만 만약에 배열길이가 길다면 일일이 다 하드코딩하는 것은 무리가 있을 것이다.

 

이 때 사용할 수 있는 것이 v-for이다 v-for은 어떤 html 태그에서도 사용이 가능하다.

 

menu라는 array를 만들고 이를 태그 내에서 사용했다. 먼저 h3태그에 v-for속성을 만들어 주었다. 

그리고 " " 따옴표 안에 in을 사이에 두고 앞에는 변수 2개 뒤에는 array를 집어 넣었다.

 

대충 감이 오는데 하나는 value고 하나는 index일 것이다. 여기서는 a에 menu array의 각 element가 들어가게되고 i에는 0부터 2까지 차례로 들어올 것이다. v-for을 사용할 때 꼭 필요한 것이 key이다. 이 key를 적어주지 않으면 반복문이 돌지 않는다. 여기에는 유니크한 값이 들어와야한다. 지금은 i를 넣어주어 0 1 2 가 각각 key에 들어가게 된다.

 

 

그럼 만약 array가 아닌 숫자를 넣으면 a에 뭐가들어갈까??  에러가 날까? 아니면 숫자가 입력이 될까?? 

개인적으로 숫자가 들어갈 것 같긴하다.

    <div v-for="a in 3" :key='a'>

 

숫자가 들어가긴 했는데 예상 외의 숫자부터 시작했다!!

당연히 0 1 2 혹은 0 1 2 3 이 들어갈 것이라고 생각했다. 이유는 컴퓨터는 0부터 인덱싱하니까..

그런데 a에는 1 2 3이 들어있었다.

 

그럼 이 때에 변수를 2개 넣어 인덱싱까지 해보았다. 이때에는 어떨까??

    <div v-for="a,i in 3" :key='a'>

a 1 2 3

i 0 1 2 

이런식으로 들어오게 되었다.

 

 

이벤트 리스너 만들기

허위매물 신고버튼을 만들어 이 버튼을 누를 때 마다 신고수가 하나씩 늘어나도록 해보자!!

이걸 만들 때 신고수를 넣어둘 변수가 필요한데 상품 array와 신고수 array이 두개를 관리하기에는 번거로워서

상품 array를 object로 만들어주었다. 

 

key값은 0부터 인덱싱을 해주었다. ( 이 이유는 조금있다가 설명 ) 

그리고 value값은 또 object로 만들었고, name와 singo 두개를 만들었다.

template는 이렇게 만들어 주었다. v-for를 적어주고 products를 돌려주었다. 여기에 신기하게도 product object안에 있는 key값이 i에 들어오는 것이었다. 처음에 key값을 p1, p2, p3로 해두었는데 i에 p1 p2 p3가 들어왔었다.

나는 당연히 python의 enumerate처럼 index기능을 담당하는 줄 알았는데 그건 아닌가 보다.

 

따라서 key값을 index값으로 사용하기 위해서 0 1 2 로 두었다. (menu라는 array에 접근하기 위해서)

key값이 따로 없으면 0 부터 인덱싱이 되는 것 같고 key값이 있는 obj같은 경우에는 그 key값이 i자리에 들어온다.

 

button을 누르면 신고수가 올라가는 걸 원한다.

따라서 신고수에는 각 방의 singo의 값을 넣었다 ( default = 0 )

 

그럼 button이 눌릴 때 실행이 되는 event를 어떻게 설정했냐하면 바로 @click 이 것이다.

@click 혹은 v-on:click 이 둘중에 마음에 드는 것을 사용할 수 있다. 기능은 같다고 한다.

 

이 핸들러를 사용하기 위해선 data() 밑에 methods를 설정해주면 html에서 사용이 가능하다.

나는 눌린 버튼의 인덱스 값을 가져와야하는데 어떻게 가져와야 할지 고민을 했다.

제일 깔끔한 방법이 그냥 data-set을 주고 그 값을 가져오는 것이라고 생각했다. 따라서 위에 data-set으로 index값을 설정한 뒤 this.products에서 idx로 접근하여 해당 singo를 하나 올려주었다.

 

여기서 this를 사용하면 사실 어떤 값을 반환하는지 잘 모르겠다.

단순히 console에 출력하는 값은 proxy인데 사실 proxy는 잘 모른다. 아무튼 this를 통해서 data()가 반환하는 return값에 접근할 수 있는 점을 활용하여 만들어 보았다.

 

 

export import

test.js라는 파일을 만들고 여기서 변수를 하나 export해보자.

여기서 default를 쓰게되면 하나만 export할 수 있다.

 

이걸 사용할 때는 import를 사용하는데 아래와 같이 import 아무 이름 from '경로' 를 적어오면 이를 사용할 수 있다.

만약 받아온 뒤 사용하지 않으면 오류가 발생한다!!

그리고 아래처럼 변수명을 적지 않고 바로 데이터를 적어도 상관없다.

 

하지만 변수 한개가 아닌 2개를 export하고 싶다 이경우에는 어떻게할까? 단순히 변수만 추가해주면 될까??

이렇게 하니 오류가난다. 될리가 없다.

default를 지우고 거기에 중괄호로 변수를 집어 넣으면 된다.

import할 때에도 조금 다르다. 전에는 아무 이름이나 적어도 되었는데 이제는 export한 변수명을 정확히 적어주어야 한다.

2개를 export했지만 하나만 쓰고싶을 수도 있다. 그럴 땐 하나만 받아와서 사용하면 된다!