乐趣区

关于vue.js:Vue-的双向绑定vmodel

jiezi

写在后面

Vue 框架早曾经不是 MVVM（Mode-View-View-Model）双向绑定了。早在 Vue 1.0 时代，Vue 在刚入世的时候确实是 MVVM 双向绑定。自 Vue 2.0 以来，Vue 就不再是双向绑定了，而是像 React 一样是单向绑定 MV（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 事件里的 event 事件对象。

其余表单的输出绑定详见 vue 表单

3. v-model 的修饰符

所有修饰符都是起一个辅助的作用，其实能够在函数里本人判断条件实现。

.lazy

v-model 默认监听的是输入框的 input 事件，原生 DOM 的 input 事件就是记录实时的输出变动值。然而，咱们有时不须要实时记录后果，只须要记录最终输出的后果值就能够了。
input 的原生 DOM 事件中还有一个 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-model

v-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 的本质，应用计算属性的赋值形式为 = 应用。

退出移动版