vue 使用自定义事件的表单输入组件

Question

使用自定义事件的表单输入组件
自定义事件可以用来创建自定义的表单输入组件，使用v-model来进行数据双向绑定。要牢记：
这不过是以下示例的语法糖：
v-bind:value="something"
v-on:input="something=$event.target.value">
所以在组件中使用时，它相当于下面的简写：
v-bind:value="something"
v-on:input="something=arguments[0]">
所以要让组件的v-model生效，它应该(从2.2.0起是可配置的)：接受一个valueprop在有新的值时触发input事件并将新值作为参数我们来看一个非常简单的货币输入的自定义控件：
Vue.component('currency-input',{
template:'\
\
$\
ref="input"\
v-bind:value="value"\
v-on:input="updateValue($event.target.value)"\
>\
\
',
props:['value'],
methods:{
//不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
updateValue:function(value){
varformattedValue=value
//删除两侧的空格符
.trim()
//保留2位小数
.slice(
0,
value.indexOf('.')===-1
?value.length
:value.indexOf('.')+3
)
//如果值尚不合规，则手动覆盖为合规的值
if(formattedValue!==value){
this.$refs.input.value=formattedValue
}
//通过input事件带出数值
this.$emit('input',Number(formattedValue))
}
}
})
这是vue.js文档上的例子，整个人都懵逼了。。首先是：这不过是以下示例的语法糖：
v-bind:value="something"
v-on:input="something=$event.target.value">
所以在组件中使用时，它相当于下面的简写：
v-bind:value="something"
v-on:input="something=arguments[0]">
直接所以了。。。为啥在组件使用中是something=arguments[0]了呢？
第二个问题是。。。这个例子我实在是很费解，谁能够详细的解释一下吗？
第三个问题。。。我学了js，html，css。然后把vue从头看到这里的。到这卡住了。感觉理解难度突然变得很高，文档中又没有详细解释(我不是想喷这个文档...)。卡的死死的。。我不知道是因为我自己学的不好还是怎么样，通常情况下有了基础，然后看文档应该是循序渐进，慢慢理解，不会存在这种卡主的情况的。想问一下大家，这种情况我该怎样继续学习？是继续看文档或者回头补js还是看看教学视频什么的？

Answer 1

为啥在组件使用中是something=arguments[0]了呢？给你拆解下这句v-on:input="something=$event.target.value"v-on:input是vuejs的用法，意即绑定函数input，可以简写成@inputinput这个函数会在内部通过某种方式触发，结果就是执行something=$event.target.valuearguments是js的类数组对象，可以接收任意个参数，它的第一个值就是arguments[0]。something=$event.target.value这句，接收了一个参数，如果接收了两个参数，行如：something=(val1,val2)，那么val1等价于arguments[0]，val2等价于arguments[1]第二个问题这个例子就是通过currency-input这个组件，告诉你vuejs的组件怎么写，怎么用。第三个问题同时也针对第二个问题你还迷迷糊糊的，就是多写多看，不要慌，水到渠成，自然就理解了

Answer 2

1.首先v-on:input后面接的相对于事件处理函数，就是会把后面的语句放到事件处理函数里去执行，而input的change事件处理函数一般有两个参数，类似下面的形式：onChange(value,$event){//arguments[0]就是value$event就是事件对象}2.你的需求可以用过滤器来实现，不需要这么麻烦