입문

프로그래밍 초보자들에게 키타의 다행스러운 설명은 선배들의 기술 수준이 너무 높아서 솔직히 따라가지 못한다는 것이다
해설을 이해하고 싶어도 다음 알 수 없는 단어가 나와서 끊임없이 불평을 하나요?
따라서 프로그래밍 초보자(독학 3개월)의 소직은 Vue이다.저는 js의 학습에서 초보자를 좌절시키는 어려운 점을 골라서 초보자만이 가지고 있는 약간의 강행적인 이해 방법을 소개하고 싶습니다.(문외한이라면 문외한이 모르는 점을 알 수 있을 것이다!
이번에는 v-model 지령의 구조를 배운다.

대상

Vue.js를 살짝 뜯어본 사람

그냥 자꾸 v-model을 사용한다고 생각하는 사람

독학으로 노력하지만 좌절할 수 있는 사람

v-model

Vue.js 공식 양식 입력 귀속
v-model 명령을 사용하여form의 input 요소,textarea 요소와select 요소로 양방향 데이터 연결을 만들 수 있습니다.입력한 요소의 유형에 따라 요소를 업데이트하는 올바른 방법을 자동으로 선택합니다.마법은 있지만 v-model은 사용자가 입력한 이벤트에서 데이터를 업데이트하는 기본적인 당의문법(syntax sugar)으로 그 외에 일부 변두리 사례에 대해서도 특별한 배려를 한다.
* 명령 → 명령, 명령
* 바인딩 - 연결
Vue.js로 표를 만들 때 v-model이 폐를 끼쳤죠?
v-model을 처음 사용했을 때 이게 뭐야....
그런데 저와 마찬가지로 왜 양방향 데이터 연결을 할 수 있을까요? 이해하지 못하고 v-model을 남용하는 초보자도 있죠?

v-model의 원형

공식을 확인한 결과 다음과 같은 두 가지가 같다는 것을 알 수 있다.
Vue.js 공식 구성 요소의 기본

<input v-model="searchText">

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

v-model은 실제로 v-bind와 v-on 두 가지 처리를 진행했지만 쌍방향 데이터 연결의 인상을 이해하지 못하기 때문에 다음 장부터 깊이 파고들 것이다.

속성 - 입력 요소에 대한 데이터 바인딩

우선, 우리는 v-bind를 배울 것이다.
Vue.js 공식 클래스와 스타일 귀속
v-bind는 원소에 명령을 보내고 원소의 배치를 명령하면 값의 속성을 변경할 수 있습니다.

<input v-bind:value = "name">

즉, 위의 예시에서 input 요소에value 속성을 놓을 수 있고name 속성을 통해 이value 속성의 값을 변경할 수 있다.
v-bind는 생략할 수 있기 때문에:value라고 표시해도 같은 의미입니다.
input 요소의value 속성을 회상해 보십시오.

<input type="text" value="takunosuke">

input 요소에value 속성을 지정하면 브라우저에 표시될 때 초기 값을 설정할 수 있죠?
상술한 예시에서 초기 값은takunosuke이다.
따라서 입력 요소에서 v-bind에서value 속성을 지정하면 속성 값을 변경하여 입력 폼의 초기 값을 조작할 수 있습니다
여기서 이름을 입력하는 간단한 표를 만들어 이동해 보세요.

나는 이름 속성의 값을 p 라벨에 넣는 코드를 썼다.
name 속성의 값을 변경하면 v-bind의value 속성의 값이 변경되고 input 폼의 초기 값으로 표시됩니다.
따라서 속성에서 input 요소 방향으로 데이터를 연결할 수 있습니다!
단, input 폼에 이름을 입력해도 이름이 아래에 표시되지 않기 때문에 데이터가 input 요소에서 속성 방향으로 귀속될 수 없음을 알 수 있습니다.

input 요소 - 속성 방향의 데이터 귀속

이어서 우리는 v-on을 계속 공부할 것이다.
Vue.js 공식 활동 처리

<input v-on:input = "name = $event.target.value">

v-on은 지정한 이벤트에 따라 처리 명령을 실행합니다.
자바스크립트에서 배운addEventListener와 같다고 생각하세요.
게임왕과 함정카드는 같다고 생각하세요.
이벤트란 단추를 누르거나 마우스를 멈추는 것과 같은 사용자의 행동을 가리킨다.
위의 예에서 v-on:input이지만 이 input는 input 이벤트를 가리킨다.
v-on은 @로 대체할 수 있기 때문에 @input로 표기하는 것도 같은 뜻이다.
input 이벤트를 확인해 보겠습니다.
input 이벤트 MDN 웹 docs
input 이벤트는 input 요소나textarea 요소의value 변경 시 발동됩니다.
또한 $event.target이 있지만, 이벤트가 발생한 요소를 검색할 수 있습니다.
즉, 상기 코드는 input 요소의value가 변경되면name 속성에 이벤트가 발생하는 요소(input)의value값을 대입한다는 것을 의미한다
여기서 실제 입력한 이름의 간단한 표를 만들고 이동합니다.

나는 이름 속성의 값을 p 라벨에 넣는 코드를 썼다.
input 폼에 이름을 입력하는 동시에 input 이벤트도 발동합니다.name 속성은 input 폼에 입력한 이름을 대입하기 때문에 실시간으로 반영됩니다.
따라서 input 요소에서 속성 방향으로 데이터를 연결할 수 있습니다!
그러나name 속성에 이름을 입력해도 input 폼에 이름이 표시되지 않기 때문에 데이터가 속성에서 input 요소 방향으로 귀속될 수 없음을 알 수 있습니다.

양방향 v-model 데이터 귀속

상술한 두 가지 모델의 데이터를 결합하여 연결하는 것이야말로 v-model이다.
그러면 실제 두 모드를 조합해서 v-model을 완성해 보세요.

양방향 데이터 연결이 가능하다는 것을 보실 수 있습니다.
주로 v-model은 로그인 폼과 새로운 로그인 폼 제작 등에서 활발하다. 당시 내부에서 이런 일이 있었다는 것을 깨달았으면 좋겠다.

끝내다

이상, 대충 이해해 주셔서 죄송합니다. 제가 총결해 드리겠습니다
v-model 같은 것을 의식하지 않고 사용할 수 있다고 생각하는 초보자. 실제로 이 v-model은 input 요소와textarea 요소뿐만 아니라 친자 구성 요소 간의 데이터 교환에도 사용할 수 있다는 것은 충격적인 사실이다.따라서 본 보도는 다음 복선이 될 것이다
초보자들아, 앞으로 나와 함께 공부할 수 있다면 좋겠다.선배님 여러분, 매번 실수가 발생할 때마다 당신의 보살핌을 받았습니다.앞으로도 잘 부탁드립니다.
Mahalo
takunosuke