v-model , v-on 지시자

v-model 지시자

v-model 지시자는 폼 혹은 텍스트 영역 입력과 템플릿에 양방향 데이터 바인딩을 생성한다. 이것으로 애플리케이션 모델의 데이터가 UI와 항상 동기화할수있다. 양방향 데이터 바인딩을 한다. 다만 v-once 지시자를 사용해 특정 속성을 단방향으로 지정할수도 있다.

양방향 데이터 바인딩
뷰 ---- vue 의 변화는 모델을 업데이트 ----> 모델
뷰 < ------- 모델의 변화는 뷰를 업데이트 ---- 모델

* v-once 지시자는 하나의 요소나 컴포넌트를 딱 한번 렌더링한다. 추가로 렌더링할때는 이미 만든 요소나 컴포넌트를 정적인 콘텐츠로 인식해 건너뛴다.

v-model 지시자는 텍스트박스, 텍스트영역, 체크박스, 라디오버튼, 셀렉트 드롭다운을 포함하는 여러 종류의 폼 입력을 위해 만들었다. 

 

v-model 바인딩

모델 바인딩은 템플릿을 사용해서 사용자의 입력데이터의 업데이트를 도와준다.

v-model 은 주로 입력과 폼 바인딩에 사용된다.

v-bind 는 주로 HTML 속성바인딩에 사용된다. 예를 들어 img 태그의 src속성이나 div태그의 클래스속성에 v-bond를 사용할수있다. 

v-model 지시자는 사실 v-bind 지시자를 사용한다.? 

☞ 어떤HTML태그에 v-model="something"이라고 있다 치면,

     이건 v-bind:"something" v-on:input="something = $event.target"의 의미와 같다고한다.

<input v-model="order.lastName" >
v-model : v-model지시자
"order.lastName" : 양방향데이터 바인딩 객체

v-on 지시자

v-on 지시자는 DOM요소에 함수를 바인딩하룻있다.

애플리케이션에 상호작용 요소를 추가하려면 Vue인스턴스에서 정의한 함수를 DOM요소에 연결해야한다. 이벤트 바인딩을 이용해 클릭, 마우스업, 키업등의 기본 DOM이벤트와 요소를 연결할수있다.

기본적으로 v-on 지시자를 사용해 스크립트 코드나 함수를 DOM요소에 연결한다. 이 스크립트 코드나 함수는 DOM이벤트가 트리거 될떄 실행된다.

<div v-on:eventname="some javascript">
v-on: v-on 지시자 - 더 간략하게 v-on을 @로 쓸수있다. 즉 <div @:click="scriptname"> 이런식
eventname : 일반적인 DOM 이벤트 이름
some javascript  : 자바스크립트 표현식이나 함수 이름

---

값 바인딩 살펴보기

v-bind 지시자는 HTML요소의 속성에 값을 바인딩한다. v-bind 지시자에는 true-value속성이 있다.

체크박스으; 체크 여부에 따라 속서을 참 또는 거짓으로 바인딩할수있다.

<input type="checkbox" id="gift" value="true" 
 v-bind:true-value="order.sendGift" -> 체크박스에 체크하면 order.sendGift속성으로 설정한다.
 v-bind:false-value="order.dontSendGift" -> 체크박스에 체크를 취소하면 order.dontSendGift 속성으로 설정한다. 
 v-model-"order.gift"> -> 입력에 order.gift를 바인딩한다.

 

값 바인딩과 라디오버튼

체크박스처럼 라디오버튼도 값을 지정할수있다. 값을 직접 지정하면된다. 

v-bind 지시나는 첫번째라이도 버튼에 order 를 바인딩하고 두번째 라디오 버튼에 order.business를 바인딩한다.