在dom元素上应用自定义指令实现文字大小和颜色初始设置和点击更行按钮之后的文字大小和颜色改变

在 Vue 中，你可以使用自定义指令（Custom Directive）来实现这样的功能。自定义指令可以扩展 HTML 元素的行为，这里是创建一个简单的指令来控制文本的字体大小和颜色：

首先，你需要定义一个名为 `custom-style` 的自定义指令。这个指令会在绑定时设置初始样式，而在点击事件触发时更新样式。

// 指令组件（可单独写为一个.vue文件）
export default {
  directives: {
    customStyle: {
      bind(el, binding, vnode) {
        // 设置初始样式
        el.style.fontSize = binding.value.fontSize || '16px';
        el.style.color = binding.value.color || 'black';

        // 添加点击事件监听器
        vnode.context.$on('updateStyles', () => {
          el.style.fontSize = binding.value.newFontSize;
          el.style.color = binding.value.newColor;
        });
      },
      update(newVal, oldVal, vnode) {
        if (newVal !== oldVal) {
          vnode.context.$emit('updateStyles', newVal);
        }
      },
      unbind(el, binding, vnode) {
        // 移除点击事件监听器，以防内存泄漏
        vnode.context.$off('updateStyles');
      }
    }
  }
}

然后，在你的模板中使用这个指令：

<div v-custom-style="{ fontSize: '20px', color: 'blue' }" @click="updateStyles">点击修改文字样式</div>

<script>
export default {
  methods: {
    updateStyles() {
      this.customStyleValue = {
        newFontSize: '18px', // 新的文字大小
        newColor: 'red'       // 新的颜色
      };
    }
  },
  data() {
    return {
      customStyleValue: { // 初始化指令绑定的数据
        fontSize: '16px',
        color: 'black'
      }
    };
  }
};
</script>

在这个例子中，当页面加载时，文字会被设置为初始样式（20px 字体大小，蓝色）。当你点击 "点击修改文字样式" 文字时，会调用 `updateStyles` 方法，改变数据并触发 `updateStyles` 事件，进而更新文本样式。