Vue 3指令与事件处理

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

<template>
  <div>Hello, {{ name }}!</div>
</template>

<script>
export default {
  data() {
    return {
      name: 'World',
    };
  },
};
</script>

<template>
  <div>Hello, {{ name }}!</div>
</template>
<script>
export default {
  data() {
    return { name: 'World' };
  },
};
</script>

<template>
  <img  : src="imageSrc"  alt="Image">
</template>
<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg',
    };
  },
};
</script>

<template>
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</template>
<script>
export default {
  data() {
    return {
      message: '',
    };
  },
};
</script>

<template>
  <button @click="incrementCounter">Click me</button>
</template>
<script>
export default {
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    incrementCounter() {
      this.counter++;
    },
  },
};
</script>

<template>
  <p v-show="isVisible">This is shown by v-show</p>
  <p v-if="isVisible">This is shown by v-if</p>
</template>
<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
};
</script>

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
    };
  },
};
</script>

<template>
  <p v-text="textContent"></p>
  <p v-html="htmlContent"></p>
</template>
<script>
export default {
  data() {
    return {
      textContent: 'This is text content',
      htmlContent: '<span>This is HTML content</span>',
    };
  },
};
</script>

export default {
  directives: {
    focus: {
      // 指令的定义
      mounted(el) {
        el.focus();
      },
    },
  },
};

export default {
  directives: {
    focus: {
      bind(el) {
        console.log('focus bind');
      },
      inserted(el) {
        console.log('focus inserted');
      },
      updated(el) {
        console.log('focus updated');
      },
      componentUpdated(el) {
        console.log('focus componentUpdated');
      },
      unbind(el) {
        console.log('focus unbind');
      },
    },
  },
};

export default {
  directives: {
    focus: {
      bind(el, binding) {
        if (binding.arg === 'input') {
          el.focus();
        }
      },
    },
  },
};

<template>
  <input v-focus.input="">
</template>

<button @click="handleClick">点击我</button>

export default {
  methods: {
    handleClick() {
      console.log('Button clicked');
    },
  },
};

<button @click.prevent="handleClick">阻止默认</button>

<input @keyup.enter="handleEnter" />

<button @click="count++">增加计数</button>

export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    incrementCount() {
      this.count++;
    },
  },
};

<button @click="incrementCount">增加计数</button>

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
};

<button @click="fullName = 'Jane Smith'">更改全名</button>

export default {
  data() {
    return {
      message: 'Hello',
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    },
  },
};

<button @click="message = 'Hello, Vue 3'">更改消息</button>

import mitt from 'mitt';
export const emitter = mitt();

this.emitter.emit('eventName', data);

this.emitter.on('eventName', this.handleEvent);

methods: {
  handleClick() {
    this.$emit('custom-event', '传递的数据');
  }
}

<child-component @custom-event="handleCustomEvent"></child-component>

<ul @click="handleClick">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

methods: {
  handleClick(event) {
    const target = event.target;
    if (target.tagName === 'LI') {
      // 处理点击事件
    }
  }
}

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input v-model="form.name" placeholder="Name">
      <input v-model="form.email" type="email" placeholder="Email">
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    submitForm() {
      // 处理表单提交逻辑
      console.log('Name:', this.form.name);
      console.log('Email:', this.form.email);
    }
  }
};
</script>

<template>
  <div>
    <input v-model="search" placeholder="Search">
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' },
        // 更多数据...
      ]
    };
  },
  computed: {
    filteredList() {
      return this.items.filter(item => item.name.includes(this.search));
    }
  }
};
</script>

<template>
  <div>
    <button @click="component = 'ChildA'">切换到ChildA</button>
    <button @click="component = 'ChildB'">切换到ChildB</button>
    <component :is="component"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      component: 'ChildA'
    };
  },
  components: {
    ChildA: { template: '<div>This is ChildA</div>' },
    ChildB: { template: '<div>This is ChildB</div>' }
  }
};
</script>

components: {
  ChildA: () => import('./ChildA.vue'),
  ChildB: () => import('./ChildB.vue')
}