Vue中v-model和v-bind简单对比

刚开始学Vue，前端好复杂，好不容易在Angular、React和Vue中选了一个好好学下，看了看还有webpack和各种组件库，路漫漫其修远兮，吾将上下而求索。

References:

• https://www.tangshuang.net/3507.html 写的很详细的一篇
• https://cn.vuejs.org/v2/guide/components.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-model Vue文档
• https://segmentfault.com/a/1190000007662815
• https://blog.csdn.net/hp910315/article/details/79658610
• 《Vue.js实战》

Vue中绑定数据有三种方式，一种是插值，也就是{{ name }}的形式（Mustache语法），一种是v-bind，还有一种是v-model。

• v-bind
  v-bind主要用法是动态更新HTML元素上的属性。例如：

  <div v-bind:class="classObject"></div>
  
  data: {
  classObject: {
    active: true,
    'text-danger': false
  }
  }

  当classObject对象的属性变化时，html中的class属性也会相应改变。

• v-model
  v-model用于表单元素的双向绑定。例如：

  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>

  当message的值改变时，input的value会跟着改变。当input输入框中的值改变时，message的值也会随之改变。

在vue官网中对于v-model的描述有这样一句：“本质上不过是语法糖”。但是下面就没有详细的描述了，但是在组件的部分又有这样一段代码：

参考其他的文章知道，其实v-model就是v-on:input和v-bind:value的语法糖。即：

<input v-model="searchText">

其实就是

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

的简写。

所以简单的理解就是：

• v-bind是单向绑定，可以通过操作model的值实现DOM中元素的联动更新。
• v-model是双向绑定，主要用于表单元素，可以通过操作model更新DOM，也能通过改变表单的值反过来影响model的值。
• v-model其实就是在v-bind的基础上做了v-on:input事件处理

文章到这里就结束，其实文章大多数网上都有，但是我找了很多都不得其解，在敲书上的一个Demo时遇到的问题。下面想分享下我敲的Demo和遇到的问题。

目的是实现一个输入框组件，可以直接数字数字或点击按钮增加和减少数字。这里为了描述问题就删减一些代码，方便突出问题所在。

组件定义部分如下：

Vue.component("input-number", {
    template: '<div>\
                <input type="text" :value="currentValue"/>\
                </div>',
    props: {
        min: {
            type: Number,
            default: -Infinity
        },
        max: {
            type: Number,
            default: Infinity
        },
        value: {
            type: Number,
            default: 0
        }
    },
    data: function() {
        return {
            currentValue: this.value
        }
    }
});


var app = new Vue({
    el: "#app",
    data: {
        ParentValue: 3
    }
});

html代码如下：

<input-number :min="1" :max="10" v-model="ParentValue"></input-number>

可以看到组件的props中定义了3个变量：min、max、value，在html中定义了3个绑定的变量min、max、ParentValue。
首先v-model绑定的是ParentValue，这里为了区分父组件和子组件的值，特意把这个变量写成了ParentValue，而不是value。在定义的模板中，value绑定的值是组件中的currentValue，而currentValue来自于props的value，这个value默认值为0。但是实际展示发现确是ParentValue的值3。
没有明显的传值过去，但是却被用到了。猜测是有隐式传递，于是把组件定义的value改为其他名字发现都是默认值0，无论ParentValue怎么改变都不影响。基本可以确定是隐式传递了名为value的变量。但是还是不敢下定论，终于在vue的文档中确定了我的猜测（上图）。
总结：多动手，多看文档，前端坑好多。