这是我对例子写的注释:
Vue.component('currency-input', {
template: '\
\
$\
ref="input"\ //注册为input,是DOM的节点元素
v-bind:value="value"\ //v-model的value(也是prop)
v-on:input="updateValue($event.target.value)"\ //封装更新value的函数
>\
\
',
props: ['value'], //父组件将绑定的value传给子组件
methods: {
// 不是直接更新值,而是使用此方法来对输入值进行格式化和位数限制
updateValue: function (value) {
var formattedValue = value //对值进行处理
// 删除两侧的空格符
.trim()
// 保留 2 小数位和2位数
.slice(0, value.indexOf('.') + 3)
// 如果值不统一,手动覆盖以保持一致,为了保持输入框显示内容跟格式化内容一致
if (formattedValue !== value) {
//因为注册是一个input元素,所以this.$refs 就是input元素
this.$refs.input.value = formattedValue
}
//手动触发input事件,将格式化后的值传过去,这是最终显示输入框的输出
this.$emit('input', Number(formattedValue))
}
}
})
//实例化vue实例的
new Vue({
el: '#aa', //要绑定一个vue实例,例如包裹一个id为aa的div
data:{
price:'' //v-model要有数据源
}
})