I 심화 디렉티브 (4가지)
v-bind
v-model
v-for
v-on
I v-bind
만약, Html 태그의 속성값을 데이터값으로 사용하려 한다면 어떻게 해야할까 ?
예를 들어, <img src="링크삽입"/> 에서의 데이터값을 사용하고 싶다면,
우리는 <img src={{ image }} /> 또는 <img src=" {{ image }}" /> 를 시도해 볼것이다.
하지만 이렇게 작성할 경우 작동이 되지않거나 오류가 발생한다 !
사용법은 매우 간단하다.
HTML 엘레먼트 에서 src 값을 Vue 엘레먼트의 데이터 중 image 로 설정하고 싶다면,
<img v-bind:src="image"/> 와 같이 사용하면 된다.
v-bind를 생략하여 :src 라고만 써도된다
정상적으로 이미지가 나오는것을 확인 할 수 있다.
그렇다면, 응용을 해보도록 하자.
smile 이라는 변수에 따라 두개의 링크중 어떤것을 이용할지 삼항 연산자를 이용해서 구현해보는 예제이다.
각자 콘솔창에서 app.smile을 false 로 바꾸어서 실행시켜 보도록 하자.
I v-model
v-model : 양방향 바인딩
우리가 지금껏 해왔던 예제들은 단방향 바인딩 이라고 할 수 있다.
단방향 바인딩 이란?
데이터 → 뷰 의 형태로 바인딩이 되어있어서, 데이터의 값이 변하면 바로 바로 업데이트됨
양방향 바인딩 이란?
뷰 ⇄ 데이터 형태로 바인딩하여 데이터가 양 방향으로 흐르게 해주는 것.
즉, 데이터에 있는 값이 뷰에 나타나고, 이 뷰의 값이 바뀌면 데이터의 값도 바뀜.
※ 뷰, 데이터 의 관계도와 그에대한 설명은 다음 강에 업로드 될 예정입니다. :)
입력창에서 원하는 문자열로 바꾸어보자.
그렇다면 이번에는 이전에 개구리 예제를 응용해보자.
I v-for
간단한 for문 예제이다.
이번에는 indexing 을 이용하여 for문을 생성해보자.
index라는변수는 사용자 지정 변수이므로 i 와 같은 변수로 작성해도 상관없다.
I v-on
이벤트 처리 역할 담당
v-on: 대신 @ 를 사용해도 된다.
