Vue.jsとは
Vue.jsは、ウェブページに動きを加えるためのJavaScriptフレームワークです。
軽量で高速且つ、書き方がシンプルです。小さな部品（コンポーネント）で画面を構築可能です。
公式ページ
使い方
1. CDNによる簡易利用（学習・お試し向け）
CDN（Content Delivery Network）を使ってHTMLファイルから直接読み込むことで、すぐに使い始めることができます。
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<!-- CDNからVue.jsを読み込む -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
// アプリケーションの作成とマウント
const { createApp } = Vue;
createApp({
data() {
return {
message: 'こんにちは、Vue.js！'
};
}
}).mount('#app');
</script>
</body>
</html>
2. ViteやVue CLIによる本格的な開発
npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev
※ npmのインストールが必要
基本的な構成
data()
アプリケーションで使用するデータ（状態）を定義する場所
data() {
return {
message: 'Hello World!!'
}
}
{{ }}
data() で定義したデータを HTML に表示
<h1>{{ message }}</h1>
属性バインディング
HTML 属性にデータを動的に挿入するには、v-bind を使用
<img v-bind:src="imageUrl" alt="画像" />
<!-- 省略する場合 -->
<img :src="imageUrl" alt="画像" />
メソッド
イベントに応じて呼び出される関数群を定義
methods: {
greet() {
alert('こんにちは！');
}
}
イベントバインディング
イベントを Vue のメソッドに結びつける
<button v-on:click="greet">あいさつする</button>
<!-- こちらも同じ -->
<button @click="greet">あいさつする</button>
条件分岐
要素の表示・非表示を制御
v-if / v-else-if / v-else
<p v-if="isLoggedIn">ようこそ！</p>
<p v-else>ログインしてください。</p>
data() {
return {
isLoggedIn: true
}
}
繰り返し
v-for
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
data() {
return {
items: ['リンゴ', 'バナナ', 'ぶどう']
}
}
フォームバインディング
v-model
<input v-model="name" placeholder="名前を入力" />
<p>こんにちは、{{ name }}さん！</p>
data() {
return {
name: ''
}
}