vue.js v-model , @click

v-model

v-model을 사용하면 양방향 데이터 바인딩이 가능함

v-model에 data key 값을 연결

<div>   
<input type="text" v-model="userId"/>   
</div>

 data(){       
  return{            userId:'value'       
 };   
}

v-model.number -> text 숫자로 변환 parse int 할 필요없음

 

이벤트 연결

1. 자바스크립트 onclick 방식이 아닌 @click 이용

<div>   
<button @click="myFunction"> click </button>   
<button @click="changeData"> change </button>
</div>

2. 함수 연결

함수 호출 시, 전달할 파라미터가 없는 경우 (); 생략 가능

스크립트 단에서 methods에 함수 정의

 

method

 methods:
{         myFunction (){       
console.log(this.userId)   
}

object 내 특정 key 값 연결 시 this. 사용