Vue Note

2017-8-21

1. 给组件绑定原生事件

有时候，你可能想在某个组件的根元素上监听一个原生事件，如click、keyup等。可以使用 .native 修饰 v-on 。例如：

<my-component v-on:click.native="doTheThing"></my-component>    

如果不加.native修饰，父组件则会把click当作子组件传来的自定义事件监听

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

<input v-model="something">

是下面的语法糖包装而成：

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

所以要让组件的 v-model 生效，它必须：

• 接受一个 value 属性
• 在有新的 value 时触发 input 事件
  一个非常简单的货币输入：

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

<script type="text/javascript">
import currencyInput from './currencyInput.vue';

export default {
  data () {
    return {
      price:0
    }
  },
  components: {
    currencyInput: currencyInput

  }
}
</script>

子组件 currencyInput.vue

<template>
  <span>
    <input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)"></span>
</template>

<script type="text/javascript">
export default {

  props: ['value'],

  methods: {

    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
    updateValue: 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))
    }
  }

}
</script>

摘录自：http://www.jianshu.com/p/7d5b92fa337e?from=timeline&isappinstalled=0