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刚上手，这概念模糊的折腾死人