v-model

v-model是什么？

v-model 是Vue框架的一种内置的API指令，本质是一种语法糖写法。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊

<template>
  <div class="app">
    <input type="text" v-model="msg1" />
    <br />
    <!-- v-model的底层其实就是：value和 @input的简写 -->
    <input type="text" :value="msg2" @input="msg2 = $event.target.value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg1: '',
      msg2: '',
    }
  },
}
</script>

<style>
</style>

处理。

v-model的原理

官方有说到，v-model的原理其实是背后有两个操作：

 

1. v-bind绑定value属性的值；
2. v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；
3. 你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。 —— vue2官方文档

什么是单项数据流？
父组件可以向值组件传递数据,并且改变值组件的值,而子组件不能改变父组件传递给它的 prop 属性，官方推荐的做法是它抛出事件，通知父组件自行改变绑定的值。

v-model 的做法是怎样的？
v-model 做法完全符合单项数据流。甚至于，它给出了一种在命名和事件定义上的规范。
众所周知 .sync 修饰符是单向数据流的另一个典型范式。

v-model绑定textarea

<div class="demo">
    <textarea v-model="article" cols="30" rows="10"> </textarea>
    <h2>article当前的值是：{{ article }}</h2>
  </div>

export default {
  name: 'demo',
  data () {
    return {
      article: "a"
    }
  }
}