Vue.js 官方文档较绕的地方总结 ——boolan

2017.3.17
一 组件 #使用自定义事件的表单输入组件：

<currency-input v-model="price"></currency-input>

Vue.component('currency-input', {
  template: '\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  ',
  props: ['value'],
  methods: {
    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
    updateValue: function (value) {
      var formattedValue = value
        // 删除两侧的空格符
        .trim()
        // 保留 2 小数位
        .slice(0, value.indexOf('.') + 3)
      // 如果值不统一，手动覆盖以保持一致
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // 通过 input 事件发出数值
      this.$emit('input', Number(formattedValue))
    }
  }
})

(我们来看一个非常简单的货币输入的自定义控件) 括号是官方文档的介绍，非常简单吗？ 你妹的，很绕好不好~

<currency-input v-model="price"></currency-input>

这段代码翻译为如下：

<custom-input v-bind:value="price" v-on:input="price= arguments[0]"></custom-input>

作用为：1.为子模板提供名为value的参数，值为 price ； 2. v-on:input是绑定的回调函数，用于修改price的值！
这就是一个语法糖。问题是v-bind与 v-on 太容易与模板内的input的 v-bind 与v-on弄混淆，搞得摸不着头脑

    <script>
    Vue.component('currency-input', {
        template: '\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="this.setValue"\
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  ',

这段代码为子组件声明的部分，声明了一个名为currency-input子组件。
并定义了模板

      <input\
        ref="input"\
        v-bind:value="this.value"\
        v-on:input="updateValue($event.target.value)"\
      >\

中间这部分，会被渲染出来。ref为绑定节点方便调用（还未填坑），v-bind绑定的显示的值，为一般的绑定，绑定为this.value 该值是父组件传递进来的，其次v-on：input=“xx”,绑定了输入时调用的函数

     props: ['value'],
        methods: {
            // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
            updateValue: function(value1) {

                var formattedValue = value1
                    // 删除两侧的空格符
                    .trim()
                    // 保留 2 小数位
                    .slice(0, value1.indexOf('.') + 3)
                    // 如果值不统一，手动覆盖以保持一致
                if (formattedValue !== value1) {
                    this.$refs.input.value = formattedValue
                }
                console.log(this.$refs.input.value);
                // 通过 input 事件发出数值
                //这个值，在该函数执行完后才改变
                this.$emit('input', Number(formattedValue))
                console.log(this.value);
            }
        }
    });

以上为定义的第二部分。
props 为获取父组件传递的值，updateValue为定义的一个方法。

 this.$emit('input', Number(formattedValue))

调用先前指定的input的函数,v-model绑定的，会修改price的值

console.log(this.value);

可以发现，this.value的值在这里并没有发生改变，虽然写在this.$emit()后；可以猜测，this.$emit指向函数的执行，是在updateValue（）函数体执行完之后。
解释一下后，才能说简单；vue刚上手，这概念模糊的折腾死人