【Vue】バージョン、Javascript、Typescript、Composition・Options別テンプレート

Vue2 (JavaScript, Options API)

<template>
</template>
<script>
import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      message: 'Hello Vue2!',
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    },
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
  created() {
    console.log('Vue2 Component Created');
  },
});
</script>
<style scoped></style>

Vue2 (TypeScript, Options API)

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      message: 'Hello Vue2 with TypeScript!',
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  watch: {
    count(newVal: number, oldVal: number) {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    },
  },
  computed: {
    doubleCount(): number {
      return this.count * 2;
    },
  },
  created() {
    console.log('Vue2 Component Created (TS)');
  },
});
</script>

<style scoped></style>

Vue3 (JavaScript, Composition API)

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue3!');
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    const doubleCount = computed(() => count.value * 2);

    watch(count, (newVal, oldVal) => {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    });

    onMounted(() => {
      console.log('Vue3 Component Mounted');
    });

    return {
      message,
      count,
      increment,
      doubleCount,
    };
  },
};
</script>
<style scoped>

Vue3 (TypeScript, Composition API)

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script lang="ts">
import { ref, computed, watch, onMounted } from 'vue';

export default {
  setup() {
    const message = ref<string>('Hello Vue3 with TypeScript!');
    const count = ref<number>(0);

    const increment = (): void => {
      count.value++;
    };

    const doubleCount = computed<number>(() => count.value * 2);

    watch(count, (newVal: number, oldVal: number) => {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    });

    onMounted((): void => {
      console.log('Vue3 Component Mounted (TS)');
    });

    return {
      message,
      count,
      increment,
      doubleCount,
    };
  },
};
</script>
<style scoped></style>

SFC(Single File Component)

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
    <p>Double Count (computed): {{ doubleCount }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';

const message = ref<string>('Hello Vue3 with TypeScript!');
const count = ref<number>(0);

const increment = (): void => {
  count.value++;
};

const doubleCount = computed<number>(() => count.value * 2);

watch(count, (newVal: number, oldVal: number) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`);
});

onMounted((): void => {
  console.log('Vue3 Component Mounted (TS)');
});
</script>
<style scoped></style>