Vue의 v-model 사용 사례

Vue 프레임워크는 이미 MVVM(Mode-View-View-Model)의 양방향 바인딩이 아닙니다.Vue 1.0 시대에는 Vue가 처음 출시되었을 때 MVVM이 양방향으로 귀속되어 있었다.Vue 2.0 이후 Vue는 더 이상 양방향 귀속이 아니라 React처럼 단방향 귀속 뮤직비디오(Model-View)입니다.그러나 Vue에는 양방향으로 연결된 인터페이스가 남아 있습니다. v-model이 바로 그것입니다.
1. 기본 사용법

<template>
 <div id="app">
  <input v-model="x">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 'init'
  }
 }
}

JS에서 x의 값을 수정하면 input 입력 상자에서도 변경됩니다.마찬가지로 페이지의 input 입력 상자에 수동으로 값을 입력하면 변수 x의 값도 변경됩니다.대상의 변수 변화는 보기의 input 변화에 영향을 주고 보기의 input 변화는 대상의 변수 x값의 변화에 영향을 준다.이것이 바로 양방향 바인딩(Model-View-View-Model)입니다.
2. v-model
실질적으로 상기 v-model을 사용하는 코드는 다음과 같은 코드와 동일합니다.

<template>
 <div id="app">
  <input :value="x" @input="x = $event.target.value">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 'init'
  }
 }
}
</script>

v-model이 도와주는 일은 input의value 값에 동적 귀속을 설정하고 입력 상자의 input 이벤트가 터치되면 동적 귀속의value 변수 값을 실시간으로 수정하는 것입니다.따라서 v-model은 실질적으로 상술한 방식의 문법당이다.
$event는 원래 DOM 이벤트의 이벤트 대상입니다.
3. v-model의 수식자
모든 수식자는 보조적인 작용을 하는데 사실 함수에서 스스로 조건을 판단하여 실현할 수 있다.lazyv-model 기본 감청은 입력 상자의 input 이벤트입니다. 원생 DOM의 input 이벤트는 실시간 입력 변화 값을 기록하는 것입니다.그러나 우리는 때때로 실시간으로 결과를 기록할 필요가 없고 최종적으로 입력한 결과 값만 기록하면 된다.
입력 상자가 초점을 잃었거나 리턴 키를 눌렀을 때 실행되는 change 이벤트가 있습니다.v-model에서.lazy 수식자의 방식을 이 감청 모드로 전환합니다.

<template>
 <div id="app">
  <input v-model.lazy="x">
  {{x}}
 </div>
</template> ：<template>
 <div id="app">
  <input :value="x" @change="x = $event.target.value">
  {{x}}
 </div>
</template>

.number.number 수식자는 입력 내용이 바뀐 후 변수 값을 부여할 때 parseFloat () 함수를 자동으로 사용하여 숫자로 만듭니다.이 수식자를 사용할 때 변수의 초기 값은 숫자여야 합니다.

<template>
 <div id="app">
  <input v-model.number="x">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 0
  }
 }
}
</script>

.trim

.trim 수식자는 입력한 내용을 변경한 후 변수 값을 부여할 때 앞뒤의 빈칸을 자동으로 무시하고 제거합니다.입력한 문자열의 내용을 더욱 정확하게 기록하다.

<template>
 <div id="app">
  <input v-model.trim="x">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 'init'
  }
 }
}
</script>

4. 입력 상자를 사용자 정의하는 v-modelv-model
기본적인 사용법은 원생의 입력 상자 요소에만 적용되며, 사용자 자신이 봉인한 입력 상자에 대해서는 다음과 같은 방식으로 v-model을 사용할 수 있다.구성 요소에 사용할 때 v-model의 실질은 다음과 같습니다.

<custom-input v-model="x"></custom-input>

 ：

<custom-input :value="x" @input="x = $event"></custom-input>

따라서 사용자 정의 양식 구성 요소에 다음과 같이 쓰십시오.

<template>
  <div class="wrapper">
    <input :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String
    }
  }
}
</script>

<style scoped>
  .wrapper{
    border: 2px solid blue;
    display: inline-block;
  }
  .wrapper input{
    color: red;
  }
</style>
<template>
 <div id="app">
  <MyInput v-model="x"/>
  {{x}}
 </div>
</template>

<script>
import MyInput from './components/MyInput'
export default {
 data(){
  return {
   x: 0
  }
 },
 components:{
  MyInput
 }
}
</script>

추가: 사용자 정의 구성 요소 안의 원생 입력 상자에도 v-model을 사용하려면 구성 요소 v-model의 실질에 따라 속성을 계산하는 값 부여 방식을 = 로 사용할 수 있습니다.
이상은 바로 Vue의 v-model 용법 실례에 대한 상세한 내용입니다. 더 많은 vue v-model에 관한 자료는 저희 다른 관련 문장에 주목하세요!