Vue2実践ガイド

JavaScriptにおける「オブジェクト」の概念を理解することが重要です。多くの場面でオブジェクトが利用され、特にJSオブジェクトとJSON形式の関係性にも注意が必要です。コンポーネントは通常、JSオブジェクトとして定義されますが、データは関数内で定義されるため、完全な意味でのオブジェクトとは異なります。この点について、ES6の仕様を確認しましょう。

フォーマットの際にはタブとスペースを混在させないよう注意してください。同一行ではどちらか一方のみを使用することを推奨します。編集環境によってタブの表示が異なるため、4つのスペースを使用するのが一般的です。

  1. Vueの概要

プログレッシブ な JavaScript フレームワーク

  • プログレッシブ
  1. インターフェースの使いやすさ
  2. 高性能
  3. 高度な柔軟性：開発の自由度と多様性

プログレッシブなJavaScriptフレームワークとは、最小限のDOM操作、あるいはまったく操作を行わずに、データとビューのバインディング、双方向バインディング、MVVMパターンを簡単に実現できるという特徴を持ちます。

注意：今後の開発においては、jQueryフレームワークの導入を避けるべきです。

  1. Vueの入門

2.1 Vue.jsのダウンロード

<!-- 開発用バージョン（デバッグに役立つ警告メッセージ付き） -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生産用バージョン（サイズ最適化と高速化済み） -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 最初のVueアプリケーション

<div id="app">
    {{ msg }}  {{username}} {{pwd}}
    <br>
    <span>
        {{ username }}
        <h1>{{ msg }}</h1>
    </span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "百知へようこそ、あなたの参加を心待ちしています！",
            username: "Hello Vue!",
            pwd: "12345"
        }
    });
</script>

まとめ：

  1. Vueインスタンスのelプロパティは、Vueの作用範囲を指定するもの。この範囲内では、すべてのVueの記法が使用可能。
  2. dataプロパティは、インスタンスに紐づくデータを定義するもの。{{変数名}}でデータを取得可能。
  3. {{}}内では式や演算子、メソッド呼び出し、論理演算なども利用可能。
  4. elには任意のCSSセレクタ（jQueryスタイル）が使用可能だが、idセレクタの使用を推奨。

注：

  • Vue3では、Vue.createApp(オブジェクト).mount("#id")のようにファクトリーパターンを採用した新しいアプローチが導入されています。
  • Vue3ではdataは関数として定義し、その中でオブジェクトを返す形になります。
  • JavaScriptの特性上、data(){return{}}外に直接変数を追加してもthis.変数名でアクセス可能ですが、空の変数名を直接宣言することはできません。

3. v-text と v-html

3.1 v-text

v-textは、data内のデータをテキストとしてタグ内部にレンダリングするためのディレクティブ。JavaScriptのinnerTextに相当します。

<div id="app" class="aa">
    <span>{{ message }}</span>
    <span v-text="message"></span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: "百知へようこそ"
        }
    });
</script>

# まとめ
1. `{{}}`（インタポレーション）と`v-text`の主な違いは以下の通り：
   a. `v-text`はタグ内の既存内容を上書きするが、`{{}}`はそのまま保持する。
   b. `v-text`はネットワーク状態が悪い場合でも、データが読み込まれる前に表示される「フラッシュ」を回避できる。

3.2 v-html

v-htmlは、data内のデータに含まれるHTMLタグを解析してからタグ内部にレンダリングするためのディレクティブ。JavaScriptのinnerHTMLに相当します。

<div id="app" class="aa">
    <span>{{ message }}</span>
    <br>
    <span v-text="message"></span>
    <br>
    <span v-html="message">xxxxxx</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: "<a href=''>百知へようこそ</a>"
        }
    });
</script>

4. Vueでのイベントバインディング (v-on)

4.1 イベントバインディングの基本構文

<div id="app">
    <h2>{{ message }}</h2>
    <h2 v-text="message"></h2>
    <h2>年齢:{{ age }}</h2>
    <br>
    <input type="button" value="年齢を変更" v-on:click="changeage">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: "こんにちは、百知の講座へようこそ！",
            age: 23
        },
        methods: {
            changeage: function () {
                alert('クリックされました');
            }
        }
    });
</script>

# まとめ:
1. イベントは、イベントが発生する要素（イベントソース）、特定の動作（イベント）、およびその処理を行うリスナー（関数）から構成される。
2. Vueでは、`v-on`ディレクティブを使ってイベントをバインドする。例：`v-on:click`。
3. `v-on:イベント名`の値には、イベント発生時に呼び出される関数名を指定する。
4. すべてのイベントハンドラは、Vueインスタンスの`methods`プロパティに定義する。
5. イベント内で`this`は現在のVueインスタンスを指すため、`this`を使ってデータにアクセス可能。

4.2 イベントの簡略表記

<div id="app">
    <h2>{{ age }}</h2>
    <input type="button" value="年齢を+1" v-on:click="changeage">
    <input type="button" value="年齢を-1" @click="editage">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            age: 23
        },
        methods: {
            changeage: function () {
                this.age++;
            },
            editage: function () {
                this.age--;
            }
        }
    });
</script>

4.3 イベント関数の定義方法

<div id="app">
    <span>{{ count }}</span>
    <input type="button" value="countの値を変更" @click="changecount">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            count: 1
        },
        methods: {
            changecount() {
                this.count++;
            }
        }
    });
</script>

# まとめ:
1. イベント関数の定義には2種類の書き方がある。いずれも推奨される。
   - `関数名: function() {}`
   - `関数名() {}`

4.4 イベント引数の受け渡し

<div id="app">
    <span>{{ count }}</span>
    <input type="button" value="countを指定値に設定" @click="changecount(23, 'xiaohei')">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            count: 1
        },
        methods: {
            changecount(count, name) {
                this.count = count;
                alert(name);
            }
        }
    });
</script>

# まとめ:
1. イベント呼び出し時に引数を直接渡せる。イベント定義側では、対応するパラメータを受け取る。

5. v-show, v-if, v-bind

5.1 v-show

v-showは、タグの表示/非表示を制御するためのディレクティブ。内部的にはdisplayスタイルを操作する。

<div id="app">
    <h2 v-show="false">百知教育へようこそ！</h2>
    <h2 v-show="show">百知教育へようこそ！（真）</h2>
    <input type="button" value="表示・非表示切り替え" @click="showmsg">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            show: false
        },
        methods: {
            showmsg() {
                this.show = !this.show;
            }
        }
    });
</script>

# まとめ
1. `v-show`では、`true`/`false`のブール値または変数を使って表示/非表示を制御できる。
2. ブール式でもタグの表示・非表示を制御可能。

5.2 v-if

v-ifは、要素のレンダリング有無を制御する。内部的にDOM要素の削除/再生成を行う。

<div id="app">
    <h2 v-if="false">百知教育</h2>
    <h2 v-if="show">百知教育へようこそ</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            show: false
        }
    });
</script>

5.3 v-bind

v-bindは、タグ属性の動的バインディングを実現するためのディレクティブ。

<div id="app">
    ![](baizhilogo.jpg)
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "百知教育公式ロゴ！",
            showCss: true
        }
    });
</script>

5.4 v-bindの簡略表記

v-bind:属性名は:属性名と簡略化可能。

<div id="app">
    ![]()
    <input type="button" value="スタイルを切り替え" @click="addCss">
    <input type="button" value="画像を変更" @click="changeSrc">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "百知教育公式ロゴ！",
            showCss: true,
            src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583490365568&di=52a82bd614cd4030f97ada9441bb2d0e&imgtype=0&src=http%3A%2F%2Fimg.kanzhun.com%2Fimages%2Flogo%2F20160714%2F820a68f65b4e4a3634085055779c000c.jpg"
        },
        methods: {
            addCss() {
                this.showCss = !this.showCss;
            },
            changeSrc() {
                this.src = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1925088662,1336364220&fm=26&gp=0.jpg";
            }
        }
    });
</script>

6. v-forの使用

v-forは、オブジェクト（配列も含む）の反復処理に使用される。

<div id="app">
    <span>{{ user.name }} {{ user.age }}</span>
    <br>
    | index | key | value |  | {{ key }} |  |
|---|---|---|---|---|---|

    - {{ index }} {{ a }}

    - {{ index + 1 }} {{ user.name }} === {{ user.age }} ==== {{ user.content }}
</div>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            user: { age: 23, name: "小陳" },
            arr: ["北京校舎", "天津校舎", "河南校舎"],
            users: [
                { id: 2, name: "xiaochen", age: 23, content: "かつて純粋だった少年だった！" },
                { id: 1, name: "小白", age: 20, content: "かつて邪悪だった少年だった！" }
            ]
        }
    });
</script>

# まとめ
1. `:key`は、Vue内部の再利用と並べ替えのために必要な一意な識別子。
2. 括弧の有無は影響しない。

7. v-modelによる双方向バインディング

v-modelは、フォーム要素の値とVueインスタンスのdataを同期させるためのディレクティブ。双方向データバインディングを実現する。

v-bindは単方向バインディングのみ

<div id="app">
    <input type="text" v-model="message">
    <span>{{ message }}</span>
    <hr>
    <input type="button" value="dataの値を変更" @click="changeValue">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: ""
        },
        methods: {
            changeValue() {
                this.message = "百知教育！";
            }
        }
    });
</script>

# まとめ
1. `v-model`により双方向バインディングが可能。
2. 双方向バインディングとは、フォームの値の変更が`data`に反映され、逆に`data`の変更がフォームに反映されること。

8. イベント修飾子

修飾子は、イベントと組み合わせて使用され、イベントの発生条件や阻止機構を制御する。

# 代表的な修飾子
.stop
.prevent
.capture
.self
.once
.passive

8.1 .stop修飾子

イベントのバブルを防止する。

<div id="app">
    <div class="aa" @click="divClick">
        <input type="button" value="ボタン" @click.stop="btnClick">
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {
            btnClick() {
                alert('ボタンがクリックされました');
            },
            divClick() {
                alert('divがクリックされました');
            }
        }
    });
</script>

8.2 .prevent修飾子

リンクのデフォルト動作（遷移）を阻止する。

<a href="http://www.baizhibest.com/" @click.prevent="aClick">百知教育</a>

8.3 .self修飾子

自身のタグに対するイベントのみを発火させる。

<div class="aa" @click.self="divClick">
    <input type="button" value="ボタン" @click.stop="btnClick">
    <input type="button" value="ボタン1" @click="btnClick1">
</div>

8.4 .once修飾子

イベントを一度だけ発火させる。

<a href="http://www.baizhibest.com/" @click.prevent.once="aClick">百知教育</a>

9. キー修飾子

キー修飾子は、特定のキーボードイベントを制御するためのもの。

# キー修飾子
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

9.1 .enterキー

回車キー押下時にイベントを発火。

<input type="text" v-model="msg" @keyup.enter="keyups">

9.2 .tabキー

タブキー押下時にイベント発火。

<input type="text" @keyup.tab="keytabs">
  1. Vueライフサイクル

ライフサイクルフック（ライフサイクル関数）

Vueのライフサイクル中に発生する関数。

注：methodsの外に同レベルで定義する。methods内に記述しないこと。

ホットリロード時、一部のライフサイクル関数が実行されないことがある。

ライフサイクルの要約

  1. 初期化フェーズ
beforeCreate() {
    console.log("beforeCreate: " + this.msg);
},
created() {
    console.log("created: " + this.msg);
},
beforeMount() {
    console.log("beforeMount: " + document.getElementById("sp").innerText);
},
mounted() {
    console.log("mounted: " + document.getElementById("sp").innerText);
}
  1. 実行フェーズ
beforeUpdate() {
    console.log("beforeUpdate: " + this.msg);
    console.log("beforeUpdate: " + document.getElementById("sp").innerText);
},
updated() {
    console.log("updated: " + this.msg);
    console.log("updated: " + document.getElementById("sp").innerText);
}
  1. 破棄フェーズ

2.0版：3.0ではbeforeUnmount()とunmounted()に置き換えられた。

beforeDestroy() {
    // この時点では、すべてのデータやメソッド、コンポーネントはまだ破棄されていない。
},
destroyed() {
    // この時点で、Vueインスタンスは完全に破棄されている。
}

12. コンポーネント

12.1 コンポーネントの役割

コンポーネントは、コード量の削減と、ページ構造のモジュール化を目的とする。業務機能ごとに分割し、複数のコンポーネントで構成することで、管理性と保守性が向上する。

  • 単ファイルコンポーネント：1つのコンポーネント＝1つのテンプレート
  • 文字列テンプレート：テンプレートを文字列で定義

コンポーネントは、JSオブジェクトとして定義可能。

12.2 コンポーネントの使用

12.2.1 グローバルコンポーネントの登録

説明：コンポーネントをVueインスタンスに登録し、すべてのVueインスタンスで使用可能にする。

2つの引数：コンポーネント名、コンポーネント設定オブジェクト。

// グローバルコンポーネントの定義
Vue.component('login', {
    template: '<div><h1>ユーザー登録</h1></div>'
});

// 使用方法：`Vue`の作用範囲内で
<login></login>

# 注意：
1. `Vue.component`でグローバルコンポーネントを定義。
2. 使用時は、`Vue`の作用範囲内でコンポーネント名で呼び出す。
3. カメルケースで名前を付けた場合、`HTML`では`-`で区切って小文字に変換して使用（例：`<userLogin>` → `<user-login>`）。`HTML`は大文字小文字を区別しないため。
12.2.2 ローカルコンポーネントの登録

説明：コンポーネントを特定のVueインスタンスのcomponentsプロパティに登録。Vueインスタンス全体に影響を与えない。

  • 方法1：
// ローカルコンポーネントの定義
let login = {
    template: '<div><h2>ユーザー登録</h2></div>'
};

const app = new Vue({
    el: "#app",
    data: {},
    methods: {},
    components: {
        login: login
    }
});

// 使用
<login></login>
  • 方法2：
// 1. テンプレートの定義（外部）
<template id="loginTemplate">
    <h1>ユーザー登録</h1>
</template>

// 2. テンプレートオブジェクトの定義
let login = {
    template: '#loginTemplate'
};

// 3. コンポーネントの登録
const app = new Vue({
    el: "#app",
    data: {},
    methods: {},
    components: {
        login: login
    }
});

// 4. 使用
<login></login>

12.3 Propの使用

用途：コンポーネントに静的または動的なデータを渡すために使用。

12.3.1 静的データの伝達
// コンポーネントの定義
let login = {
    template: '<div><h1>こんにちは:{{ userName }} 年齢:{{ age }}</h1></div>',
    props: ['userName', 'age']
};

// コンポーネントの登録
const app = new Vue({
    el: "#app",
    data: {},
    methods: {},
    components: {
        login
    }
});

// 使用
<login user-name="小陳" age="23"></login>

# まとめ：
1. コンポーネントに複数の属性を設定してデータを渡せる。
2. `props`配列で受け取る属性名を定義し、`{{ 属性名 }}`で内部で参照可能。
12.3.2 動的データの伝達
// コンポーネントの定義
const login = {
    template: '<div><h2>こんにちは: {{ name }} 年齢:{{ age }}</h2></div>',
    props: ['name', 'age']
};

// 登録
const app = new Vue({
    el: "#app",
    data: {
        username: "小陳陳",
        age: 23
    },
    methods: {},
    components: {
        login
    }
});

// 使用
<login :name="username" :age="age"></login>
12.3.3 プロップの単方向データフロー

単方向データフロー：親から子へのみデータが流れ、逆は禁止。これにより、子コンポーネントが親の状態を誤って変更するのを防ぐ。

プロップが多数の場合、オブジェクトとしてまとめて渡すのが効果的。

12.4 コンポーネント内のデータ・イベント定義

1. コンポーネント内のデータ定義
const login = {
    template: '<div><h1>{{ msg }} 百知教育</h1>- {{ index }}{{ item }}</div>',
    data() {
        return {
            msg: "hello",
            lists: ['java', 'spring', 'springboot']
        };
    }
};
2. コンポーネント内のイベント定義
const login = {
    template: '<div><input type="button" value="クリック" @click="change"></div>',
    data() {
        return {
            name: '小陳'
        };
    },
    methods: {
        change() {
            alert(this.name);
            alert('イベントが発火しました');
        }
    }
};

# まとめ
1. コンポーネント内のイベント定義は、`Vue`本体と同様。`@イベント名=関数名`で記述。
2. `methods`でイベント関数を定義し、`this`はコンポーネントインスタンスを指す。

12.5 子コンポーネントにイベントを渡す

子コンポーネントでイベントを呼び出すには、this.$emit('イベント名')を使用。

const login = {
    template: "<div><h1>百知教育 {{ uname }}</h1><input type='button' value='クリック' @click='change'></div>",
    data() {
        return {
            uname: this.name
        };
    },
    props: ['name'],
    methods: {
        change() {
            this.$emit('find'); // 親から渡されたイベントを呼び出し
        }
    }
};

const app = new Vue({
    el: "#app",
    data: {
        username: "小陳"
    },
    methods: {
        findAll() {
            alert('Vueインスタンスのイベント');
        }
    },
    components: {
        login
    }
});

<login @find="findAll"></login>

要するに、子コンポーネントが何をトリガーするか（例：@click）を決定し、$emitでそのイベント名を変更して上位に伝える。親側は@イベント名で処理する。 単方向データフローのため、子コンポーネントは親の値を変更できない。しかし、子コンポーネントが何かをトリガーしたい場合（例：ボタン）にこの方法が有効。

13. ルーティング（VueRouter）

13.3 ルーティングの使用

  1. ルーティングの導入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  1. コンポーネントの定義
const login = {
    template: '<h1>ログイン</h1>'
};

const register = {
    template: '<h1>登録</h1>'
};
  1. ルートの定義
const router = new VueRouter({
    routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
    ]
});
  1. ルーターの登録
const app = new Vue({
    el: "#app",
    data: { username: "小陳" },
    router: router
});
  1. ルーターのコンポーネント表示
<router-view></router-view>
  1. ルートの切り替え
<a href="#/login">ログイン</a>
<a href="#/register">登録</a>

13.4 router-linkの使用

router-linkは、aタグを使ったルート切り替えを代替する。

<router-link to="/login" tag="button">ログイン</router-link>
<router-link to="/register" tag="button">登録</router-link>

# まとめ：
1. `router-link`は`a`タグの代わりに使用でき、`#`を手動で書く必要がない。
2. `to`属性にルートパス、`tag`属性でレンダリングするタグを指定。

13.5 デフォルトルート

初期画面にデフォルトのコンポーネントを表示する。

const router = new VueRouter({
    routes: [
        { path: '/', redirect: '/login' },
        { path: '/login', component: login },
        { path: '/register', component: register }
    ]
});

13.6 パラメータの渡し方

  • 方法1：クエリパラメータ
  1. ?形式でパラメータを付与
<router-link to="/login?id=21&name=zhangsan">ログイン</router-link>
  1. コンポーネントで取得
const login = {
    template: '<h1>ユーザー登録{{$route.query.name}}</h1>',
    created() {
        console.log(this.$route.query.id);
        console.log(this.$route.query.name);
    }
};
  • 方法2：リソース型パラメータ
  1. パスにパラメータを含める
<router-link to="/register/24/張三">登録</router-link>
var router = new VueRouter({
    routes: [
        { path: '/register/:id/:name', component: register }
    ]
});
  1. コンポーネントで取得
const register = {
    template: '<h1>ユーザー登録{{ $route.params.name }}</h1>',
    created() {
        console.log('ID:', this.$route.params.id);
        console.log('名前:', this.$route.params.name);
    }
};

13.7 インナールーティング

  1. 外部と内部ルートの定義
<template id="product">
    <div>
        <h1>商品管理</h1>
        <router-link to="/product/add">商品追加</router-link>
        <router-link to="/product/edit">商品編集</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
const product = { template: '#product' };
const add = { template: '<h4>商品追加</h4>' };
const edit = { template: '<h4>商品編集</h4>' };
</script>
  1. 嵌套ルーティングの定義
const router = new VueRouter({
    routes: [
        {
            path: '/product',
            component: product,
            children: [
                { path: 'add', component: add },
                { path: 'edit', component: edit }
            ]
        }
    ]
});
  1. ルーターの登録
const app = new Vue({
    el: "#app",
    router
});
  1. テスト
<router-link to="/product">商品管理</router-link>
<router-view></router-view>
  1. Vue CLI スキャフォールド

14.1 CLIとは？

コマンドラインインターフェース（CLI）は、グラフィカルユーザーインターフェース（GUI）普及以前に広く使われていたユーザーインターフェース。マウスではなく、キーボードで命令を入力し、システムがそれを実行する。

14.2 @vue/cliとは？

Vue CLIは、Vue.jsで迅速に開発を行うための包括的なシステム。Vueスキャフォールドを使うことで、完全なプロジェクト構造が得られる。

旧バージョン：vue-cli、新バージョン：@vue/cli

14.3 Vue CLIの利点

  • vue-cliでインタラクティブなプロジェクトスキャフォールドを作成可能。
  • @vue/cli + @vue/cli-service-globalでゼロ構成のプロトタイプ開発が可能。
  • @vue/cli-service（実行時依存）：
  • シンプルなアップデート（1コマンド）
  • Webpackベースのビルド、合理的なデフォルト設定
  • 設定ファイルによるカスタマイズ
  • プラグインによる拡張（例：ElementUI）
  • 公式プラグイン集合が、フロントエンドエコシステムの最高のツールを統合。
  • グラフィカルなインターフェースで、Vueプロジェクトの作成・管理が可能。

14.4 Vue CLIのインストール

1. 環境準備
1.1 Node.jsのダウンロード
http://nodejs.cn/download/
1.2 Node.jsの環境変数設定
Windows:
    環境変数に以下を追加：
    NODE_HOME = ノードのインストールパス
    PATH = ...;%NODE_HOME%

macOS:
    `.pkg`インストーラーで自動設定を推奨。
1.3 Node.jsの確認
node -v
1.4 npmについて
Node Package Manager。前端のパッケージ管理ツール。npmはアリババのタオバオミラーを利用可能。
1.5 タオバオミラーの設定
npm config set registry https://registry.npm.taobao.org
npm config get registry
1.6 依存パッケージの保存先設定
Windows:
    npm config set cache "D:\nodereps\npm-cache"
    npm config set prefix "D:\nodereps\npm_global"

macOS:
    npm config set cache "/Users/chenyannan/dev/nodereps"
    npm config set prefix "/Users/chenyannan/dev/nodereps"
1.7 環境設定の確認
npm config ls
2. スキャフォールドのインストール
# 1. 既存のスキャフォールドをアンインストール
npm uninstall -g @vue/cli
npm uninstall -g vue-cli

# 2. オフィシャルサイト
https://cli.vuejs.org/zh/guide/

# 3. インストール
npm install -g @vue/cli
3. 最初のプロジェクト
# 1. プロジェクト作成
vue create 项目名
→ 「Manually select features」を選択

# 2. フォルダ構造
- build              # ビルド用
- config             # 設定
- node_modules       # 依存パッケージ
- src                # ソースコード
    + assets         # 静的リソース
    + components     # コンポーネント
    + router         # ルーティング
    + App.vue        # ルートコンポーネント
    + main.js        # エントリポイント
- static             # その他静的ファイル
- .babelrc           # ES6→ES5変換
- .editorconfig      # エディタ設定
- .gitignore         # Git除外
- .postcssrc.js      # ソースコード
- index.html         # ホームページ
- package.json       # 依存管理（POMに似ている）
- package-lock.json  # ロックファイル
- README.md          # プロジェクト説明

main.jsでApp.vueをエントリとして設定し、App.vue内のrouter-viewはHelloWorld.vueを表示するように設定可能。

index.jsでRouterオブジェクトを返し、routesを設定。

# 3. 実行
npm start
npm run dev （2.0）
npm run serve （3.0）

# 4. アクセス
サーバー起動後、表示されるポート番号にアクセス（例：8080）

# 5. 開発方法
- すべてがコンポーネントで構成される。
- 1つのコンポーネント = 1つの機能モジュール。
- `.vue`ファイルに記述し、ビルド時に`HTML`に変換される。

<template>
  <div id="app">
    <router-view />
  </div>
</template>

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

<style scoped>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

子コンポーネントは、import後にcomponentsで登録。

15.2 ルートの監視

watch: {
    $route: {
        handler(val, oldVal) {
            console.log(val);
            if (val.path === '/user') {
                this.findAll();
            }
        },
        deep: true
    }
}

15.3 ルート間パラメータ

クエリ方式：

this.$route.query.paramname

リソース方式：

this.$route.params.id

created内で取得。

15.4 ルートフック

beforeRouteUpdate：現在のコンポーネントのルート更新時に実行。

子コンポーネントから親にイベントを送信する場合も利用可能。

beforeRouteUpdate(to, from, next) {
    alert('再検索');
    next(); // 放行
}

16. ビルドとデプロイ

# 1. ビルド
npm run build

# 2. ビルド後の変化
- `dist`フォルダが生成される。これはプロダクション環境用の公開ディレクトリ。

# 3. デプロイ
- `dist`をSpring Bootの`static`フォルダにコピー。
- リソースパスを調整し、コンテキストパスを変更。
  1. Vuex 状態管理
  1. ストアの状態は直接変更できない。変更はミューテーションのコミットを通じてのみ行う。これにより、状態の変化を追跡し、ツールで可視化可能になる。

これまでのコンポーネント間のデータは単方向伝達だったが、Vuexでは状態をグローバルに管理。

17.1 簡介・インストール・使用（state）

グローバルな状態管理。

  1. npm install vuex --save
  2. srcにstoreフォルダを作成し、index.jsを配置。
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        counter: 0
    },
    mutations: {
        incrCounter(state) {
            state.counter++
        }
    },
    getters: {
        doubleCounter(state) {
            return state.counter * 2
        }
    }
})

export default store
  1. main.jsにインポート
import store from './store'
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  store
})
  1. 使用
this.$store.state.counter
mutations
mutations: {
    incrCounter(state, n) {
        state.counter += n
    }
}

他のコンポーネントで：

this.$store.commit('incrCounter', 5)
getters
getters: {
    doubleCounter(state) {
        return state.counter * 2
    }
}

タグ: Vue Vue2 javascript MVVM Component

10月18日 02:33 投稿

ホットタグ

©2026 異端開発室