Vue.jsの基本構文からコンポーネントの使い方まで解説

<script setup>
import { ref } from "vue";

// Vue インスタンスが管理するデータ
const message = ref("こんにちは、Vue.js！");
</script>

<template>
  <div id="app">
    <!-- テンプレートで data の message を表示 -->
    <p>{{ message }}</p>
  </div>
</template>

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

// Vue インスタンスを作成し、#app に適用
createApp(App).mount("#app");

<script setup>
  import { ref } from "vue";
  
  const message = ref("こんにちは、Vue.js！");
<script>

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

// データをリアクティブに管理
const message = ref("Vue.js のデータバインディング！");
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="message = '変更されました！'">変更</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const message = ref("Vue.js のデータバインディング！");
</script>

<template>
  <div>
    <img :src="imageSrc" alt="サンプル画像">
  </div>
</template>

<script setup>
import { ref } from "vue";

const imageSrc = ref("https://example.com/sample.jpg");
</script>

<p v-if="isVisible">このメッセージは isVisible が true のとき表示されます。</p>

<template>
  <div>
    <button @click="showMessage = !showMessage">切り替え</button>
    <p v-if="showMessage">こんにちは！</p>
    <p v-else>さようなら！</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

const showMessage = ref(true);
</script>

<p v-show="showMessage">このメッセージは v-show を使っています。</p>

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ index + 1 }}: {{ item }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";

const items = ref(["りんご", "バナナ", "ぶどう"]);
</script>

<template>
  <div>
    <input v-model="name" placeholder="名前を入力">
    <p>こんにちは、{{ name }} さん！</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

const name = ref("");
</script>

<template>
  <div>
    <label>
      <input type="checkbox" v-model="checked"> チェックする
    </label>
    <p>チェック状態: {{ checked }}</p>

    <label>
      <input type="radio" v-model="gender" value="male"> 男性
    </label>
    <label>
      <input type="radio" v-model="gender" value="female"> 女性
    </label>
    <p>選択した性別: {{ gender }}</p>

    <select v-model="fruit">
      <option value="apple">りんご</option>
      <option value="banana">バナナ</option>
      <option value="grape">ぶどう</option>
    </select>
    <p>選択した果物: {{ fruit }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

const checked = ref(false);
const gender = ref("");
const fruit = ref("apple");
</script>

<template>
  <div>
    <button @click="count++">クリック回数: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const count = ref(0);
</script>

<template>
  <div>
    <button @click="increment">増やす</button>
    <p>カウント: {{ count }}</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

const count = ref(0);

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

<template>
  <div>
    <p>カウント: {{ count }}</p>
    <button @click="increment">増やす</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

// カウントのデータ
const count = ref(0);

// メソッドの定義
const increment = () => {
  count.value++;
};
</script>

<template>
  <div>
    <p>カウント: {{ count }}</p>
    <button @click="increment(2)">+2</button>
    <button @click="increment(5)">+5</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const count = ref(0);

// メソッドに引数を渡す
const increment = (value) => {
  count.value += value;
};
</script>

<template>
  <div>
    <input v-model="message" placeholder="入力してください">
    <p>文字数: {{ charCount }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const message = ref("");

// 算出プロパティ（computed）
const charCount = computed(() => {
  return message.value.length;
});
</script>

const charCount = () => {
  return message.value.length;
};

<template>
  <div>
    <input v-model="message" placeholder="入力してください">
    <p>入力内容: {{ message }}</p>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";

const message = ref("");

// watch でデータの変化を監視
watch(message, (newValue, oldValue) => {
  console.log(`変更前: ${oldValue}, 変更後: ${newValue}`);
});
</script>

<template>
  <div>
    <input v-model="query" placeholder="検索ワードを入力">
    <p>検索結果: {{ result }}</p>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";

const query = ref("");
const result = ref("");

// データの変更を監視
watch(query, async (newQuery) => {
  if (newQuery.length > 2) {
    result.value = `「${newQuery}」の検索結果`;
  } else {
    result.value = "";
  }
});
</script>

<template>
  <button class="my-button">クリック</button>
</template>

<style>
.my-button {
  background-color: blue;
  color: white;
  padding: 10px;
}
</style>

<template>
  <div id="app">
    <my-button></my-button>
  </div>
</template>

<script>
import { createApp } from "vue";

const app = createApp({
  template: "<my-button></my-button>",
});

// コンポーネントを登録
app.component("my-button", {
  template: `<button>クリック</button>`,
});

app.mount("#app");
</script>

src/
 ├── components/
 │   ├── MyButton.vue
 ├── App.vue
 ├── main.js

<template>
  <button>クリック</button>
</template>

<template>
  <div>
    <MyButton />
  </div>
</template>

<script setup>
import MyButton from "./components/MyButton.vue";
</script>

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script setup>
import ChildComponent from "./ChildComponent.vue";
</script>

<template>
  <div>
    <MessageDisplay message="こんにちは！" />
  </div>
</template>

<script setup>
import MessageDisplay from "./components/MessageDisplay.vue";
</script>

<template>
  <p>{{ message }}</p>
</template>

<script setup>
import { defineProps } from "vue";

// 親コンポーネントから受け取る props を定義
defineProps({
  message: String,
});
</script>

<script setup>
import { defineProps } from "vue";

defineProps({
  message: {
    type: String,
    default: "デフォルトのメッセージ",
  },
});
</script>

<script setup>
defineProps(["message"]);

// NG: props の値を直接変更しようとするとエラー
message = "変更したい";
</script>

<template>
  <input v-model="newMessage" />
  <button @click="updateMessage">変更</button>
</template>

<script setup>
import { defineProps, defineEmits, ref } from "vue";

const props = defineProps(["message"]); // 親から受け取る
const emit = defineEmits(["update"]);   // 親へイベントを送る準備
const newMessage = ref(props.message);  // ローカルのリアクティブデータとしてコピー

const updateMessage = () => {
  emit("update", newMessage.value); // 親に新しいメッセージを送信
};
</script>

<template>
  <ChildComponent :message="message" @update="handleUpdate" />
  <p>現在のメッセージ: {{ message }}</p>
</template>

<script setup>
import { ref } from "vue";
import ChildComponent from "./ChildComponent.vue"; // 子コンポーネントをインポート

const message = ref("初期メッセージ");

const handleUpdate = (newMessage) => {
  message.value = newMessage; // 子から受け取った値で更新
};
</script>

<template>
  <p>現在のカウント: {{ count }}</p>
</template>

<script setup>
import { ref } from "vue";

const count = ref(0);

// カウントを増やすメソッド
const increment = () => {
  count.value++;
};

// メソッドを外部からアクセス可能にする
defineExpose({ increment });
</script>

<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="increaseChildCount">子のカウントを増やす</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import ChildComponent from "./ChildComponent.vue";

const child = ref(null);

// 子コンポーネントのメソッドを実行
const increaseChildCount = () => {
  child.value.increment();
};
</script>

<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

<style>
.card {
  border: 1px solid gray;
  padding: 20px;
  margin: 10px;
}
</style>

<template>
  <Card>
    <h2>タイトル</h2>
    <p>スロットを使った動的な内容</p>
  </Card>
</template>

<script setup>
import Card from "./Card.vue";
</script>

<template>
  <div class="card">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
  </div>
</template>

<template>
  <Card>
    <template #header>
      <h2>カードのタイトル</h2>
    </template>
    <p>本文の内容</p>
  </Card>
</template>

<template>
  <ul>
    <slot v-for="item in items" :item="item"></slot>
  </ul>
</template>

<script setup>
defineProps(["items"]);
</script>

<template>
  <List :items="['りんご', 'バナナ', 'ぶどう']">
    <template #default="{ item }">
      <li>{{ item }}</li>
    </template>
  </List>
</template>