使用vue用户输入两个数AB 自定义一个指令add，要求完成以下操作： 1.调用add指令能够在html页面上显示两数之和 2.要求背景颜色、字体颜色、字体大小可以更改

好的，您的问题是关于如何使用Vue实现一个自定义指令add，要求能够在HTML页面上显示两数之和，并且能够更改背景颜色、字体颜色和字体大小。下面是具体实现方法：

HTML代码：

<div id="app">
  <input type="text" v-model="num1">
  <input type="text" v-model="num2">
  <button v-add>计算</button>
  <div v-text="sum" :style="{ backgroundColor: bgColor, color: fontColor, fontSize: fontSize }"></div>
</div>

Vue代码：

new Vue({
  el: '#app',
  data: {
    num1: '',
    num2: '',
    sum: 0,
    bgColor: 'yellow',
    fontColor: 'red',
    fontSize: '24px'
  },
  directives: {
    add: {
      bind: function (el, binding, vnode) {
        el.addEventListener('click', function () {
          var sum = parseFloat(vnode.context.num1) + parseFloat(vnode.context.num2);
          vnode.context.sum = sum;
        });
      }
    }
  }
})

在以上代码中，我们在Vue中使用了自定义指令add，通过v-add绑定到计算按钮上，当用户点击按钮时，Vue会调用该指令中的bind函数，该函数会监听按钮的点击事件，并根据用户输入的两个数计算它们的和，最后将结果赋值给Vue中的sum变量。我们还使用了Vue的指令修饰符v-text和绑定表达式:style，将计算结果sum显示在页面上，并且可以通过bgColor、fontColor和fontSize三个变量来更改其背景颜色、字体颜色和字体大小。最后，我们将以上代码放在script标签中，并将该标签放在HTML页面的body标签中，即可在页面上实现该功能。