如何在Vue组件中直接应用指令，而无需通过new Vue实例？

在Vue中，如果你想在一个已经存在的DOM元素上应用指令，而不必创建一个新的Vue实例，你可以使用Vue的`Vue.directive()`静态方法注册全局指令，然后直接在DOM元素上调用它。以下是步骤：

1. 注册全局指令：

// 在main.js或者其他全局脚本文件中
import Vue from 'vue';

Vue.directive('example', {
  // 指令配置，例如绑定了data、更新函数、钩子等
  bind(el, binding) {
    console.log('指令被绑定到了元素', el);
    // 可以在此处设置初始状态或做其他操作
  },
  update(value) {
    console.log('指令值更新了:', value);
    // 当指令绑定的数据值改变时，这里会触发
  },
  unbind() {
    console.log('指令被解绑');
    // 指令被移除时执行
  }
});

2. 在DOM中直接使用指令：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <button v-example="yourValue">点击我</button>
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    yourValue: 'Hello Vue Directive'
  }
});
</script>

在这个例子中，`v-example`就是我们之前注册的全局指令，其值从`yourValue`数据属性中获取。