Vue.js—v-model과 v-bind의 차이

Vue.js—v-model과 v-bind의 차이

온라인 코스로 부에를 배우고 있는데 강사가 기본값을 입력하는 연습을 시켜줬어.I completed it with usv-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폼 입력에 대한 양방향 바인딩.그것은 결합한다.v-bind, 그리고 마크업으로 js 값을 가져오고v-on:inputjs 값을 업데이트한다.js 값이 있어야 함data, 또는 .inject.

사용하다v-model네가 할 수 있을 때사용하다v-bind/v-on꼭 :-) 당신의 대답이 받아들여졌기를 바란다.

v-model 모든 기본 HTML 입력 유형(텍스트, 텍스트 영역, 번호, 라디오, 확인란, 선택)과 함께 작동한다.사용할 수 있다v-model와 함께input type=date모델이 날짜를 ISO 문자열(yyyy-mm-dd)로 저장하는 경우모델에서 날짜 객체(날짜 객체를 조작하거나 형식을 지정하려는 즉시 좋은 생각)를 사용하려면 이렇게 하십시오.

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-back
단방향 데이터 바인딩으로, 입력 요소에만 데이터를 바인딩할 수 있지만 입력 요소를 변경하는 바인딩된 데이터를 변경할 수 없음. v-properties는 html 속성을 바인딩하는 데 사용됨
ex:
<input type="text" v-bind:class="abc" v-bind:value="">

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

v-model은 입력 값을 변경하면 바인딩 데이터가 변경되고 그 반대의 경우도 마찬가지라는 양방향 바인딩의 의미를 갖는다.그러나 v-bind:value는 바운드 데이터를 변경하여 입력 값을 변경할 수 있지만 요소를 통해 입력 값을 변경하여 바인딩 데이터를 변경할 수는 없다는 것을 의미하는 단방향 바인딩이라고 한다.

v-모델은 폼 요소와 함께 사용하도록 설계되었다.이를 통해 양식 요소(예: 텍스트 입력)를 Vue 인스턴스의 데이터 개체와 연결할 수 있다.

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

v-properties는 사용자 지정 소품을 만드는 데 구성 요소와 함께 사용하도록 설계되었다.이렇게 하면 구성 요소에 데이터를 전달할 수 있다.프로펠러가 반응하기 때문에 구성요소에 전달된 데이터가 변경되면 구성요소는 이러한 변화를 반영할 것이다.

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>

참조URL: https://stackoverflow.com/questions/42260233/vue-js-difference-between-v-model-and-v-bind