Vue项目中自定义指令的用法介绍——举例，创建一个自定义指令，限制输入框只能输入金额

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

比如：当页面加载时，让元素获取焦点、限制输入框输入等等需要对Dom进行的操作，都可以用自定义指令来实现

下面用一个限制输入框只能输入金额的指令来介绍自定义指令 的用法

例如，页面上有一个input输入框，默认情况下可以输入任何文本

<template>
  <div class="home">
    金额：<input type="text" v-model="money" placeholder="请输入金额">
  </div>
</template>

<script>

export default {
  name: 'Home',
  data(){
    return {
      money:"",
    }
  }
}
</script>

下面，我们创建一个自定义指令来限制输入框只能输入金额（数字，并且只能输入两位小数),代码如下

在 main.js下创建一个名为checkMoney的自定义指令

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
//自定义指令限制只能输入金额
Vue.directive('checkMoney',{
  //当被绑定的元素插入到 DOM 中时
  inserted(el){
    el.addEventListener("input",function(e){
      let val = e.target.value;
      let reg = /^[0-9]+(.[0-9]{0,2})?$/;
      if(!val){
        e.target.value = "";
      }else if(!isNaN(val)){
        if(!reg.test(val)){
          e.target.value = parseFloat(val).toFixed(2);
        }
      }else{
        e.target.value = ""
      }
    })
  }
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在页面上使用我们创建好的自定义指令

在input 输入框上添加 一个 v-checkMoney

<template>
  <div class="home">
    金额：<input type="text" v-checkMoney v-model="money" placeholder="请输入金额" />
  </div>
</template>

<script>

export default {
  name: 'Home',
  data(){
    return {
      money:"",
    }
  }
}
</script>

效果如下图，输入框只能输入两位小数的数字了