写一个页面包含v-bind,v-model,v-show,v-if,v-for和自定义指令

在Vue.js中，`v-bind`, `v-model`, `v-show`, `v-if`, 和 `v-for` 是内置的指令，用于数据绑定和条件渲染。而自定义指令则是开发者可以根据需要创建的，它们允许更复杂的行为。下面是一个简单的例子，展示如何在HTML模板中使用这些指令：

<template>
  <div id="app">
    <!-- v-bind (prop) 绑定数据到元素属性 -->
    <input type="text" v-bind:value="message">

    <!-- v-model 实现双向数据绑定，输入时自动更新model -->
    <input type="text" v-model="message">

    <!-- v-show 根据变量控制元素的显示和隐藏 -->
    <p v-show="showMessage">这是个动态显示的段落</p>

    <!-- v-if 控制元素是否渲染，仅当condition为真时 -->
    <p v-if="shouldShow">只有在this.shouldShow为true时才会显示</p>

    <!-- v-for 循环数组，item表示当前遍历项 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>

    <!-- 自定义指令 example -->
    <button @my-custom-directive="customAction">触发自定义事件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue',
      showMessage: true,
      shouldShow: false,
      items: ['Item 1', 'Item 2', 'Item 3'],
    };
  },
  methods: {
    customAction() {
      console.log('自定义事件触发了');
    }
  }
};
</script>

在这个示例中，`v-bind`、`v-model`、`v-show` 和 `v-if` 都用于数据关联和条件控制，而 `v-for` 则用于列表渲染。自定义指令 `@my-custom-directive` 使用了 Vue 的事件系统，通过 `@` 符号监听用户定义的事件。