[Crazy God Talks Java] Vue 入門詳細メモ (全編)

開発 2023-10-01 06:31:34 訪問数: null

記事ディレクトリ

1。概要

1.1. Vue概述

Vue (/vju/ と発音、ビューに似ています) は、 2014 年 2 月にリリースされた、ユーザー インターフェイスを構築するための進歩的なフレームワークです。他の大きなフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。Vue のコア ライブラリはビュー層のみに焦点を当てており、開始が簡単であるだけでなく、サードパーティのライブラリ(vue-router: Jump、vue-resource: communication、vuex: Management など) との統合も簡単です。既存のプロジェクト。
SOC 原則: 懸念事項の分離の原則

1.2. フロントエンドナレッジシステム

本当の意味での「インターネットJavaフルスタックエンジニア」への道はまだまだ遠いですが、その中でも「My Big Front End」は避けては通れない必修科目です。コースのこの段階の主な目的は、Java のバックグラウンド プログラマがフロントエンドを知り、理解し、マスターできるように導き、「インターネット Java フルスタック エンジニア」への一歩を踏み出すことです。

1.3. フロントエンドの3つの要素

  • HTML (構造): ハイパー テキスト マークアップ言語 (ハイパー テキスト マークアップ言語)、Web ページの構造とコンテンツを決定します。
  • CSS (プレゼンテーション): カスケード スタイル シート (Cascading Style Sheets)、Web ページのプレゼンテーション スタイルを設定します。
  • JavaScript (動作): 弱い型指定のスクリプト言語であり、ソース コードをコンパイルする必要はありませんが、ブラウザによって解釈されて実行され、Web ページの動作を制御します。

1.4. プレゼンテーション層 (CSS)

CSS カスケード スタイル シートはマークアップ言語であり、プログラミング言語ではないため、変数をカスタマイズしたり、引用符で囲んだりすることはできません。言い換えれば、構文サポートがありません。その主な欠陥は次のとおりです。

  • この構文は十分強力ではありません。たとえば、ネストできないため、モジュール開発では多数のセレクターを繰り返し記述する必要があります。
  • 変数と合理的なスタイル再利用メカニズムがなければ、論理的に関連する属性値をリテラルの形式で繰り返し出力する必要があり、保守が困難になります。

その結果、職場での仕事量が不当に増加しました。この問題を解決するために、フロントエンド開発者は [ CSS プリプロセッサ] と呼ばれるツールを使用して、CSS に不足しているスタイル層の再利用メカニズムを提供し、冗長なコードを削減し、スタイル コードの保守性を向上させます。フロントエンドスタイルの開発効率を大幅に向上します。(たとえば、ページにはその時々で異なるニーズがあり、タオバオのスタイルはダブル 11 と 618 では異なります)

1.5. CSS プリプロセッサ

CSS プリプロセッサは新しい言語を定義します。基本的な考え方は、特殊なプログラミング言語を使用して CSS にいくつかのプログラミング機能を追加し、CSS をターゲットとして使用してファイルを生成することです。その後、開発者はこの言語を使用するだけで済みます。CSS コーディング作業を実行します。 。わかりやすい言葉に直すと、「特殊なプログラミング言語を使ってWebページのスタイルをデザインし、それをコンパイラを通して通常のCSSファイルに変換してプロジェクトで使用すること」となり
ます。?

  • SASS : Ruby をベースにしており、サーバーを介して処理され、強力な機能を備えています。高い分析効率。Ruby 言語を学ぶ必要がありますが、LESS よりも始めるのが難しいです。
  • LESS : NodeJS に基づいており、クライアントを通じて処理され、使いやすいです。SASSよりも機能がシンプルで、解析効率もSASSよりは低いですが、実際の開発では十分なので、バックエンド担当者は必要に応じてLESSを使用することを推奨しています。

1.6. ビヘイビア層 (JavaScript)

JavaScript は弱い型指定のスクリプト言語です。そのソース コードは、実行のためにクライアントに送信する前にコンパイルする必要はありません。代わりに、テキスト形式の文字コードがブラウザに送信され、ブラウザによる解釈と実行が行われます。
ネイティブJS開発
ネイティブJS開発とは、[ECMAScript]の標準開発手法（略してES）に準拠して開発することを指し、すべてのブラウザがサポートしているのが特徴です。現在のブログ公開時点で、ES 標準は次のバージョンをリリースしています。

  • ES3
  • ES4 (内部、未承諾リリース)
  • ES5 (フルブラウザサポート)
  • ES6 (一般的に使用されている、現在の主流バージョン: webpack パッケージが ES5 サポートになります!)
  • ES7
  • ES8
  • ES9 (ドラフト段階)

違いは、新しい機能が徐々に追加されることです。

1.7. TypeScript

TypeScript は、Microsoft によって開発された無料のオープンソース プログラミング言語です。これは JavaScript のスーパーセットであり、基本的にオプションの静的型付けとクラスベースのオブジェクト指向プログラミングを言語に追加します。Anders Heilsberg (C#、Delphi、TypeScript の父、.NET の作成者) が率いています。
この言語の特徴は、ESの機能に加え、規格の範囲外の新機能も多く組み込んでいることであるため、多くのブラウザではTypeScript構文を直接サポートできず、コンパイル（JSへのコンパイル）が必要となります。ブラウザで正しく実行される前に。

1.8. JavaScript フレームワーク

  • jQuery : よく知られた JavaScript フレームワークです。利点は、DOM 操作が簡素化されることです。欠点は、DOM操作が頻繁すぎるため、フロントエンドのパフォーマンスに影響します。フロントエンドの観点からは、これは単に使用されているだけです。 IE6、7、8と互換性があります。
  • Angular : Googleが買収したフロントエンドフレームワークはJavaプログラマー集団によって開発され、バックエンドのMVCモデルをフロントエンドに移し、モジュラー開発の概念を加えたことが特徴、Microsoftと協力しTypeScriptを使用開発する構文が複雑で、バックエンド プログラマには優しいですが、フロントエンド プログラマにはあまり優しくありません。最大の欠点は、バージョンの反復が不合理であることです (例: 名前を除いて、第 1 世代 -> 第 2 世代)。基本的には 2 つのことです。ブログ公開時点では Angular6 がリリースされています)
  • React : Facebook 社が開発した高性能 JS フロントエンドフレームワークで、実際の DOM 操作を削減し、メモリ内で DOM 操作をシミュレートする新しい概念 [仮想 DOM] を提案し、フロントエンドのレンダリング効率を効果的に向上させるのが特徴です。欠点は、追加の [JSX] 言語を学習する必要があるため、使用が複雑なことです。
  • Vue : プログレッシブ JavaScript フレームワーク プログレッシブとは、モジュール開発、ルーティング、状態管理、その他の新機能などの新機能を段階的に実装することを意味します。その特徴は、Angular (モジュール性) と React (仮想 DOM) の利点を組み合わせていることです。
  • Axios : フロントエンド通信フレームワーク; Vue の境界は非常に明確であるため、DOM を処理するため、通信機能はありません。現時点では、サーバーと対話するために追加の通信フレームワークを使用する必要があります。もちろん、 jQuery が提供する AJAX 通信機能の使用を直接選択することもできます。

3 つの主要なフロントエンド フレームワーク: Angular、React、Vue

1.9. UIフレームワーク

  • Ant-Design: Alibaba によって作成され、React に基づく UI フレームワーク
  • ElementUI、iview、ice: Vue ベースの UI フレームワークである Ele.me によって作成されます。
  • Bootstrap: Twitter が立ち上げたフロントエンド開発用のオープンソース ツールキット
  • AmazeUI: 「Meizi UI」とも呼ばれる、HTML5 クロススクリーン フロントエンド フレームワーク。

JavaScript ビルドツール

  • Babel: JS コンパイル ツール。主に、TypeScript のコンパイルなど、ブラウザーでサポートされていない新しい ES 機能に使用されます。
  • WebPack: モジュール パッケージャー、その主な機能はパッケージ化、圧縮、マージ、および順次ロードです。
    注: 上記の知識ポイントは、WebApp 開発に必要なすべてのスキルを整理しています。

1.10. 3 つの目的が 1 つになる

ハイブリッド開発 (ハイブリッド アプリ)
の主な目的は、3 つの端末 (PC、Android: .apk、iOS: .ipa) 上の一連のコードを統合し、基礎となるコンポーネント (センサー、GPS、カメラなど) を呼び出せるようにすることです。 .)、梱包方法は主に2種類あります。

  • クラウド パッケージ化: HBuild -> HBuildX、DCloud によって作成、API クラウド
  • ローカル パッケージング: Cordova (旧 PhoneGap)

1.11. バックエンドテクノロジー

フロントエンド担当者も、開発を容易にするために特定のバックエンド技術を習得する必要がありますが、私たち Java バックエンド担当者は、バックエンドの知識体系が非常に大きく複雑であることを知っています。バックエンドアプリケーションを開発する人材が必要になると、NodeJS などのテクノロジーが登場します。

NodeJS の作者は、NodeJS を放棄すると主張し (アーキテクチャがよくできておらず、かさばる node_ モジュールが作者を不幸にするかもしれないと言っています)、新しいアーキテクチャで Deno の開発を始めました。

バックエンド技術であるため、必ずフレームワークとプロジェクト管理ツールが必要になります。NodeJS フレームワークとプロジェクト管理ツールは次のとおりです。

  • Express: NodeJS フレームワーク
  • Koa: Express 簡易版
  • NPM: Maven に似た包括的なプロジェクト管理ツール
  • YARN: Maven と Gradle の関係に似た、NPM の代替手段

2.MVVM

2.1. MVVMとは

MVVM (Model-View-ViewModel) は、Microsoft WPF (過去のデスクトップ アプリケーションの開発に使用されていた WinForm の代替として使用) と Silverlight (Java アプレットに似ており、簡単に言うとブラウジング WPF (Windows Server 上で実行) のアーキテクトである Ken Cooper と Ted Peters によって開発された、ユーザー インターフェイスを簡素化するイベント駆動型プログラミング手法です。John Gossman (WPF および Silverlight のアーキテクトでもある) によって 2005 年にブログで公開されました。
MVVM は、古典的な MVC (ModI-View-Controller) パターンから派生したものです。MVVM の中核は ViewModel レイヤーであり、データの管理と使用を容易にするためにモデル内のデータ オブジェクトを変換する役割を果たします。その機能は次のとおりです。

  • この層は、ビュー層と上向きの双方向データ バインディングを実行します。
  • インターフェースリクエストを通じてモデル層と下位のデータ対話を実行します。

画像.png

2.2. MVVM を使用する理由

MVVM パターンは MVC パターンと同じです。主な目的はビュー (View) とモデル (Model) を分離することです。これにはいくつかの利点があります。

  • 低結合: ビュー (ビュー) はモデルとは独立して変更および修正できます。ビューモデルは異なるビューにバインドできます。ビューが変更されてもモデルは変更されず、モデルが変更されてもビューも変更されません。
  • Reusable : ViewModel にいくつかのビュー ロジックを配置し、多くのビューでこのビュー ロジックを再利用できます。
  • 独立した開発: 開発者はビジネス ロジックとデータ開発 (ViewModel) に集中でき、デザイナーはページのデザインに集中できます。
  • テスト可能: インターフェイスのテストは常に困難でしたが、現在では ViewModel のテストを作成できます。

2.3. Vue は MVVM パターンの実装者です

画像.png

  • モデル: JavaScript オブジェクトが表現されるモデル層
  • ビュー: ビュー レイヤー。ここでは DOM (HTML 操作の要素) を表します。
  • ViewModel: ビューとデータを接続するミドルウェアです。Vue.js は、MVVM の ViewModel レイヤーの実装者です。MVVM アーキテクチャでは、データとビューは直接通信できません。それらは ViewModel を通じてのみ通信でき、ViewModel はオブザーバーを定義します

ViewModel はデータの変更を監視し、ビューに対応するコンテンツを更新できます。ViewModel は
ビューの変更を監視し、変更をデータに通知できます。Vue.js
は MVVM の実装者です。その中心はDOM 監視とデータ バインディングを実装することです

3. 最初の Vue プログラム

  1. 新しい空のプロジェクトを作成し、新しいパッケージを作成します: Chapter01

画像.png

  1. 新しい HTML5 プロジェクトを作成して次のように記述します。
  2. ページを開く
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>

    <!--View 层-->
    <div id="app">
      <!--4、元素获取 vue 中的数据-->
      {
   
   {message}}
    </div>

    <!--1、导入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
      var vm = new Vue({
      
      
        // 2、绑定 app 元素
        el: "#app",
        // Model 层
        // 3、插入数据，键值对
        data: {
      
      
          message: "hello,vue"
        }
      });
    </script>
  </body>
</html>

画像.png

  1. 開発者ツールを開き、「コンソール入力」を選択して Enter キーを押します。
vm.message="hehe"

ページ上のデータも変更されていることがわかります。
これは、ビュー レイヤーのデータとメッセージ変数のViewModel 双方向バインディングです。メッセージが変更されると、ページ上のデータも変更されます。

4. 説明書

4.1. 例

HTMLページを書く

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <!--View 层-->
    <div id="app">
      <!--4、元素获取 vue 中的数据-->
      <!--    {
    
    {message}}-->
      <span v-bind:title="message">
        鼠标悬停几秒可查看绑定的信息
      </span>
    </div>
    <!--1、导入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
      var vm = new Vue({
      
      
        // 2、绑定 app 元素
        el: "#app",
        // Model 层
        // 3、插入数据，键值对
        data: {
      
      
          message: "hello,vue"
        }
      });
    </script>
  </body>
</html>

ページを開いて表示する
画像.png
と、v-bind を使用して変数を要素にバインドすることもできます。

4.2. 概要

ディレクティブは、v- という接頭辞が付いている特別な属性です。ディレクティブの属性の値は、単一の JavaScript 式であることが想定されます(例外は v-for であり、これについては後で説明します)。このディレクティブの役割は、式の値が変更されたときに、それに関連付けられた効果を DOM にリアクティブに適用することです。

4.3. v-if

HTMLを書く

<div id="app">
  <span v-if="ok===true">YES</span>
  <span v-else>No</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      ok: true
    }
  });
</script>

ページを開いて
画像.png
、ok の値を変更します。
画像.png

4.4. v-else-if

<div id="app">
  <span v-if="str==='A'">AAA</span>
  <span v-else-if="str==='B'">BBB</span>
  <span v-else>Other</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      str: 'A'
    }
  });
</script>

ページを開いて
画像.png
str の値を変更します。
画像.png
画像.png

4.5. のために

<div id="app">
  <ul>
    <!--类似于java 的 foreach ，
    从 items 中遍历出的每一项命名为 item-->
    <li v-for="item in items">{
   
   {item.message}}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      items: [
        {
      
      message: "test-1"},
        {
      
      message: "test-2"},
        {
      
      message: "test-3"}
      ]
    }
  });
</script>

ページを開く
画像.png

5. イベントをリッスンする

v-onディレクティブを使用すると、DOM イベントをリッスンし、トリガーされたときに JavaScript コードを実行できます。

<div id="app">
  <button v-on:click="sayHi()">click me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      message: "Hi!!!"
    },
    // 定义方法
    // 注意一定要加 S
    methods: {
      
      
      // 冒号前是方法名
      sayHi: function (){
      
      
        alert(this.message);
      }
    }
  });
</script>

ページを開く
画像.png

6.双方向バインディング

6.1 双方向データ バインディングとは何ですか?

Vue は mvvm フレームワークであり、双方向のデータ バインディングを意味します。つまり、データが変更されると、ビューも変更されます。ビューが変更されると、データも同期的に変更されます。これがvueの本質と言えるでしょう。
ここで説明している双方向データ バインディングは UI コントロール用である必要があることに注意してください。非 UI コントロールには双方向データ バインディングは含まれません。一方向のデータ バインディングは、redux などの状態管理ツールを使用するための前提条件です。vuex を使用すると、データ フローも単一項目になり、双方向のデータ バインディングと競合します。

6.2 データの双方向バインディングを実装する必要があるのはなぜですか?

vue では、vuex を使用する場合、データは実際には一方向です。双方向データ バインディングと呼ばれる理由は、使用される UI コントロールのためです。フォームを処理する場合、vue の双方向データ バインディングは特に快適です使用します。
グローバル データ フローは追跡を容易にするために 1 つのアイテムを使用し、ローカル データ フローはシンプルで操作が簡単な 2 方向を使用します。

6.3 フォームでの双方向データ バインディングの使用

v-modelディレクティブを使用すると、フォームの <input>、<textarea>、および <select> 要素に双方向のデータ バインディングを作成できます。コントロールの種類に基づいて要素を更新するための正しい方法が自動的に選択されます。その魔法にもかかわらず、v-model は本質的には糖衣構文です。ユーザー入力イベントをリッスンしてデータを更新し、いくつかの極端なシナリオに対して特別な処理を実行する役割を果たします。

6.4 使用方法

1.入力ボックス

<div id="app">
  <!--双向绑定：
  data 中的 message 既和输入框的 message 绑定
  又和 p 标签中的 message 绑定-->
  <span>输入文本：</span><input type="text" v-model="message">
  <p><span>输入的文本：</span><span>{
   
   {message}}</span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      message: ""
    }
  });
</script>

ページ上のメッセージの値を変更し、
画像.png
入力ボックスに直接入力します。
画像.png

2. ラジオボタン

<div id="app">
  性别：
  <input type="radio" name="sex" value="male" v-model="sex"> 男
  <input type="radio" name="sex" value="female" v-model="sex"> 女

  <p>选中了：{
   
   {sex}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      sex: ""
    }
  });
</script>

ページを開くと、
画像.png
ラジオ ボタンの値がここにバインドされていることがわかります。

3. 複数選択ボックス

<div id="app">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">杰克</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">约翰</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">麦克</label>
  <br>
  <span>Checked names: {
   
   { checkedNames }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      checkedNames: []
    }
  });
</script>

画像.png

4. ドロップダウンボックス

<div id="app">
  下拉框：
  <select v-model="selected">
    <option value="" disabled>-请选择-</option>
    <option value="aaa">AA</option>
    <option value="bbb">BB</option>
    <option value="ccc">CC</option>
  </select>
  <p>选中 ： {
   
   {selected}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      selected : ""
    }
  });
</script>

画像.png

7. コンポーネント

7.1. 概要

  • コンポーネントは再利用可能なVue インスタンスです。つまり、開発プロセス中に繰り返し部分をコンポーネントとしてカプセル化できます。
  • コンポーネントの構成
    画像.pngたとえば、ヘッダー、サイドバー、コンテンツ領域などのコンポーネントがあり、各コンポーネントにはナビゲーション リンクやブログ投稿などの他のコンポーネントが含まれている場合があります。

7.2. 最初のコンポーネントのデモ

<div id="app">
  <my-component></my-component>
  <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  // 定义组件
  Vue.component("my-component",{
      
      
    template: '<li>AA</li>'
  });

  var vm = new Vue({
      
      
    el: "#app"
  });
</script>

画像.png

7.3. Data を介したデータの受け渡し

<div id="app">
  <!--  利用 v-for 把 items 的元素取出，
  再通过 v-bind 绑定数据: 把 item1 绑定在了 item2 上-->
  <my-component v-for="item1 in items" v-bind:item2="item1"></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  // 定义组件
  Vue.component("my-component",{
      
      
    // 通过 item2 接收 item1 数据
    props: ['item2'],
    template: '<li>{
      
      {item2}}</li>'
  });

  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      items: ["AAA","BBB","CCC"]
    }
  });
</script>

画像.png

8. Axios 非同期通信

8.1. 概要

Axios はブラウザ側と NodeJS で利用できるオープンソースの非同期通信フレームワークであり、主な機能は AJAX 非同期通信の実装であり、その機能的特徴は以下の通りです。

  • ブラウザから XMLHttpRequest を作成する
  • Node.jsからhttpリクエストを作成する
  • サポート約束API
  • リクエストとレスポンスをインターセプトする
  • リクエストデータとレスポンスデータの変換
  • リクエストのキャンセル
  • JSONデータを自動変換する
  • クライアントは XSRF (クロスサイト リクエスト フォージェリ) に対する防御をサポートします。

8.2. Axios を使用する理由

Vue.js はビュー レイヤ フレームワークであり、作者 (You Yuxi) は SoC (Separation of Concerns Principle) を厳密に遵守しているため、Vue.js には AJAX 通信機能が含まれていません。Vue は Axios フレームワークの使用を推奨し、JQuery は使用しないようにしてください。 . DOMを頻繁に操作するため

8.3. 前提条件

IDEA の JavaScript が ES6 をサポートしていることを確認する
画像.png

8.4 最初の Axios アプリケーション

  1. 実際の開発ではJSON形式のデータを使用することが多いため、新たにJSON形式のファイルを用意します。
  2. HTML の作成 - ローカル Json データの取得
  3. ページを開いて開発者ツールを開くと、Axios が AJax と同様に非同期通信であることがわかり、
    画像.png
    データが取得されていることがわかります。
    画像.png
  4. HTML を書く - 取得した Json をページにレンダリングします
  5. ページ
    画像.png
{
    
    
  "name": "呵呵",
  "url": "https://blog.csdn.net/weixin_44449838",
  "page": 123,
  "isNonProfit": true,
  "address": {
    
    
    "street": "塔克拉玛干沙漠",
    "city": "新疆",
    "country": "中国"
  },
  "links": [
    {
    
    
      "name": "Google",
      "url": "http://www.google.com"
    },
    {
    
    
      "name": "Baidu",
      "url": "http://www.baidu.com"
    }
  ]
}

<div id="vue">

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- axios 的包-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#vue",
    data: {
      
      },
    // 钩子函数，在主流程执行过程中间执行的方法
    mounted(){
      
      
      axios.get('../data.json').then(response=>(console.log(response.data)));
    }
  });
</script>

<div id="vue">
  <!--    需要渲染的字段名 -->
  <div>{
   
   {info.name}}</div>
  <div>{
   
   {info.address}}</div>
  <div>{
   
   {info.address.city}}</div>
  <div v-for="link in info.links">
    <span>{
   
   {link.name}}</span> : 
    <a v-bind:href="link.url">{
   
   {link.url}}</a>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- axios 的包-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#vue",
    // 有冒号、大括号的 data 是属性
    data: {
      
      },
    // 没有冒号的是方法
    // 这里使用的 data 方法，不要搞混
    data(){
      
      
      return{
      
      
        // 请求的返回参数,这里需要写上需要返回的字段名，不需要写值，所以都写 null
        // 这里的键可以比传入的 Json 中的少
        // 但是如果写了，就必须和获得的 Json 键的名字一样
        info: {
      
      
          name: null,
          address: {
      
      
            city: null,
            country: null
          },
          links: [
            {
      
      
              name: null,
              url: null
            }
          ]
        }
      }
    },
    // 钩子函数，在主流程执行过程中间执行的方法
    mounted(){
      
      
      // 这边把 上面 return 中的 info 值和返回的 data 数据绑定，以便返回给视图渲染
      axios.get('../data.json').then(response=>(this.info=response.data));
    }
  });
</script>

8.5 ちらつきの問題を解決する

上記のデモを書いた後、ページを更新すると、最初にテンプレートが表示され、しばらくしてからデータが出てくることがわかりますが、これはあまりユーザー
画像.png
フレンドリーではなく、データにとって安全ではないため、次のコードを使用します
上記のHTML < style >< /style > を書くことで解決する方法

<style>
  [v-cloak]{
      
      
    display: none;
  }
</style>

<div id="vue" v-clock>
  <!--    需要渲染的字段名 -->
  <div>{
   
   {info.name}}</div>
  <div>{
   
   {info.address}}</div>
  <div>{
   
   {info.address.city}}</div>
  <div v-for="link in info.links">
    <span>{
   
   {link.name}}</span> : 
    <a v-bind:href="link.url">{
   
   {link.url}}</a>
  </div>
</div>

このように、しばらくするとデータは出てきますが、テンプレートは表示されなくなります。

9. Vueのライフサイクル

Vue インスタンスには完全なライフサイクルがあります。つまり、作成、データの初期化、テンプレートのコンパイル、DOM のマウント、レンダリング -> 更新 -> レンダリング、アンインストールなどの一連のプロセスです。これをライフ サイクルと呼びます。ビューの。
Vue のライフ サイクル全体を通じて、イベントがトリガーされたときに JS メソッドを登録できるようにする一連のイベントが提供されます。独自に登録した JS メソッドを使用して状況全体を制御できます。これらのイベント応答メソッドのこれは、直接のポイントですVue のインスタンス。
画像.png

10. 計算されたプロパティ

  • 計算されたプロパティ: 計算された結果をプロパティに保存します。
  • 利点: メモリ内で実行、仮想 DOM
  • コードを書く
  • ページを開くこと、開発者モードをオンにすること、コンソールを使用することの違いを体験してください。
<div id="vue">
  <!-- 调用方法 -->
  <p>currentTime1 : {
   
   {currentTime1()}}</p>
  <!-- 调用属性 -->
  <p>currentTime2 : {
   
   {currentTime2}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#vue",
    data: {
      
      
      message: "hello."
    },
    methods: {
      
      
      currentTime1: function (){
      
      
        // 返回当前时间戳
        return Date.now();
      }
    },
    // 计算属性
    computed: {
      
      
      // 方法名不能一样
      currentTime2: function (){
      
      
        // 返回当前时间戳
        return Date.now();
      }
    }
  });
</script>
  1. 通常のメソッドを呼び出す場合は呼び出しメソッド名となり、計算プロパティを呼び出す場合はプロパティ名になります。
    画像.png
  2. 通常の関数呼び出しは 1 回実行されますが、計算プロパティは計算結果を属性として扱い、メモリに保存します。
    画像.png
  • 計算されたプロパティはいつ変更されますか?計算されたプロパティを変更する方法
// 计算属性
computed: {
    
    
  // 方法名不能一样
  currentTime2: function (){
    
    
    // 返回当前时间戳
    return Date.now() +"  | "+this.message;
  }
}

ページを開き、開発者モードを開いて、コンソールを使用すると、
画像.png
計算されたプロパティのメソッド本体のデータが変更される限り、計算されたプロパティも変更されます。

11. コンテンツ配信 - スロット

  • スロット: 動的にプラグイン可能なコンポーネント
  • シンプルなケース
<div>
  <p>数据列表(原本的)</p>
  <ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
  </ul>
</div>
————————————————————————————————
<div id="vue">
  <list>
    <!--绑定插槽 : 使用 slot 属性绑定，引号里的值，必须和下面的 name 属性一样-->
    <!--绑定数据 : 冒号后面是组件中定义的值
    引号里面是 data 数据的字段值
    不能混淆-->
    <list-title slot="list-title" :title="l_title"></list-title>
    <list-items slot="list-items" v-for="item in l_items" :item="item"></list-items>
  </list>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  Vue.component("list",{
      
      
    template:
      '<div>\
      <slot name="list-title"></slot>\
      <ul>\
      <slot name="list-items"></slot>\
      </ul>\
      </div>'
  });
  // 定义数据，插入插槽
  Vue.component("list-title",{
      
      
    props: ['title'],
    template: '<div>{
      
      {title}}</div>'
  });

  Vue.component("list-items",{
      
      
    props: ['item'],
    template: '<li>{
      
      {item}}</li>'
  });

  var vm = new Vue({
      
      
    el: "#vue",
    data: {
      
      
      l_title: "标题————",
      l_items:["AA","BBB","CCCC"]
    }
  });
</script>

ページ効果
画像.png

12. カスタムイベントコンテンツの配信

  • 上記の例に基づいて、各行の後に削除ボタンを追加し、削除をクリックして行を削除および変更したいと考えています。
  1. 最初にわずかな変更を加え、削除ボタンを追加し、クリック イベントをバインドし、クリック後に添え字を出力します。
  2. Vueオブジェクトにdeleteメソッドを追加
  3. 上に書いた 2 つのメソッドをテストします。削除ボタンをクリックして、画像.pngコンソール上で RemoveItem メソッドを呼び出します画像.png
    。これら 2 つのメソッドはそれぞれ成功します。これら 2 つのメソッド間の接続を確立するにはどうすればよいですか?
  4. コンポーネントが this.$emit("カスタム イベント名", パラメータ) を通じてイベントを呼び出せるようにします。
  5. テスト
    画像.png
  6. プロセスの簡単な図
    画像.png
<list-items slot="list-items" v-for="(item,index) in l_items" :item="item" :index="index"></list-items>
 

var vm = new Vue({
  el: "#vue",
  data: {
  l_title: "标题————",
  l_items:["AA","BBB","CCCC"]
  },
  methods: {
  removeItem: function (index){
  // 打印信息
  console.log("删除了"+this.l_items[index]);
  // 表示从 index 开始，删除 n 个元素
  this.l_items.splice(index,1);
  }
  }
  });

<!--数据绑定 ：把 items 中的每一项元素遍历出来命名为 item 再和下面的 item 绑定-->
<!--事件绑定 ：自定义一个名为 diyremove 的事件，先和vue对象中的 removeItem 方法绑定
再去到组件中的 remove 和 diyremove 事件绑定-->
<!--注意 : 属性值都要小写，大写不生效，也不会报错 ； 在自定义事件绑定方法的时候 v-on 不能缩写-->
<list-items slot="list-items" v-for="(item,index) in l_items" :item="item" :index="index" v-on:diyremove="removeItem(index)"></list-items>

13. ビュークリ

13.1 vue-cli とは

vue-cli によって公式に提供されるスキャフォールディングは、vue プロジェクト テンプレートを迅速に生成するために使用されます。
事前定義されたディレクトリ構造と基本コードは、Maven プロジェクトを作成するときとまったく同じで、スケルトン プロジェクトの作成を選択できます。このスケルトン プロジェクトはスキャフォールディングです。私たちの開発はより速くなり、
主な機能は次のとおりです。

  • 統合されたディレクトリ構造
  • ローカルデバッグ
  • ホットデプロイメント
  • 単体テスト
  • 統合パッケージングがオンライン化

13.2 必要な環境

  1. Node.js をダウンロードし、Windows 64 ビットを選択します
  2. NodeJs をインストールして次のステップに進みます
  3. インストールが成功したかどうかを確認するには、cmd で「node -v」と入力し、バージョン番号が正しく出力されるかどうかを確認してください。
  • Node.js 淘宝画像アクセラレータ (cnpm) をインストールする
  • vue-cli をインストールする
（CMD 命令）
-g 就是全局安装
npm install cnpm -g --registry=https://registry.npm.taobao.org

# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

インストール プロセスは少し時間がかかります。
インストール場所は次のとおりです: C:\Users\Administered\AppData\Roaming\npm

（CMD 命令）
 cnpm install vue-cli -g	

vue list

画像.png

13.3 Vue-cli プログラム

  1. フォルダー内で cmd を使用して myvue という名前の vue プロジェクトを作成し、webpack パッケージ化ツールでパッケージ化します。
  2. myvue プロジェクトを初期化して実行する
（CMD 命令）
 # 先找到要创建该文件的目录
 # 这里的 myvue 是项目名称，可以根据自己的需求起名
 vue init webpack myvue

画像.png
説明:
1.プロジェクト名: プロジェクト名、デフォルトで Enter を押すだけ
2.プロジェクトの説明: プロジェクトの説明、デフォルトで Enter を押すだけ
3.著者: プロジェクト作成者、デフォルトで Enter を押すだけ
4. Vue ビルド: コンパイル、最初に選択 5 vue-router のインストール: vue-router をインストールするかどうか、インストールしない場合は n を選択します (後で手動で追加する必要があります)
6. ESLintを使用してコードをリントする: コード チェックに ESLint を使用するかどうか、インストールしない場合は n を選択します(後で手動で追加する必要があります) 追加) 7.単体テストのセットアップ: 単体テストに関連し、インストールしない場合は n を選択します (後で手動で追加する必要があります) 8. Nightwatch を使用した e2e テストのセットアップ: 単体テストに関連します、インストールしない場合は n を選択します (後で手動で追加する必要があります) 9.プロジェクトの作成後に npm install を実行しますか: 作成が完了したら直接初期化します。n を選択すると、手動で実行します。結果を実行します。 !生成されたファイル





画像.png

（CMD 命令）
# 进入文件夹
cd myvue
# 安装环境
npm install --registry=https://registry.npm.taobao.org
# 启动项目
npm run dev
# 停止 ctrl + c

正常に実行された後
画像.png

14.ウェブパック

14.1 Webpackとは

Webpack は静的モジュール パッケージャーとして見ることができます。Webpack が行うことは、プロジェクトの構造を分析し、ブラウザーが直接実行できない JavaScript モジュールやその他の拡張言語 (Scss、TypeScript など) を見つけて、それらを適切なパッケージにパッケージ化することです。ブラウザで使用する形式。

14.2 Webpack を使用する理由

今日の多くの Web ページは、実際には、複雑な JavaScript コードと多数の依存関係パッケージを備えた機能豊富なアプリケーションとみなすことができます。開発の複雑さを簡素化するために、フロントエンド コミュニティでは多くの優れた実践方法が生まれています。

  1. モジュール化により、複雑なプログラムを小さなファイルに精製することができます。
  2. JavaScript をベースにした開発言語である TypeScript に似ています。これにより、現在のバージョンの JavaScript では直接使用できない機能を実装でき、後でブラウザが認識できるように JavaScript ファイルに変換できます。
  3. scss などの CSS プリプロセッサ、less...
    これらの改善により、確かに開発効率は大幅に向上しましたが、これらを使用して開発されたファイルはブラウザで認識されるために追加の処理が必要になることが多く、手動処理は非常に煩雑です。 WebPackのようなツールの登場。

14.3 Webpackのインストール

WebPack は、JS、JSX、ES 6、SASS、LESS、画像などのさまざまなリソースをモジュールとして処理して使用できるモジュール ローダーおよびパッケージング ツールです。
インストールコマンド

（CMD 命令）
 npm install webpack -g --registry=https://registry.npm.taobao.org
 npm install webpack-cli -g --registry=https://registry.npm.taobao.org

インストールが成功したかどうかをテストする

webpack -v
webpack-cli -v

14.4 設定

webpack.config.js 設定ファイルを作成する

  • エントリ: エントリ ファイル。Web パックがプロジェクトのエントリ ポイントとして使用するファイルを指定します。
  • 出力: 出力、処理されたファイルを指定されたパスに配置する WebPack を指定します。
  • module: さまざまな種類のファイルを処理するために使用されるモジュール
  • プラグイン: ホット アップデート、コードの再利用などのプラグイン。
  • 解決: 指すパスを設定します
  • watch: 監視、設定ファイルの変更後に直接パッケージ化するために使用されます
module.exports = {
  entry:"",
    output:{
    path:"",
      filename:""
  },
  module:{
    loaders:[
      {test:/\.js$/,;\loade:""}
    ]
  },
  plugins:{},
  resolve:{},
  watch:true
}

webpack コマンドを直接実行してパッケージ化する

14.5 Webpackの使用

  1. プロジェクトの作成: webpack-study
  2. JSモジュールなどのリソースファイルを配置するための modules という名前のディレクトリを作成します。
  3. modules の下にモジュール ファイルを作成します。hello.js は、JS モジュール関連のコードを記述するために使用されます。
// 暴露一个方法
exports.sayHi = function(){
    
    
  document.write("<h1>Hello World</h1>");
}
  1. modules 配下に main.js という名前のエントリーファイルを作成し、パッケージ化時にエントリー属性を設定します。
// 引入 hello.js,相当于java的对象 
var hello = require("./hello");
// 调用 hello.js 中的方法
hello.sayHi();
  1. webpack-study ディレクトリに webpack.config.js (注: ドット) 構成ファイルを作成し、webpack コマンドを使用してパッケージ化します。
// 把 module 导出
module.exports = {
    
    
  // 目标文件
  entry: './modules/main.js',
  // 输出地址
  output: {
    
    
    filename: "./js/bundle.js"
  }
}
  1. 先ほど書き込んだファイルを webpack-study ディレクトリにパックします

画像.png

  1. HTMLページで紹介されました
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="dist/js/bundle.js"></script>


</body>
</html>
  1. ページを開く
    画像.png

15.vueルーター

15.1 説明

Vue Router は、Vue.js の公式ルーティング マネージャー (パス ジャンプ) です。Vue.js のコアと深く統合されているため、単一ページのアプリケーションを簡単に構築できます。含まれる機能は次のとおりです。

  1. ネストされたルート/ビュー テーブル
  2. モジュール式のコンポーネントベースのルーティング構成
  3. ルーティングパラメータ、クエリ、ワイルドカード
  4. Vue.js トランジション システムに基づいたトランジション効果を表示する
  5. きめ細かいナビゲーション制御
  6. 自動的にアクティブ化された CSS クラスとのリンク
  7. HTML5 ヒストリー モードまたはハッシュ モード、IE9 では自動的にダウングレード
  8. カスタムスクロールバーの動作

15.2 インストール

最初の vue-cli に基づいて cmd をテストして学習します
。myvue ディレクトリに入り、実行します。

可以用
cnpm install vue-router --save-dev
没成功
npm install vue-router --save-dev --registry=https://registry.npm.taobao.org

15.3 使用法

  1. コードをクリーンアップし、src ディレクトリ内のイメージと、components ディレクトリ内のコンポーネントを削除します。
  2. スタートアッププロジェクト
  3. App.vueを変更する
  4. コンポーネント内に新しい Vue コンポーネントを作成します: Content.vue
  5. コンポーネント内に新しい Vue コンポーネントを作成します: Main.vue
  6. src の下に新しいパッケージ (ルーター) を作成し、そのパッケージ内に新しいファイル (index.js) を作成します。
  7. main.jsを変更する
  8. App.vueのテンプレート部分を変更する
  9. ページを開く
    画像.png
    画像.png
    画像.png
<template>
  <div id="app">
  </div>
</template>
<script>
  export default {
    name: "App"
  }
</script>
<style>
  #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>

<template>
  <div id="app">
    <h1>呵呵</h1>
  </div>
</template>

検出されたプロジェクトは自動的に Bulid され、ページが自動的に更新されます。
これが Vue のホット デプロイメントです。

<template>
  <h1>Content</h1>
</template>
<script>
  export default {
    name: "Content"
  }
</script>
<!-- 加上 scoped 表示只会在当前组件生效 -->
<style scoped>
</style>

<template>
  <h1>首页</h1>
</template>
<script>
  export default {
      
      
    name: "main"
  }
</script>
<style scoped>
</style>

// 导入文件
import Vue from "vue";
import VueRouter from "vue-router";
// 导入组件
import Content from "../components/Content";
import Main from "../components/Main";

// 安装路由
Vue.use(VueRouter);

// 配置导出路由
export default new VueRouter({
    
    
  routes: [
    {
    
    
      // 类似于 @RequestMapping 接收一个请求，返回一个页面
      // 路由的路径
      path: '/content',
      // 配置名称
      name: 'content',
      // 跳转的组件
      component: Content
    },
    {
    
    
      // 路由的路径
      path: '/main',
      // 配置名称
      name: 'Main',
      // 跳转的组件
      component: Main
    }
  ]
});

import Vue from 'vue'
import App from './App'
// 导入 vue-router 的路由配置
// 这里是写在 index.js 文件中的所以导入该文件
// 因为文件名是 index 会自动扫描该文件，所以index可省
// 注意！！ 这里必须写 router ，写错前端页面就报错
import router from "./router/index";

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  // 配置路由,上面的组件名
  router,
  components: {
    
     App },
  template: '<App/>'
})

<template>
  <div id="app">
    <h1>呵呵</h1>
    <!--跳转链接，点击链接显示对应内容-->
    <!--类似于原来的 <a></a> ;
    to 类似于原来的 href,后面的值就是配置的路由-->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <!--展示视图，理解为用于展示上面两个链接对应内容的区域-->
    <router-view></router-view>
  </div>
</template>

16.Vue+ElementUI

  1. vue-elementui という名前のプロジェクトを作成しますvue init webpack vue-elementui
  2. 4 つのプラグインをインストールします: vue-router、element-ui、sass-loader、node-sass
# 进入工程
cd vue-elementui
# 安装 vue-router
cnpm install vue-router --save-dev 
# 安装 element-ui
cnpm i element-ui -S 
# 安装依赖
cnpm install 
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev


测试报错：
cnpm install --save vue-hot-reload-api
  1. プロジェクトを空のプロジェクトに復元し、src の下の logo.png と HelloWorld.vue を削除し、App.vue を次のように変更します。
<template>
 </template>
 <script>
 export default {
      
      
   name: 'App'
 }
 </script>
 <style>
 #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>
  1. 新しいフォルダーの作成 ルーター: ルーティング情報の保管
    ビュー: ビュー・コンポーネントの保管
    コンポーネント: 機能コンポーネントの保管
    画像.png
  2. ビュー パッケージの下に新しいビュー コンポーネントを作成します: Main.vue
<template>
  <h1>首页</h1>
</template>
<script>
  export default {
    name: "Main"
  }
</script>
<style scoped>
</style>
  1. ビュー パッケージの下に新しいビュー コンポーネントを作成します: Login.vue
<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <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-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>
  1. ルーティング設定情報をルーターファイル:index.js に書き込みます。
import Vue from 'vue';
import VueRouter from "vue-router";

import Main from "../views/Main";
import Login from "../views/Login";

// 显式的使用导入的组件
Vue.use(VueRouter);

export default new VueRouter({
    
    
  routes: [
    {
    
    
      path: "/login",
      name: "login",
      component: Login
    },{
    
    
      path: "/main",
      name: "main",
      component: Main
    }
  ]
});
  1. main.jsを変更する
import Vue from 'vue'
import App from './App'
import router from './router'
// 导入 elementUI
import ElementUI from 'element-ui'
// 导入 elementUI 对应的 CSS
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router)
Vue.use(ElementUI)

new Vue({
    
    
  el: '#app',
  // 配置 elementUI
  render: h => h(App),
  router
})
  1. App.vueを変更する
<template>
  <div id="app">
    <!-- 因为 main.js 中配置了，element-ui 自动渲染，所以这里只需要有一个这个标签就好了 -->
    <router-view></router-view>
  </div>
</template>x
  1. プロジェクトの開始時にエラーが報告された場合は、sass-loader のバージョンをダウングレードしてください。package.json ファイルを見つけて
    画像.png
    sass-loader 属性を見つけ、
    画像.png
    それ以降のバージョン番号を ^7.3.1 に変更して、
    環境の依存関係を再インストールしてください。npm install
  2. ユーザー名とパスワードを入力してログインすると、ホームページに移動して<script>< /script> にあるLogin.vue コードが表示されます。
    画像.png

インストール手順は以前と同じです

プロジェクトを再起動し、http://localhost:8080/#/login にアクセスします。
画像.png

17. ルートのネスト

  • ネストされたルーティングはサブルーティングとも呼ばれ、実際のアプリケーションでは通常、次のようなネストされたコンポーネントの複数の層で構成されます。
    画像.png
  1. ビューで新しいユーザー パッケージを作成する
  2. ユーザー パッケージの下に、新しい List.vue を作成します。
<template>
  <h1>用户列表</h1>
</template>
<script>
  export default {
    name: "List"
  }
</script>
<style scoped>
</style>
  1. ユーザー パッケージの下に、新しい Profile.vue を作成します。
<template>
  <h1>个人信息</h1>
</template>
<script>
  export default {
    name: "Profile"
  }
</script>
<style scoped>
</style>
  1. Main.vueを変更してサイドバーを追加する
<template>
  <div>
  <el-container>
  <el-aside width="200px">
  <el-menu :default-openeds="['1']">
  <el-submenu index="1">
  <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
  <el-menu-item-group>
  <el-menu-item index="1-1">
  <!--插入的地方-->
  <router-link to="/user/profile">个人信息</router-link>
  </el-menu-item>
  <el-menu-item index="1-2">
  <!--插入的地方-->
  <router-link to="/user/list">用户列表</router-link>
  </el-menu-item>
  </el-menu-item-group>
  </el-submenu>
  <el-submenu index="2">
  <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
  <el-menu-item-group>
  <el-menu-item index="2-1">分类管理</el-menu-item>
  <el-menu-item index="2-2">内容列表</el-menu-item>
  </el-menu-item-group>
  </el-submenu>
  </el-menu>
  </el-aside>

  <el-container>
  <el-header style="text-align: right; font-size: 12px">
  <el-dropdown>
  <i class="el-icon-setting" style="margin-right: 15px"></i>
  <el-dropdown-menu slot="dropdown">
  <el-dropdown-item>个人信息</el-dropdown-item>
  <el-dropdown-item>退出登录</el-dropdown-item>
  </el-dropdown-menu>
  </el-dropdown>
  </el-header>
  <el-main>
  <!--在这里展示视图-->
  <router-view />
  </el-main>
  </el-container>
  </el-container>
  </div>
  </template>
  <script>
  export default {
    
    
  name: "Main"
}
  </script>
  <style scoped lang="scss">
  .el-header {
    
    
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
.el-aside {
    
    
  color: #333;
}
</style>
  1. Index.js、ルーティング情報を修正
import Vue from 'vue';
import VueRouter from "vue-router";

import Main from "../views/Main";
import Login from "../views/Login";

import List from "../views/user/List";
import Profile from "../views/user/Profile";

// 显式的使用导入的组件
Vue.use(VueRouter);

export default new VueRouter({
    
    
  routes: [
    {
    
    
      path: "/login",
      name: "login",
      component: Login
    },{
    
    
      path: "/main",
      name: "main",
      component: Main,
      // 嵌套路由
      children: [
        {
    
    
          path: "/user/profile",
          component: Profile
        },{
    
    
          path: "/user/list",
          component: List
        }
      ]
    }
  ]
});
  1. Main.vue にルーティング リンクを挿入してビューを表示します
    画像.png
    画像.png
  • ルーティングを変更するには2 つのモードがあります: 1. ハッシュ: パスに # ; 2. 履歴: パスに # を付けずにファイルindex.jsを変更します。
    画像.png
  1. ページを開く
    画像.png

18. パラメータの受け渡しとリダイレクト

18.1 ルートを介してパラメータを渡す

  1. フロントエンドの <router-link> タグを変更します。
    画像.png
  2. Index.jsのルーティング情報を変更する
    画像.png
  3. フロントエンド ページのパラメータを取り出し、Profile.vue を変更します。これはルーターではなくルートであることに注意してください。
    画像.png
  4. ページを開く
    画像.png

18.2 props を介してパラメータを渡す

  • ログイン完了後にユーザー名を表示する
  1. 修改 Login.vue画像.png
  2. Index.jsを変更する
    画像.png
  3. ホームページ取得：Main.vue
    画像.png

18.3 リダイレクト

  1. Index.jsを変更してリダイレクト情報を追加する
    画像.png
  2. 修改 Main.vue
    画像.png
  3. ページを開く

画像.png

19. 404 とルーティングフック

19.1 404

  1. 新しいビューコンポーネントを作成します: 404.vue
  2. 404 コンポーネントをルーティング情報に構成します:index.js
    画像.png
  3. ページを開始し、存在しないパスに自由にアクセスします
<template>
  <div>
    <h1>404,页面走丢了！</h1>
  </div>
</template>
<script>
  export default {
    name: "404"
  }
</script>
<style scoped>
</style>

画像.png

19.2 ルーティングフック

1. 基本的な使い方

  • beforeRouteEnter: ルートに入る前に実行されるフック
  • beforeRouteLeave: ルートを離れる前に実行されるフック
  1. Profile.vueを変更する
    画像.png
  2. ページを開く
  • パラメータの説明:
    • to: ルートがジャンプする先のパス情報
    • from: パスジャンプ前のパス情報
    • 次へ: ルーティングの制御パラメータ
      • next()は次のページにジャンプします
      • next('/path') は、ルートのジャンプ方向を変更して、別のルートにジャンプします。
      • next(false) 元のページに戻ります
      • next((vm)=>{}) は beforeRouteEnter でのみ使用できます。vm はコンポーネント インスタンスです

2. フック関数で非同期リクエストを使用する

  1. Axios をインストールする
  2. main.js は Axios を参照します
  3. データを準備するには、静的ディレクトリ内のファイルのみにアクセスできるため、静的ファイルをこのディレクトリに置きます。static の下に新しいフォルダー モック (テスト データ) を作成し、新しい data.json を作成します
  4. beforeRouteEnterで非同期リクエストを作成し、Profile.vueを変更します
  5. /user/profileページのコンソールにアクセスし、取得したデータを出力します。
cnpm install --save vue-axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

{
    
    
  "name": "呵呵",
  "url": "https://blog.csdn.net/weixin_44449838",
  "page": 123,
  "isNonProfit": true,
  "address": {
    
    
    "street": "塔克拉玛干沙漠",
    "city": "新疆",
    "country": "中国"
  },
  "links": [
    {
    
    
      "name": "Google",
      "url": "http://www.google.com"
    },
    {
    
    
      "name": "Baidu",
      "url": "http://www.baidu.com"
    }
  ]
}

export default {
    
    
  //第二种取值方式
  // props:['id'],
  name: "UserProfile",
  //钩子函数 过滤器
  beforeRouteEnter: (to, from, next) => {
    
    
    //加载数据
    console.log("进入路由之前")
    next(vm => {
    
    
      //进入路由之前执行getData方法
      vm.getData()
    });
  },
  beforeRouteLeave: (to, from, next) => {
    
    
    console.log("离开路由之前")
    next();
  },
  //axios
  methods: {
    
    
    getData: function () {
    
    
      this.axios({
    
    
        method: 'get',
        url: 'http://localhost:8080/static/mock/data.json'
      }).then(function (response) {
    
    
        console.log(response)
      })
    }
  }
}

おすすめ

転載: blog.csdn.net/qq_53517370/article/details/128875793
おすすめ
ランキング
Python 描画 3D 動的ヒストグラム コード チュートリアル
[vue3 共通エラー 5] Uncaught (in Promise) TypeError: xxx は関数ではありません
シンプルアップロードExcelファイルやデータベースにデータを追加
springboot における import アノテーションの役割
numpy 多维矩阵的维度交换
WMS システム - ウェーブ管理
Redis（7）マスター/スレーブレプリケーション
三北斗七星星座コアグローバルシステムの導入は完了です！グローバルネットワークを推進するために、
sql server语法——排序查询
続行することはできません立ち往生
アーカイブ
もっと
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)

コードワールド

© 2018 codetd.com