vue 使用自定義事件的表單輸入組件

使用自定義事件的表單輸入組件

自定義事件可以用來(lái)創(chuàng)建自定義的表單輸入組件，使用 v-model 來(lái)進(jìn)行數(shù)據(jù)雙向綁定。要牢記：

<input v-model="something">

這不過(guò)是以下示例的語(yǔ)法糖：

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

所以在組件中使用時(shí)，它相當(dāng)于下面的簡(jiǎn)寫：

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

所以要讓組件的 v-model 生效，它應(yīng)該 (從 2.2.0 起是可配置的)：
接受一個(gè) value prop
在有新的值時(shí)觸發(fā) input 事件并將新值作為參數(shù)
我們來(lái)看一個(gè)非常簡(jiǎn)單的貨幣輸入的自定義控件：

<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: {
    // 不是直接更新值，而是使用此方法來(lái)對(duì)輸入值進(jìn)行格式化和位數(shù)限制
    updateValue: function (value) {
      var formattedValue = value
        // 刪除兩側(cè)的空格符
        .trim()
        // 保留 2 位小數(shù)
        .slice(
          0,
          value.indexOf('.') === -1
            ? value.length
            : value.indexOf('.') + 3
        )
      // 如果值尚不合規(guī)，則手動(dòng)覆蓋為合規(guī)的值
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // 通過(guò) input 事件帶出數(shù)值
      this.$emit('input', Number(formattedValue))
    }
  }
})

這是vue.js文檔上的例子，整個(gè)人都懵逼了。。
首先是：
這不過(guò)是以下示例的語(yǔ)法糖：

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

所以在組件中使用時(shí)，它相當(dāng)于下面的簡(jiǎn)寫：

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

直接所以了。。。為啥在組件使用中是something = arguments[0]了呢？

第二個(gè)問題是。。。這個(gè)例子我實(shí)在是很費(fèi)解，誰(shuí)能夠詳細(xì)的解釋一下嗎？

第三個(gè)問題。。。我學(xué)了js，html，css。然后把vue從頭看到這里的。到這卡住了。感覺理解難度突然變得很高，文檔中又沒有詳細(xì)解釋(我不是想噴這個(gè)文檔...)。卡的死死的。。我不知道是因?yàn)槲易约簩W(xué)的不好還是怎么樣，通常情況下有了基礎(chǔ)，然后看文檔應(yīng)該是循序漸進(jìn)，慢慢理解，不會(huì)存在這種卡主的情況的。想問一下大家，這種情況我該怎樣繼續(xù)學(xué)習(xí)？是繼續(xù)看文檔或者回頭補(bǔ)js還是看看教學(xué)視頻什么的？