Vue.js—v- 모델과 v- 바인드의 차이점

나는 온라인 과정으로 Vue를 배우고 있으며 강사는 기본값으로 입력 텍스트를 만드는 연습을주었습니다. v-model을 사용하여 완성했지만 강사는 v-bind : value를 선택했는데 그 이유를 이해할 수 없습니다.

누군가이 두 가지의 차이점과 각각을 더 잘 사용할 때의 간단한 설명을 해 줄 수 있습니까?

에서 여기 - 기억 :

<input v-model="something">

본질적으로 다음과 같습니다.

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

또는 (약식 구문) :

<input
   :value="something"
   @input="something = $event.target.value"
>

양식 입력에 대한 양방향 바인딩도 마찬가지 v-model입니다 . 그것은 결합 하는 JS 값 가져 마크 업에, 그리고 할 JS 값을 업데이트 .v-bindv-on:input

가능하면 사용하십시오 v-model. 당신이해야 할 때 v-bind/ 사용 v-on:-) 나는 당신의 대답이 받아 들여지기를 바랍니다.

v-model 모든 기본 HTML 입력 유형 (텍스트, 텍스트 영역, 숫자, 라디오, 확인란, 선택) 과 함께 작동합니다 . 모델이 날짜를 ISO 문자열 (yyyy-mm-dd)로 저장 v-model하는 input type=date경우 사용할 수 있습니다 . 모델에서 날짜 객체를 사용하려면 (조작하거나 포맷하자마자 좋은 아이디어입니다) 이렇게하십시오 .

v-model알아두면 좋은 몇 가지 추가 정보가 있습니다. IME (많은 모바일 키보드 또는 중국어 / 일본어 / 한국어)를 사용하는 경우 단어가 완성 될 때까지 (공백을 입력하거나 사용자가 필드를 떠날 때까지) v-model이 업데이트되지 않습니다. v-input훨씬 자주 발사됩니다.

v-model또한 수정이있다 .lazy, .trim, .number, 덮여 다큐먼트 .

간단하게 말하면 v-model위한 양방향 바인딩 방법 : 당신이 입력 값을 변경하는 경우, 바인딩 된 데이터가 변경 반대한다 .

그러나 v-bind:value호출 결합 편도 : 즉 그 는 바인딩 데이터를 변경하여 입력 값을 변경할 수 있지만,이 요소를 통해 입력 된 값을 변화시킴으로써 바운드 데이터를 변경할 수없는 .

이 간단한 예를 확인하십시오 : https://jsfiddle.net/gs0kphvc/

v- 모델
그것은 양방향 데이터 바인딩이며, 입력 값을 변경할 때 html 입력 요소를 바인딩하는 데 사용되며 바인딩 된 데이터가 변경됩니다.

v-model은 HTML 입력 요소에만 사용됩니다.

ex: <input type="text" v-model="name" > 

v- 바인드
그것은 한 가지 방법으로 데이터 바인딩이며, 입력 요소에만 데이터를 바인딩 할 수 있지만 제한된 데이터 변경 입력 요소를 변경할 수는 없습니다. v-bind는 html 속성
ex 를 바인딩하는 데 사용됩니다 .
<input type="text" v-bind:class="abc" v-bind:value="">

<a v-bind:href="home/abc" > click me </a>

v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa. but v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.

v-model is intended to be used with form elements. It allows you to tie the form 
 element (e.g. a text input) with the data object in your Vue instance.

Example: https://jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/ 

v-bind is intended to be used with components to create custom props. This allows you to pass data to a component. As the prop is reactive, if the data that’s passed to the component changes then the component will reflect this change

 Example: https://jsfiddle.net/jamesbrndwgn/ws5kad1c/3/

이것이 기본 이해에 도움이되기를 바랍니다.

사용하고 싶지 않은 경우가 있습니다 v-model . 두 개의 입력이 있고 서로 의존하는 경우 순환 참조 문제가 발생할 수 있습니다. 일반적인 사용 사례는 회계 계산기를 만드는 경우입니다.

이러한 경우 감시자 또는 계산 된 속성을 사용하는 것은 좋지 않습니다.

대신, v-model위의 답변이 나타내는 것처럼 귀하를 가져 와서 나누십시오.

<input
   :value="something"
   @input="something = $event.target.value"
>

실제로,이 방법으로 논리를 분리하는 경우 메소드를 호출 할 수 있습니다.

실제 시나리오에서 다음과 같이 보입니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input :value="extendedCost" @input="_onInputExtendedCost" />
  <p> {{ extendedCost }}
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: function(){
      return {
        extendedCost: 0,
      }
    },
    methods: {
      _onInputExtendedCost: function($event) {
        this.extendedCost = parseInt($event.target.value);
        // Go update other inputs here
    }
  }
  });
</script>