Vue js input 양방향데이터 바인딩 (4)

Vue js input 양방향데이터 바인딩 (4) — #vuejs #vuejs양방향데이터바인딩 #vuejsinput 학습법 이론 학습을 하기 이전, 명심해야할 학습법이 있다. ...

#Vue js#Naver Blog

#vuejs #vuejs양방향데이터바인딩 #vuejsinput

학습법 이론

학습을 하기 이전, 명심해야할 학습법이 있다.

1.이해가지 않는다고 뒤돌아가 다시 보지 말 것

2.외우지 말라

=> 자주 봐서 외워짐을 당하라

=> 크롬을 통해 copy and paste하라

=> 왜 생겨났는지?

=> 왜 사용하는지?

===> 응용이 가능해진다.

Input 데이터 바인딩 v-model

Input 데이터 바인딩 v-model

Vue js에서는 Dom요소를 사용할 일이 없다. 대신 v- 로 시작하는 다양한 기능들을 사용할 수 있다. Input태그에서 사용자의 value값을 변경 시키고 싶다면 v-model을 사용할 수 있다.

<template> <div> <input type="text" v-model="userId" /> </div></template><script>export default { component: {}, data() { return { userId: 'jword', }; },};</script>

데이터로 usrid에 value를 넣어놓고 input-text 타입 박스를 만든다. 이후 v-model + 데이터 키값을 입력하면 아래와 같이 text박스안에 userid value가 들어가 있는 것을 볼 수 있다.

양방향 데이터 바인딩 v-model

양방향 데이터 바인딩 v-model

이전글에서부터 계속해서 Vue js는 양방향 데이터 바인딩이 가능하다고 언급했는데, 제대로된 예시를 보여준 적이 없다. 이번 기회에 v-model을 사용하여 어떤식으로 양방향 데이터 바인딩이 일어나는지 확인할 수 있다.

사용자가 Input에 넣는 데이터가 무엇이든 js에서는 실시간으로 userId value값이 변동한다. 콘솔을 통해 확인해보자.

<template> <div> <input type="text" v-model="userId" /> <button @click="myFunction">콘솔</button> </div></template><script>export default { component: {}, data() { return { userId: 'jword', }; }, methods: { myFunction() { console.log(this.userId); }, },};</script>	몇가지 알아갈 팁onclick속성 : @click으로 사용가능@click="함수명();" 으로 안적고 그냥 함수명만 입력모든 함수는 js methods:{ ~~function~~ 함수명(){ }} 형태로 작성

Input안에 글자를 바꾸고 바로 콘솔버튼을 클릭해보자.

input안의 value값이 바뀔때마다 콘솔창에 찍히는 글자도 바뀌는 것을 볼 수 있다.