Vue の詳細な入門ノート

1. はじめに

最近、いくつかのチュートリアルを見つけて、公式サイトを閲覧して、Vue のコンテンツ、いくつかの入門概念、基本的な構文、およびよく使用される操作をいくつか見てみました。ざっと見たところ、テキスト全体といくつかのコードは 9,000 語以上あります。入門構文はそれでも理解しやすいです。以前に小さなプログラムを作成するための一定の基礎があり、非常に似ていると感じています。ただし、スロットや計算プロパティなど、少し複雑な点については、概要が十分に詳細ではないと感じています。私は日常生活でフロントエンドのものをあまり読んでいません。学習プロセス中にメモを整理して、皆さんと共有します。皆様の意見交換を歓迎します〜

2. 初期ビュー

(I) Vueの概念を理解する

(1) Vue.jsとは何か

Vue (発音は /vjuː/、view に似ています) は、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の大規模なフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。 Vue のコアライブラリはビューレイヤーのみに焦点を当てているため、使い始めるのが簡単なだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。

（２）プログレッシブフレームワークとは何か？

いくつかのチュートリアルや記事を読んだ後、プログレッシブフレームワークを簡単に理解するには、「強制されない」という 3 つの言葉が必要です。Vue では、すべてのコンテンツ (機能的特徴) の使用を強制しません。ユーザーは自分の状況に応じて選択し、その一部を使用することができます。

このトピックにはもっと良い答えがあります。Baidu で簡単に見つかります。その一部を投稿しました。

Vueは少ないことを意味します。つまり、元のシステムにVueを導入し、それを直接jQueryとして使用することができます。Vueを使用すると、元の大規模なシステムに1つまたは2つのコンポーネントを実装してjQueryとして使用できます。また、ファミリーバケット開発全体に使用することもできます。

(II) MVVMアーキテクチャ

Vue を正式に学ぶ前に、まずフロントエンドベースのアーキテクチャモデル、つまり MVVM (Model-View-ViewMode の略) を理解する必要があります。その関係は簡単に説明すると次のようになります。

モデル: JavaScriptデータオブジェクトを表す

ビュー（ビューレイヤー）：DOMを表します。これは、フロントエンドに表示されるコンテンツとも簡単に理解できます。

ViewModel: ビューとデータを接続します。つまり、データとページを双方向にバインドするために使用されます。

MVVM アーキテクチャでは、ビューとデータが直接通信する方法はありません。唯一の方法は、ViewModel を中間関係として使用することです。ViewModel は、データの変更を監視してビューのコンテンツを更新したり、ビューの変更を監視してデータに変更を通知したりできます。

後ほどちょっとした入門事例も書きますので、一緒にその特徴を体感してください！

(III) Vueの利点

1. 小さいサイズ

圧縮後33K

2. 運用効率の向上

仮想DOMをベースに、JavaScriptを通じて事前にさまざまな計算を行い、最終的なDOM操作を計算して最適化できる技術です。このDOM操作は前処理操作であり、実際にDOMを操作するわけではないため、仮想DOMと呼ばれます。

3. 双方向データバインディング

開発者はDOMオブジェクトを操作する必要がなくなり、ビジネスロジックに集中できるようになります。

4. 豊かな生態系と低い学習コスト

市場には、成熟した安定した vue.js ベースの UI フレームワークと一般的なコンポーネントが多数存在します。すぐに使える、開発が速い、初心者に優しい、始めやすい、学習教材が豊富

（IV）エントリーケース

Vue を書くには、Vscode、HBuilder、sublime、Webstrom、または IDEA を使用できます。選択するだけです。

まず、Vue をインポートする必要があります。公式サイトにアクセスしてファイルを直接ダウンロードし、jQuery をインポートするのと同様にローカルインポートを行うか、ネットワーク参照を使用することができます。たとえば、次の図では、公式サイトでインポートまたはダウンロードアドレスを見つけることができます。

ご覧のとおり、導入後、new の形式で Vue インスタンスを作成し、その中で el を使用して hello の id 値を持つ div を見つけてバインディングし、data に値を割り当て、2 組の中括弧を使用して div のデータをエコーします。

WeChat アプレットについて基本的な知識があれば、実際には 2 つのアプレットの構造が多少似ていることに気付くでしょう。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
</head>
<本文>

<div id="hello">
  <h2>{{コンテンツ}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<スクリプト>
  var vm = 新しい Vue({
      el: "#こんにちは",
      データ：{
        内容: 「Hello Vue!」
      }
  })
</スクリプト>

</本文>
</html>

エコーデータに問題はありません。コンソールでコンテンツの値を変更してみると、ページがそれに応じて変更されていることがわかります。

最初の Vue アプリケーションを正常に作成できました。これは文字列テンプレートのレンダリングと非常によく似ていますが、Vue は舞台裏で多くの作業を行っています。データと DOM が接続されたので、すべてがレスポンシブになります。どうやって確認するのでしょうか?ブラウザの JavaScript コンソールを開き (このページで開きます)、 app.messageの値を変更します。それに応じて上記の例が更新されます。

HTML と直接やり取りしなくなったことに注意してください。 Vue アプリはそれを DOM 要素 (この場合は#app ) にマウントし、完全に制御できます。この HTML はエントリポイントですが、残りは新しく作成された Vue インスタンス内で実行されます。 —— Vue公式サイト

3. Vueの基本構文

（I）宣言的表現

Thymeleaf のようなテンプレートを見たことがあれば、上記の Vue の例では簡潔なテンプレート構文、つまり 2 組の中括弧で値を囲み、宣言的にデータを DOM システムにレンダリングしていることがわかります。これは実際には、Thymeleaf の $ と中括弧のセットに似ています。

要素をバインドする方法もあります。命令を使用する

<div id="hello-2">
  <span v-bind:title="コンテンツ">
    マウスを数秒間ホバーすると、ここで動的バインディングのプロンプト情報が表示されます。
  </span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<スクリプト>
  var vm = 新しい Vue({
      el: "#hello-2",
      データ：{
        コンテンツ: 'ページが読み込まれた時刻' + 新しい Date().toLocaleString()
      }
  })
</スクリプト>

結果を確認してください。テキストの上にマウスを移動すると、バインドされたデータが表示されます。

先ほど見た v-bind 属性はディレクティブと呼ばれます。命令の先頭に v- が付いており、Vue によって提供される特別な属性であることを示しています。このコードは、この要素ノードの title 属性を Vue インスタンスの content プロパティと一致させることを意味します。

コンソールでvm.contentの値を変更しても、バインドされたデータは変更されます。

注: v-bindを使用するには、ヘッダーに制約を導入する必要があります。

<html lang="ja" xmlns:v-bind="http://www.w3.org/1999/xhtml">

IDEAを使用してVue.jsプラグインをインストールすると、完了を求めるプロンプトが表示されます。

（II）条件付き判断

条件判断に使用される命令はv-if、v-else-if、v-elseである。

2つの例を見てみましょう。1つ目は真偽の判断です。

<div id="hello-3">
  <h2 v-if="isBoy">男の子です</h2>
  <h2 v-else>女の子です</h2>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<スクリプト>
  var vm = 新しい Vue({
      el: "#hello-3",
      データ：{
        isBoy: 真
      }
  })
</スクリプト>

デフォルトの表示はboyですが、コンソールでfalseに変更します。

次は値の判断です。成績を比較する小さな例を見てみましょう。ただし、値の制約は十分に厳密ではありません。ifの例を説明するには、意味を理解するだけで十分です。

<div id="hello-3">
  <h2 v-if="スコア < '60'">不合格</h2>
  <h2 v-else-if="スコア >= '60' && スコア < '80'">合格</h2>
  <h2 v-else>優秀な成績</h2>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<スクリプト>
  var vm = 新しい Vue({
      el: "#hello-3",
      データ：{
          スコア: 66
      }
  })
</スクリプト>

結果を修正し続ける

（III）サイクル

v-for を使用してデータをループすることができます。たとえば、Java の拡張 for はコロンを in に置き換えるだけです。students は data 内の配列名に対応し、student はその中の各項目を表します。特定の属性値は XXX.xx の形式で取り出されます。

<div id="hello-4">
  <li v-for="学生の中の学生">
    {{学生名}}
  </li>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<スクリプト>
    var vm = 新しい Vue({
        el: "#hello-4",
        データ： {
            生徒: [{name: '张三'}, {name: '李四'}, {name: '王五'}]
        }
    })
</スクリプト>

コンソールで新しいものをプッシュしてみると、それも更新されます。

注: これは最も基本的なケースです。多くの場合、走査された配列にオブジェクトが含まれており、そのオブジェクトに ID などの複数の値がある場合、一意の ID 値がキー値として使用されます。次に例を示します。

<div v-for="item in items" v-bind:key="item.id">
  <!-- 目次 -->
</div>

Vue にヒントを与えて各ノードの ID を追跡し、既存の要素を再利用して並べ替えることができるようにするには、各項目に一意のキー属性を提供する必要があります。

走査される DOM コンテンツが非常に単純な場合、またはパフォーマンスの向上を得るために意図的にデフォルトの動作に依存している場合を除き、v-for を使用するときは可能な限りキー属性を指定することをお勧めします。

(IV) イベントバインディング

多くの場合、ユーザーがボタンやラベルコンポーネントをクリックしてアプリケーションを操作できるようにする必要があります。つまり、イベントをバインドする必要があります。Vue では、これを行うために v-on ディレクティブを使用してイベントリスナーを追加できます。

注: 制約を導入するにはv-onを使用します

<html lang="ja" xmlns:v-on="http://www.w3.org/1999/xhtml">

サンプルコード

<div id="hello-5">
  <button v-on:click="helloWorld">こんにちは世界</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<スクリプト>
    var vm = 新しい Vue({
        el: "#hello-5",
        データ： {
            内容:「Hello World!」
        },
        メソッド: {
            helloWorld: 関数() {
                アラート(this.content);
            }
        }
    })
</スクリプト>

ご覧のとおり、helloWorld イベントは v-on:click によってバインドされており、イベントの特定のロジックは Vue オブジェクトのメソッドで定義する必要があります。

(V) 双方向バインディング

MVVM アーキテクチャパターンが最初に導入されたときから、図には View と ViewModel 間の双方向バインディングが言及されていました。簡単に言えば、データが変更されるとビューも変更され、ビューが変更されるとデータも変更されます。

実際、前の基本構文では、文の前半、つまりデータ内のデータを変更することでビューに変更が生じることは明確に理解できました。ここでは、文の後半に焦点を当てます。

まず、Vue は v-model ディレクティブを提供します。これにより、フォーム入力とアプリケーション状態間の双方向バインディングを簡単に実装できます。

いくつかの一般的なフォームでは、v-model ディレクティブを使用して、フォームの入力、textarea>、select などでデータの双方向バインディングを実行できます。コントロールの種類に応じて、要素を更新するための適切な方法を選択できます。

ただし、v-model ディレクティブを使用した後は、フォームの元の値、チェック済み、選択済みなどは無視され、Vue インスタンス内のデータが常にデータソースとして使用されます。

入力欄にテキストを入力してください

<div id="hello-6">
  入力: <input type="text" v-model="content"> 出力: {{content}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<スクリプト>
    var vm = 新しい Vue({
        el: "#hello-6",
        データ： {
            内容:「Hello World!」
        },
    })
</スクリプト>

すでに 2 組の中括弧を使用して、出力位置のコンテンツの値をエコーすることができました。input 属性で v-model を使用してコンテンツにバインドすることで、入力ボックスに入力された値がデータ内のコンテンツの値に直接影響を与えることができます。つまり、入力ボックスに入力された値が変更されると、出力位置のコンテンツも変更されます。

入力時にラジオボタン

<div id="hello-6">
  性別：
  <input type="radio" name="gender" value="男" v-model="gender">男<input type="radio" name="gender" value="女" v-model="gender">女出力: {{gender}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<スクリプト>
    var vm = 新しい Vue({
        el: "#hello-6",
        データ： {
            性別: '男性'
        },
    })
</スクリプト>

エフェクト表示

選択中

<div id="hello-6">
  <v-model を選択>
    <option value="" disabled>---選択してください---</option>
    <option>A-Apple</option>
    <option>B-チェリー</option>
    <option>C-スイカ</option>
  </選択>
  出力: {{choose}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<スクリプト>
    var vm = 新しい Vue({
        el: "#hello-6",
        データ： {
            選ぶ： ''
        },
    })
</スクリプト>

(VI) Vueコンポーネント

コンポーネントも Vue では非常に重要な概念です。たとえば、ページ内のヘッダー、フッター、サイドバー、メインコンテンツ領域はすべてコンポーネントと見なすことができます。ただし、ヘッダーなどの一部のコンポーネントは固定されており、コンテンツ領域などの一部のコンポーネントは可変です。

Vue を使用すると、小さく独立した、多くの場合再利用可能なコンポーネントを使用して大規模なアプリケーションを構築できます。

注: 実際には、.vue テンプレートファイルを作成しており、ページ上で直接記述するこの形式は使用しません。これは説明の便宜上のためだけです。

単純だが比較的完全なケースを取り上げ、説明してみましょう。

まず、最終的に何をしたいのかについて話しましょう。たとえば、div や input はすべてタグです。今やりたいのは、カスタムコンポーネントテンプレートを作成して、このようなタグをカスタマイズすることです。必要な場所でこのタグを参照するだけで、テンプレートで目的の効果を実現し、抽出と再利用の効果を実現できます。

まず、Vue.component.... の形式を使用してコンポーネントを作成します。ここで、ideal-20 はコンポーネントタグの名前、template はテンプレートのコンテンツ、props は参照時に渡すパラメーター名を表します。

次に、hello-7 にバインドされている div にカスタムコンポーネントタグ ideal-20 を導入します。データ内の fruit 配列をトラバースしたいので、ideal-20 属性で for トラバースを実行できます。同時に、v-bind:ideal="item" を通じて各項目をコンポーネントテンプレートにバインドする必要があります。配列は通常の配列ではないため、キー値として id を割り当てます。

<div id="hello-7">
  <ideal-20 v-for="果物のアイテム" v-bind:ideal="item" v-bind:key="item.id"></ideal-20>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<スクリプト>
    // todo-item という名前の新しいコンポーネントを定義します Vue.component('ideal-20', {
        小道具: ['理想的'],
        テンプレート: '<li>{{ideal.name}}</li>'
    })
    var vm = 新しい Vue({
        el: "#hello-7",
        データ： {
            果物：
                {id: 0、名前: 'Apple'},
                {id: 1、名前: 'チェリー'},
                {id: 2、名前: 'マンゴスチン'}
            ]
        }
    })
</スクリプト>

エフェクト表示

(VII) Axiosを使い始める

まず、なぜこれを使う必要があるのかを説明する必要があります。

従来の開発では、通信には通常 Ajax を使用します。ただし、ビュー層フレームワークである Vue.js は Ajax 通信機能をサポートしていないため、Axios を使用して Ajax 非同期通信を実装できます。

まず、その機能を見てみましょう。

ブラウザから XMLHttpRequests を実行する
node.js から http リクエストを送信する
Promise APIのサポート
リクエストとレスポンスの傍受
リクエストとレスポンスのデータを変換する
リクエストをキャンセル
JSONデータを自動的に変換する
XSRF 保護のクライアント側サポート

まず、データをシミュレートするためにJSONの一部を取得します

{
  "名前": "BWH_Steven",
  "ブログ": "www.ideal-20.cn",
  "について"： {
    "国": "中国",
    「電話番号」: 「13888888888」
  },
  「学生」: [
    {
      "id": 0,
      "名前": "張三"
    },
    {
      "id": 1,
      "名前": "李思"
    },
    {
      "id": 2,
      "名前": "王武"
    }
  ]
}

次の図から、コードをmounted()に書き込むことができることがわかります。

次に使用するコードです

まず、Vue の導入に加えて、Axios の CDN も導入する必要があります。mounted() メソッドでは、この json ファイルを取得し、取得した値である response.data を data() で定義した info に代入します。

注意: data と data() は異なります

次に、バインドされたhello-8 divでエコーを呼び出すことができます。

説明: v-clock にスタイルが追加されたのはなぜですか? これは、データを表示するプロセスが、まず {{info.name}} という単語を表示し、値を取得してからレンダリングするためです。ネットワーク速度が遅い場合は、info.name しか表示されず、エクスペリエンスはあまり良くありません。

<!DOCTYPE html>
<html lang="ja" xmlns:v-on="http://www.w3.org/1999/xhtml">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <スタイル>
    [v-クロック] {
      表示: なし;
    }
  </スタイル>
</head>
<本文>
<div id="hello-8" v-クロック>
  <div>{{情報名}}</div>
  <div>{{info.blog}}</div>
  <div>{{国に関する情報}}</div>
  <div>{{電話番号について}}</div>
  <div>{{info.students[0].name}}</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<スクリプト>

    var vm = 新しい Vue({
        el: "#hello-8",
        データ（） {
            戻る {
                情報： {}
            }
        },
        マウント() {
            axios.get("../json/data.json").then(応答 => (this.info = response.data));
        }
    })
</スクリプト>

</本文>
</html>

(VIII) 計算されたプロパティ

この段落については公式ドキュメントでかなり明確に説明されていると思います。

テンプレート内の式は非常に便利ですが、主に単純な計算用に設計されています。テンプレートにロジックを詰め込みすぎると、煩雑になり、メンテナンスが困難になる可能性があります。例えば：

<div id="例">
  {{ message.split('').reverse().join('') }}
</div>

この時点で、テンプレートは単なる宣言型ロジックではなくなります。ここで必要なのは、変数messageの逆文字列を表示することであると気づくには、しばらくそれを見る必要があります。テンプレートに反転した文字列をさらに含める場合、処理がさらに難しくなります。

したがって、複雑なロジックの場合は、計算プロパティを使用する必要があります。

<div id="hello-9">
  <p>元のデータ: "{{ message }}"</p>
  <p>逆データ: "{{reverseMessage}}"</p>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<スクリプト>
    var vm = 新しい Vue({
        el: '#hello-9',
        データ： {
            メッセージ: 'こんにちは'
        },
        計算: {
            // 計算プロパティゲッター
            逆メッセージ: 関数 () {
                // `this` は vm インスタンスを参照します。 return this.message.split('').reverse().join('')
            }
        }
    })
</スクリプト>

結果：

元データ: 「こんにちは」

フリップデータ：「olleH」

ここでは、計算プロパティreversedMessageを宣言します。私たちが提供する関数は、プロパティ vm.reversedMessage のゲッター関数として使用されます。

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'さようなら'
console.log(vm.reversedMessage) // => 'eybdooG'

ブラウザコンソールを開いて、例の vm を自分で変更することもできます。 vm.reversedMessage の値は常に vm.message の値に依存します。

通常のプロパティをバインドするのと同じように、テンプレートで計算プロパティをバインドできます。 Vue は vm.reversedMessage が vm.message に依存していることを認識しているため、vm.message が変更されると、vm.reversedMessage に依存するすべてのバインディングも更新されます。そして最も良い点は、この依存関係を宣言的な方法で作成したことです。計算プロパティのゲッターには副作用がないため、テストと理解が容易になります。

計算プロパティと計算メソッドの違いは何ですか?

これを見ると、メソッドを使用してこの効果を実現し、特定のビジネスロジックを定義済みのメソッドに配置できると思いますか? ただし、それらの最大の違いは、計算プロパティが応答依存関係に基づいてキャッシュされることです。つまり、上記で依存しているメッセージが変更されない場合、reversedMessage はすぐに以前の結果を取得し、関数を再度実行する必要はありません。計算プロパティを使用すると、パフォーマンスのオーバーヘッドを大幅に節約できますが、キャッシュされたコンテンツが必要ない場合は、代わりにメソッドを使用できます。

(IX) スロット

2.6.0 では、名前付きスロットとスコープ付きスロットの新しい統合構文 (v-slot ディレクティブ) が導入されました。これは、現在は非推奨となっているものの削除されておらず、引き続きドキュメント化されている slot 属性と slot-scope 属性を置き換えます。新しい構文の起源はこの RFC にあります。

これは浅はかすぎるので読まないでください。

スロットは、子コンポーネントが親コンポーネントに与えるプレースホルダーです (例: <slot></slot>)。親コンポーネントは、このプレースホルダーにいくつかのテンプレートや HTML コードを入力できます。

簡単に言えば、コンポーネント内のコンポーネントです

以下に示すように、3 つのコンポーネントを定義しました。 Ideal は親コンポーネントで、その中で slot はプレースホルダーとして使用されます。同時に、name 属性は 2 つの子コンポーネント ideal-title と ideal-content を指します。サーバー (シミュレーション) から子コンポーネントのデータを表示するには、動的に表示する必要があります。つまり、パラメーターを渡し (コンポーネントテンプレートの前の解説で述べたように)、トラバーサルを調整してデータ内のデータを読み取る必要があります。

<div id="hello-10">
  <理想>
    <ideal-title slot="ideal-title" v-bind:title="title"></ideal-title>
    <ideal-content slot="ideal-content" v-for="contents 内の contentItem" v-bind:content="contentItem"></ideal-content>
  </理想>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<スクリプト>
    Vue.component("理想", {
        テンプレート: '<div>\
                    <スロット名="理想のタイトル"></スロット>\
                      <ul>\
                        <スロット名="理想的なコンテンツ"></スロット>\
                      </ul>\
                   </div>'
    })
    
    Vue.component("理想的なタイトル", {
        プロパティ: ['タイトル'],
        テンプレート: '<div>{{title}}</div>'
    })
    
    Vue.component("理想的なコンテンツ", {
        プロパティ: ['コンテンツ'],
        テンプレート: '<li>{{content}}</li>'
    })

    var vm = 新しい Vue({
        el: '#hello-10',
        データ： {
            タイトル: 「理想は20年以上続く」
            内容: ["Java", "Linux", "データベース"]
        }
    })
</スクリプト>

結果は次のとおりです。

IV. Vue を使い始める

(I) Vue-cliプロジェクトを作成する

Vue-cli は、Vue プロジェクトを素早く作成するための公式の scaffold です。簡単に言うと Maven、つまり作成時にスケルトンを選択する感覚で理解でき、開発がより便利になります。

（１）準備

A: Node.jsをインストールする

Node.js ダウンロードするには公式サイトまたは中国語のウェブサイトにアクセスしてください

cmd に node -v と入力し、バージョン番号が表示されれば正常です。npm -v と入力してもバージョン番号が表示されますが、これも正常です。

Node.js イメージを Taobao イメージアクセラレーションに調整する (cnpm)

# -g はグローバルセキュリティを表します。この方法をお勧めします。npm install cnpm -g

# 別の方法としては、npm を使用するたびに末尾に文字列を追加することです。npm install --registry=https://registry.npm.tabao.org の使用は推奨されません。

インストール後、このパスを開きます (abc は、自分のマシンのユーザー名です)。

C:\Users\abc\AppData\Roaming\npm\node_modules

通常はcnpmがインストールされており、その後vue-cliのインストールを開始します。

B: vue-cliをインストールする

cnpm インストール vue-cli -g

インストール後、npmフォルダ内のcmdを開き、vue-listと入力します。下図のような星型のコンテンツが表示されればインストールは完了です。

C: vue-cliプログラムを作成する

目的の場所にディレクトリを作成し、webpackベースのvueアプリケーションを選択します。

このフォルダのcmdにコマンドを入力します

vue の初期化 webpack vue_02_myvue

プロジェクト名や著者名などの基本情報を入力します

以下の内容にオプションがある場合は、Enterとn（つまり、いいえ）を押して続行します。

この時点で、npm install を自動的に実行するかどうかを尋ねられます (以下を参照)。はいの場合、一部の依存関係が自動的にインストールされます。いいえをクリックすると、自分でインストールするためのコマンドを入力する必要があるため、はいを選択します。

プロジェクトの作成後に npm install を実行しますか? (推奨) npm

完了すると、プロジェクト内のnode_modulesにはさらに多くの依存関係が存在します。

その後、初期化されたことを通知します。起動したい場合は、次の2つの文を実行できます。最初の文は、外部フォルダからカスタマイズしたプロジェクトフォルダに入るもので、2番目の文は起動します。

以下の内容が表示されれば起動は成功しており、以下のアドレスとポートからアクセスできます。

エディタを探して確認します。IDEA を使用してこのフォルダを開き、変更を加えます。特定のコードファイルは src ディレクトリに残っています。同時に、IDEA のターミナルを cmd または管理者権限を持つターミナルとして構成することもできます。これはより便利です。

プロジェクトを素早く作成する方法

HBuilder を使用すると、比較的早くプロジェクトを作成できます。Vue プロジェクトを直接作成し、ターミナルで実行できます。

プロジェクトを作成するディレクトリで、ターミナルに vue ui と入力してグラフィカルインターフェイスに入ります (この方法では、vue-cli バージョン 3.x が必要です。vue --version で照会された vue-cli のバージョン (たとえば、2.9.6) は使用できません。使用可能なコマンドは、vue -h で確認できます)

(II) Webpackの簡単な紹介

（１）インストールの理解

Vue プロジェクトを作成するときに、パッケージングに webpack を選択しましたが、これは自動化されたプロセスでした。手動で操作することで、よりよく理解できます。

webpack は、最新の JavaScript アプリケーション用の静的モジュールバンドラーです。 webpack はアプリケーションを処理する際に、アプリケーションに必要なすべてのモジュールを含む依存関係グラフを再帰的に構築し、これらのモジュールすべてを 1 つ以上のバンドルにパッケージ化します。
webρack は、最も人気のあるフロントエンドリソースのモジュール管理およびパッケージ化ツールです。依存関係とルールに従って、疎結合された多数のモジュールを、実稼働環境の展開に適したフロントエンドリソースにパッケージ化できます。オンデマンドでロードされるモジュールのコードを分離し、実際に必要なときに非同期でロードすることもできます。ローダー変換により、Commons、AMD、ES6、CSS、JSON、Coffee Script、LESS など、あらゆる形式のリソースをモジュールとして使用できるようになります。

webpack と webpack-cli をインストールします。npm がそれほど遅くない場合は、最初に npm を使用し、次に cnpm を使用することを検討してください。

cnpm インストール webpack -g
cnpm インストール webpack-cli -g

インストールが成功したかどうかを判断するには、webpack -v と webpack-cli -v を使用してバージョン番号が表示されるかどうかを確認します。

（２）webpackを使う

プロジェクトを作成します（IDEAの場合は、通常のフォルダを作成して開くだけです）

JSモジュールやその他のコンテンツを配置するためのモジュールディレクトリを作成する

モジュールの下にdemo.jsなどのモジュールファイルを作成し、次のようなJsモジュール関連のコードを記述します。

exports.test = 関数（）{
    document.write("<h2>理想は20年以上続く</h2>")
}

モジュールの下に main.js を作成します。これは、パッケージ化時にエントリ属性を設定するために使用されるエントリファイルです。

var デモ = require("./demo")
デモ.テスト();

設定用にプロジェクトのルートディレクトリにwebpack.config.jsファイルを作成します。

モジュール.エクスポート = {
    エントリ: "./modules/main.js",
    出力: {
        ファイル名: "./js/bundle.js"
    }
};

ターミナルでwebpackコマンドを入力してパッケージ化します（プロジェクトディレクトリを入力してwebpackと入力すると、これが実行結果になります）

abc@LAPTOP-5T03DV1G MINGW64 /f/develop/IdeaProjects/framework-code/vue/webpack_01_first
$ウェブパック
ハッシュ: 7f61ef9440a6bab63058
バージョン: webpack 4.44.1
時間: 334ms
作成日時: 2020-09-05 16:18:40
アセットサイズチャンクチャンク名
./js/bundle.js 1020 バイト 0 [送信] main
エントリポイント main = ./js/bundle.js
[0] ./modules/main.js 42 バイト {0} [ビルド済み]
[1] ./modules/demo.js 82バイト {0} [ビルド済み]
構成に関する警告
'mode' オプションが設定されていないため、webpack はこの値に対して 'production' にフォールバックします。各 e のデフォルトを有効にするには、'mode' オプションを 'development' または 'production' に設定してください。
環境。
デフォルトの動作を無効にするには、「none」に設定することもできます。詳細については、https://webpack.js.org/configuration/mode/ を参照してください。

パッケージ化後、プロジェクトディレクトリにdistフォルダが追加され、その中にjsフォルダがあり、その中にパッケージ化されたjsが含まれています。index.htmlを作成し、このjsを導入します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
</head>
<本文>
  <script src="dist/js/bundle.js"></script>
</本文>
</html>

ページ効果は次のとおりです。

補足: 構成ファイルには何が含まれているでしょうか?

entry: エントリファイル。Web Pack がプロジェクトのエントリとして使用するファイルを指定します。
出力: 出力。処理されたファイルを指定されたパスに配置するためのWebパックを指定します。
モジュール: さまざまな種類のファイルを処理するために使用されるモジュール。プラグイン: ホットアップデート、コード再利用などのプラグイン。
解決: パスを設定する
watch: モニター、設定ファイルの変更後に直接パッケージ化するために使用されます

(III) Vue Routerルーティングの簡単な紹介

Vue Router は Vue.js の公式ルーターです。 Vue.js コアと深く統合されており、Vue.js を使用したシングルページアプリケーションの構築が簡単になります。機能は次のとおりです:

簡単に言えば、いくつかのページジャンプを実現できます。たとえば、ヘッダーのコンテンツは変更されず、コンテンツ部分はリンクに応じて変更される必要があります。

ネストされたルート/ビューマッピング
モジュール式のコンポーネントベースのルーター構成
ルートパラメータ、クエリ、ワイルドカード
Vue.js トランジションシステムによるトランジション効果をご覧ください
きめ細かなナビゲーションコントロール
自動アクティブ CSS クラスを持つリンク
IE9 で自動的にフォールバックする HTML5 履歴モードまたはハッシュモード
カスタマイズ可能なスクロール動作

インストール手順:

vue-routerはプラグインパッケージなので、古い方法はnpm/cnpmのままです。

vue-router を npm でインストールします --save-dev

インストール後に問題が発生した場合は、プロンプトに従って対応するコマンドを入力してください。npmauditfixを入力するプロンプトが表示されたときと同じです。

プロジェクトを作成したら、デフォルトの HelloWorld コンポーネントを削除し、コンポーネント内に 2 つのカスタムコンポーネントを作成します。たとえば、FirstDemo.vue と Main.vue を作成しました。前者はサブページで、後者はメインページを表します。

最初のデモ.vue

<テンプレート>
  <h1>最初のデモページ</h1>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: "FirstDemo.vue"
  }
</スクリプト>

<スタイルスコープ>

</スタイル>

メイン.vue

<テンプレート>
  <h1>ホーム</h1>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: "Main.vue"
  }
</スクリプト>

<スタイルスコープ>
</スタイル>

次に、ルーターフォルダとindex.jsのメイン構成を作成します。

注: これをモジュラープロジェクトで使用する場合は、Vue.use() を介してルーティング機能を明示的にインストールする必要があります。

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。
'../components/FirstDemo' から FirstDemo をインポートします。
Main を '../components/Main' からインポートします。

Vue.use(VueRouter);

デフォルトの新しいVueRouterをエクスポートします({
  ルート: [
    {
      // ルーティングパス パス: "/firstDemo",
      名前: 'firstDemo',
      // ジャンプコンポーネント コンポーネント: FirstDemo
    },
    {
      // ルーティングパス パス: "/main",
      名前: 'メイン',
      // ジャンプコンポーネント コンポーネント: メイン
    }
  ]
})

main.jsエントリファイルを変更する

// `import` コマンドで読み込む Vue ビルド バージョン
// (ランタイムのみまたはスタンドアロン) が webpack.base.conf にエイリアスとともに設定されています。
'vue' から Vue をインポートします
'./App' から App をインポートします
'./router' からルーターをインポートします

Vue.config.productionTip = false

Vue.use(ルーター);

/* eslint を無効にする no-new */
新しいVue({
  el: '#app',
  //ルーターを設定する、
  コンポーネント: {App},
  テンプレート: '<App/>'
})

正式な執筆ページと同様に、受信リンク

<テンプレート>
  <div id="アプリ">
    <h1>理想は20年以上続く</h1>
    <router-link to="/main">ホーム</router-link>
    <router-link to="/firstDemo">最初のデモページ</router-link>
    <ルータービュー></ルータービュー>
  </div>
</テンプレート>

<スクリプト>

  エクスポートデフォルト{
    名前: 'アプリ'、
  }
</スクリプト>

<スタイル>
  ＃アプリ {
    フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
    -webkit-font-smoothing: アンチエイリアス;
    -moz-osx-font-smoothing: グレースケール;
    テキスト配置: 中央;
    色: #2c3e50;
    上マージン: 60px;
  }
</スタイル>

(IV) Vue + ElementUiの基本的な使い方

vue_03_vue_elementui という名前のプロジェクトを作成し、vue-router、element-ui、sass-loader、node-sass プラグインをインストールします。

# プロジェクトを作成 vue init webpack vue_03_vue_elementui

# プロジェクトディレクトリに入る cd vue_03_vue_elementui
# vue-routerをインストールする
npm で vue-router をインストールします --save-dev
# e1ement-uiをインストールする
npm i 要素UI -S
# 依存関係をインストールする npm install
# SASSローダーをインストールします cnpm install sass-loader node-sass --save-dev
# テストを開始する npm run dev

補足: npmコマンドの説明

npm install moduleName: モジュールをプロジェクトディレクトリにインストールします

npm install -g moduleNMame: -g はモジュールをグローバルにインストールすることを意味します。ディスク上のインストールの具体的な場所は、npm config プレフィックスの場所によって異なります。

npm install - save moduleName: --save は、モジュールをプロジェクトディレクトリにインストールし、依存関係をパッケージファイルの依存関係ノードに書き込むことを意味します。-S はこのコマンドの省略形です。

npm install -save -dev moduleName: --save-dev は、モジュールをプロジェクトディレクトリにインストールし、依存関係をパッケージファイルの devdependencies ノードに書き込むことを意味します。-D はコマンドの省略形です。

その後、エディターで開くことができます。個人の選択によります。ここでは IDEA を使用して開きます。開いたら、ルーター sass やその他のコンテンツがモジュールフォルダーに正常にインストールされているかどうかに注意してください。

次に、デフォルトの HelloWorld コンポーネントとデフォルトのロゴを削除し、コードの記述を開始して、ビューを保存するための views フォルダーを作成します。

ログイン.vue

<テンプレート>
  <h1>メインページ</h1>
</テンプレート>

<スクリプト>
  エクスポートデフォルト{
    名前: "Main.vue"
  }
</スクリプト>

<スタイルスコープ>
</スタイル>

メイン.vue

<テンプレート>
  <div>
    <el-form ref="ログインフォーム" :model="フォーム" :rules="ルール" label-width="80px" class="ログインボックス">
      <h3 class="login-title">ログインへようこそ</h3>
      <el-form-item label="アカウント" prop="ユーザー名">
        <el-input type="text" placeholder="アカウント番号を入力してください" v-model="form.username"/>
      </el-form-item>
      <el-form-item label=" パスワード " prop="password">
        <el-input type="password" placeholder="パスワードを入力してください" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">ログイン</el-button>
      </el-form-item>
    </el-form>
    <el-ダイアログ
      title="温かいヒント"
      :visible.sync="ダイアログを表示"
      幅="30%"
      :before-close="handLeClose">
      <span>アカウントとパスワードを入力してください</span>
      <span slot="フッター" class="ダイアログフッター">
        <el-button type="primary" @click="dialogVisible = false">OK</el-button>
      </span>
    </el-ダイアログ>
  </div>

</テンプレート>


<スクリプト>
  エクスポートデフォルト{
    名前: "ログイン",
    データ（） {
      戻る {
        形状： {
          ユーザー名: ''、
          パスワード: ''
        },
        //フォーム検証では、el-form-item要素にprop属性ルールを追加する必要があります: {
          ユーザー名: [
            {必須: true、メッセージ: 「アカウントは空にできません」、トリガー: 'blur'}
          ]、
          パスワード: [
            {必須: true、メッセージ: 「パスワードは空欄にできません」、トリガー: 'blur'}
          ]
        },
        //ダイアログボックスの表示と非表示 dialogVisible: false
      }
    },
    メソッド: {
      onSubmit(フォーム名) {
        //フォームに検証関数をバインドします this.$refs[formName].validate((valid) => {
          （有効）の場合{
            // 指定されたページにルーティングするには、vue-router を使用します。このメソッドは、プログラムによるナビゲーションと呼ばれます。this.$router.push("/main");
          } それ以外 {
            this.dialogVisible = true;
            false を返します。
          }
        });
      }
    }
  }
</スクリプト>


<style lang="scss" スコープ>
  .ログインボックス{
    境界線: 1px 実線 #DCDFE6;
    幅: 350ピクセル;
    マージン: 40px 自動;
    パディング: 35px 35px 15px 35px;
    境界線の半径: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    ボックスシャドウ: 0 0 25px #909399;
  }

  .ログインタイトル{
    テキスト配置: 中央;
    マージン: 0 自動 40px 自動;
    色: #303133;
  }
</スタイル>

ルーターフォルダとその中にindex.jsを作成し、リダイレクトコンテンツを設定します。

インデックス

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。
'../views/Login' からログインをインポートします
Main を '../views/Main' からインポートします

Vue.use(VueRouter);

デフォルトの新しいVueRouterをエクスポートします({
  ルート: [
    {
      パス: "/main",
      コンポーネント: メイン
    },
    {
      パス: "/login",
      コンポーネント: ログイン
    }
  ]
})

main.js を変更し、router と elementui を使用します。router についてはすでに説明しました。後者については、公式 Web サイトの入門ドキュメントに従うことで理解できます。

https://element.eleme.cn/#/zh-CN/component/quickstart

メイン.js

'vue' から Vue をインポートします
'./App' から App をインポートします

'./router' からルーターをインポートします
'element-ui' から ElementUI をインポートします。
'element-ui/lib/theme-chalk/index.css' をインポートします。

Vue.config で productionTip を false に設定します。

Vue.use(ルーター);
Vue.js の ElementUI 要素をオーバーライドします。

/* eslint を無効にする no-new */
新しいVue({
  el: '#app',
  ルーター、
  レンダリング: h => h(App)
});

アプリ.vue

<テンプレート>
  <div id="アプリ">
    <h1>理想は20年以上続く</h1>
    <router-link to="/main">ホーム</router-link>
    <router-link to="/login">ログインページ</router-link>
    <ルータービュー></ルータービュー>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'、
}
</スクリプト>

<スタイル>
＃アプリ {
  フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

書き終えたので実行を開始できますが、実行時に次のエラーが発生しました。

TypeError [ERR_INVALID_ARG_TYPE]: 「path」引数は文字列型でなければなりません。受信した型は未定義です
モジュールのビルドに失敗しました: TypeError: this.getResolve は関数ではありません

確認後、プロジェクトディレクトリのpackage.jsonのsass-loderのバージョンを10.0.2から8.0.2、7.3.1に変更してから、npm run devで正常に実行できるようになりました。

"sass-loader": "^7.3.1",

注意: 設定を変更した後は、再度npm installまたはcnpm installを実行する必要があります。

最終的な効果を表示します。

ホームページ効果をクリックします:

ログインページのエフェクトをクリックします:

5. VueとJavaのデータ相互作用の簡単な例

最後に、特定のWebサイトで既製のページの例を見つけて、バックエンドをしばらくの間実行しました。

/user/findall、/user/indbyid、/user/updepsuser

これは簡単なクエリと更新操作です。

パブリッククラスのユーザーはシリアル化可能です{	
	プライベート整数ID;
    プライベート文字列ユーザー名;
    プライベート文字列パスワード;
    プライベート整数の年齢。
    プライベートストリングセックス;
    プライベート文字列メール;
    ......
}

ページで受信したデータの重要なコードは次のとおりです

まず、すべてのユーザーデータが表示されます。ユーザーリストを移動すると、属性値がCurly BracketsとXXを使用して取得されます。

<tr v-for = "u in userlist">
  <td> <入力name = "ids" type = "チェックボックス"> </td>
  <td> {{u.id}} </td>
  <td> {{U.Username}}
  </td>
  <td> {{u.password}} </td>
  <td> {{u.sex}} </td>
  <td> {{u.age}} </td>
  <td class = "text-center"> {{u.email}} </td>
  <td class="text-center">
    <button type = "button" class = "btn bg-olive btn-xs">詳細</button>
    <button type = "button" class = "btn bg-olive btn-xs" @click = "findbyid（u.id）">編集</button>
  </td>
</tr>

編集をクリックした後、現在のユーザーのクエリメソッドはECHOのために実行されます。

<div class="box-body">
  <div class = "form-horizontal">


    <div class="フォームグループ">
      <ラベルclass = "col-sm-2コントロールラベル">ユーザー名：</label>
      <div class = "col-sm-5">
        <input type = "text" class = "form-control" v-model = "user.username">
      </div>
    </div>
    <div class="フォームグループ">
      <ラベルclass = "col-sm-2コントロールラベル">パスワード：</label>
      <div class = "col-sm-5">
        <入力型= "text" class = "form-control" v-model = "user.password">
      </div>
    </div>
    <div class="フォームグループ">
      <ラベルクラス= "col-sm-2コントロールラベル">性別：</label>
      <div class = "col-sm-5">
        <入力型= "text" class = "form-control" v-model = "user.sex">
      </div>
    </div>
    <div class="フォームグループ">
      <ラベルclass = "col-sm-2コントロールラベル">年齢：</label>
      <div class = "col-sm-5">
        <入力型= "text" class = "form-control" v-model = "user.age">
      </div>
    </div>
    <div class="フォームグループ">
      <ラベルクラス= "col-sm-2コントロールラベル">電子メール：</label>
      <div class = "col-sm-5">
        <入力型= "text" class = "form-control" v-model = "user.email">
      </div>
    </div>
  </div>
</div>

データの相互作用を実現するための最も重要なことは、データを定義し、非同期リクエストにaxiosを使用することです

var vue = 新しい Vue({
    el: "#app",
    データ： {
        ユーザー：{id： ""、username： ""、password： ""、age： ""、sex： ""、email： ""}、
        ユーザーリスト：[]
    },
    メソッド: {
        findall：function（）{
            var _this = これ;
            axios.get（ "user/findall.do"）。
                _this.userlist = response.data;
                console.log（_this.userlist）;
            }).catch(関数(エラー) {
                コンソールログ(エラー);
            });
        },
        FindByID：function（userid）{
            var _this = これ;
            axios.get（ "user/findbyid.do"、{
                パラメータ: {
                    ID：userid
                }
            }).then(関数 (応答) {
                _this.user = respons.data;
                $（ '＃mymodal'）。モーダル（ "show"）;
            }).catch(関数(エラー) {
            });

        },
        更新：function（user）{
            var _this = これ;
            axios.post（ "user/updateuser.do"、_this.user）.then（function（response）{
                _this.findall（）;
            }).catch(関数(エラー) {
            });
        }
    },
    作成された() {
        this.findall（）;
    }
});

上記のコードは、最初に非常に簡単に、ユーザーリストは、前のセクションのすべてのユーザーデータを表示するために使用されます。変更方法は、メトーで作成されます。

注：リクエスト後に実行されたコンテンツは成功し、リクエスト後に実行されたコンテンツが失敗しました。

注：最も重要なコンテンツは、Axiosの前にこれを定義することです。

効果は以下のとおりです。

すべて検索