Vue フィルター、ライフサイクル関数、vue-resource の簡単な紹介

Vue フィルター、ライフサイクル関数、vue-resource の簡単な紹介

1. フィルター

例:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <script src="vue.js"></script>
</head>
<本文>
 <div id="アプリ">
   //msg の内容の abc を 'Hello 123' に置き換え、最後に '========' を追加します。
  <p>{{ msg | msgFormat('Hello', '123') | テスト }}</p>
 </div>

 <スクリプト>
  // msgFormat という名前の Vue グローバル フィルターを定義します
  Vue.filter('msgFormat', 関数(msg, arg, arg2) {
   // 文字列置換メソッドでは、最初のパラメータは文字列を書き込むことに加えて、通常の戻り値も定義できます msg.replace(/abc/g, arg + arg2)
  })

  Vue.filter('test', 関数(メッセージ) {
   戻りメッセージ + '========'
  })


  // Vueインスタンスを作成し、ViewModelを取得します
  var vm = 新しい Vue({
   el: '#app',
   データ: {
    メッセージ: 'abc、abcdefg、ハハハ'
   },
   メソッド: {}
  });
 </スクリプト>
</本文>
</html>

2. Vueのライフサイクル機能

1.ライフサイクルとは何か

Vue インスタンスの作成、操作、破棄に至るまで、常にさまざまなイベントが発生し、これらを総称してライフサイクルと呼びます。

2. 主なライフサイクル機能分類

1. 作成中のライフサイクル機能:
beforeCreate: インスタンスがメモリ内に作成されたばかりです。この時点では、データとメソッドの属性はまだ初期化されていません。
created: インスタンスがメモリ内に作成されました。データとメソッドが作成されました。テンプレートはまだコンパイルされていません。
beforeMount: テンプレートはコンパイルされていますが、まだページにマウントされていません
マウント済み: この時点で、コンパイルされたテンプレートは、表示用にページで指定されたコンテナにマウントされています。

2. 運用中のライフサイクル機能:
beforeUpdate: この関数は、状態が更新される前に実行されます。この時点では、データ内の状態値は最新ですが、DOM ノードがまだ再レンダリングされていないため、インターフェイスに表示されるデータはまだ古いままです。
updated: この関数はインスタンスが更新された後に呼び出されます。この時点で、データ内のステータス値とインターフェースに表示されるデータが更新され、インターフェースが再レンダリングされました。

3. 破壊中のライフサイクル機能:
beforeDestroy: インスタンスが破棄される前に呼び出されます。この段階では、インスタンスはまだ完全に使用可能です。
destroy: Vue インスタンスが破棄された後に呼び出されます。呼び出し後、Vue インスタンスによって指し示されるすべてのものがバインド解除され、すべてのイベント リスナーが削除され、すべての子インスタンスが破棄されます。

例:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <script src="vue.js"></script>
</head>
<本文>
<div id="アプリ">
  <input type="button" value="メッセージの変更" @click="msg='いいえ'">
  <h3 id="h3">{{ メッセージ }}</h3>
</div>

<スクリプト>
  var vm = 新しい Vue({
    el: '#app',
    データ: {
      メッセージ: 'OK'
    },
    メソッド: {
      見せる() {
        console.log('実行されたメソッドを表示')
      }
    },
    作成前() {
      アラート('beforeCreate1')
    //これを表示します()
    // 注意: beforeCreate ライフサイクル関数が実行されると、データとメソッド内のデータはまだ初期化されません},
     created() { // これは2番目に遭遇したライフサイクル関数です alert('created2')
    // this.show()
    // create では、データとメソッドが初期化されています。
    // methods 内のメソッドを呼び出したり、data 内のデータを操作したりする場合は、最初は create 内でのみ操作できます},
   beforeMount() { // これは3番目に遭遇したライフサイクル関数であり、テンプレートがメモリ内で編集されたが、テンプレートがまだページにレンダリングされていないことを示しています。alert('beforeMount3')
    // beforeMount が実行されると、ページ内の要素は実際には置き換えられず、前に書き込まれたテンプレート文字列だけが置き換えられます},
   mounted() { // これは 4 番目に遭遇したライフサイクル関数であり、メモリ内のテンプレートが実際にページにマウントされ、ユーザーがレンダリングされたページをすでに見ることができることを示しています。alert('mounted4')
    // 注意: マウントはインスタンス作成中の最後のライフサイクル関数です。マウントが実行されると、インスタンスが完全に作成されたことを意味します。この時点で、他の操作が行われない場合、このインスタンスはメモリ内に静かに静止します。

   // 次に 2 つの実行中のイベントがあります beforeUpdate() { // この時点では、インターフェースが更新されていないことを意味します [データは更新されましたか? データは確実に更新されました。

    アラート('beforeUpdate の変更')

    // 結論: beforeUpdate を実行すると、ページに表示されるデータはまだ古いままです。この時点ではデータは最新であり、ページはまだ最新のデータと同期されていません},
   更新された() {
    console.log('インターフェース上の要素の内容:' + document.getElementById('h3').innerText)
    console.log('data 内のメッセージデータは:' + this.msg)
    // 更新イベントが実行されると、ページとデータが同期され、すべて最新の状態になります}
  })
</スクリプト>
</本文>
</html>

3. vueリソース

GitHub アドレス: https://github.com/pagekit/vue-resource

1. vue-resourceのリクエストAPIはRESTスタイルで設計されています。7つのリクエストAPIを提供します。

  • get(url, [データ], [オプション]); ****
  • head(url,[データ],[オプション]);
  • post(url, [データ], [オプション]); ****
  • put(url, [データ], [オプション]);
  • patch(url, [データ], [オプション]);
  • 削除(url, [データ], [オプション]);
  • jsonp(url, [データ], [オプション]); ****

2. パラメータの紹介

すべて 3 つのパラメータを受け入れます:
url (文字列)、リクエストアドレス。オプション オブジェクトの url プロパティによって上書きできます。

data (オプション、文字列またはオブジェクト) は送信されるデータであり、オプション オブジェクトのデータ属性によって上書きできます。

オプションオブジェクト

パラメータ タイプ 説明

url 文字列 要求されたURL
method string リクエストのHTTPメソッド。例: 'GET'、'POST'、またはその他のHTTPメソッド body Object、FormData string リクエスト本体
params オブジェクト リクエスト URL パラメータ オブジェクト、取得
ヘッダー オブジェクトリクエストヘッダー サードパーティのリクエストデータにはタイムアウトが必要です 数値 リクエストのタイムアウトはミリ秒単位です (0 はタイムアウトなしを意味します)
before function(request) リクエストが送信される前の処理関数。jQuery の beforeSend 関数に似ています。 progress function(event) ProgressEvent コールバック処理関数 credentials boolean クロスドメイン リクエストに認証情報が必要かどうかを示します。 emulateHTTP boolean PUT、PATCH、DELETE リクエストを HTTP POST として送信し、リクエスト ヘッダーの X-HTTP-Method-Override を設定します。
emulateJSON boolean リクエスト本文を application/x-www-form-urlencoded コンテンツタイプとして送信します

3. 例

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <script src="vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-resource"></script>

</head>
<本文>
<div id="アプリ">
  <input type="button" value="リクエストを取得" @click="getInfo">
  <input type="button" value="投稿リクエスト" @click="postInfo">
  <input type="button" value="jsonp リクエスト" @click="jsonpInfo">
 </div>

 <スクリプト>
  // Vueインスタンスを作成し、ViewModelを取得します
  var vm = 新しい Vue({
   el: '#app',
   データ: {}、
   メソッド: {
    getInfo() { // GETリクエストを開始する // GETリクエストを開始した後、.thenを使用して成功したコールバック関数を設定します this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
      // result.body を通じてサーバーから返された成功データを取得します // console.log(result.body)
     })
    },
    postInfo() { // 投稿リクエストを開始する application/x-wwww-form-urlencoded
     // 手動で開始された Post リクエスト。デフォルトではフォーム形式がないため、一部のサーバーでは処理できません // post メソッドの 3 番目のパラメーターを通じて、{ emulateJSON: true } は送信されたコンテンツ タイプを通常のフォーム データ形式に設定します this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
      コンソールログ(結果本体)
     })
    },
    jsonpInfo() { // JSONPリクエストを開始します this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
      コンソールログ(結果本体)
     })
    }
   }
  });
 </スクリプト>
</本文>
</html>

上記は、Vue フィルター、ライフサイクル関数、vue-resource の簡単な紹介です。Vue フィルター、ライフサイクル関数、vue-resource の詳細については、123WORDPRESS.COM の他の関連記事をご覧ください。

以下もご興味があるかもしれません:
  • Vue のライフサイクルとフック関数の詳細な説明と典型的な面接の質問
  • Vue ライフサイクルの紹介とフック関数の詳細な説明
  • Vue ライフサイクルとフック関数の簡単な例
  • Vue の親子コンポーネントライフサイクルの実行順序とフック関数の詳細な理解
  • Vueライフサイクル機能の詳細な説明

<<:  テンプレートタグの使用方法の詳細な説明(Vue での使用方法の概要を含む)

>>:  js を使用して年カルーセル選択効果をネイティブに実装する例

推薦する

Nginx を使用してフロントエンドのクロスドメイン問題を解決する方法

序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...

Websocket+Vuexはリアルタイムチャットソフトウェアを実装します

目次序文1. 効果は図の通りです2. 具体的な実施手順1. Vuexの紹介2.webscoked実装...

CSS3 で高さと幅を不定にして垂直と水平に中央揃えするいくつかの方法

1. フレックスレイアウト 。父親 { ディスプレイ: フレックス; コンテンツの中央揃え: 中央;...

Linux でユーザーをグループに追加する 4 つの方法の概要

序文Linux グループは、Linux でユーザー アカウントを管理するために使用される組織単位です...

Linux 環境変数の設定方法のまとめ (.bash_profile と .bashrc の違い)

Linux では、アプリケーションをダウンロードしてインストールすると、起動時にアプリケーション名...

CSS でフロートとマージンを混合するサンプルコード

最近の勉強で、GitHub でレイアウトの練習をいくつか見つけたのですが、レイアウトにまったく慣れて...

Alibaba Cloud Server Tomcatにアクセスできません

目次1. はじめに2. 解決策2.1 ファイアウォールを設定してポートを開く2.3 ポートを確認し、...

JavaScript 関数型プログラミングの基礎

目次1. はじめに2. 関数型プログラミングとは何ですか? 3. 純粋関数(関数型プログラミングの基...

MYSQL メタデータ ロック (MDL ロック) の理論とロック タイプ テスト

目次MYSQL メタデータ ロック (MDL ロック) 学習理論とロック タイプ テスト1. 予備的...

MySQLのパフォーマンスが突然低下する理由

場合によっては、SQL ステートメントが通常どおり、非常に速く実行される状況に遭遇することがあります...

登録フォームのデザインルール

随分前に「Patterns for Sign Up & Ramp Up」を読み終えました。今...

レスポンシブフレームワークのテーブルヘッダーの自動改行問題に対する簡単な解決策

最近、Bootstrap を使って Web サイトを開発しています。表を処理していたところ、PC で...

MySQL のグループ分けの例

mysql のような php switch case ステートメント。 xxフィールドを選択、ケース...

CSS セレクタの 4 つのカテゴリ: 基本、組み合わせ、属性、疑似クラス

セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に...

Ubuntu 20.04 CUDA & cuDNN のインストール方法 (グラフィカル チュートリアル)

CUDA インストール cuda をダウンロードサポートされているcudaバージョンを表示するには...