나는 온라인 과정으로 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>답변
