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 を使用して年カルーセル選択効果をネイティブに実装する例

推薦する

MySQLデータベーステーブルの容量を確認する方法の例

この記事では、MySQL のデータベース テーブルの容量を確認するためのコマンド ステートメントを紹...

JSタイマーを使用して要素を移動する

JS タイマーを使用して、要素に移動する効果のあるメソッドを作成します。実装のアイデアは、まず要素の...

CocosCreatorメッセージ配信メカニズムの詳細な説明

概要この記事は、ゲームビジネスアーキテクチャに関連するコンテンツの紹介から始まります。ゲームビジネス...

要素動的ルーティングブレッドクラムの実装例

マスターするには: localStorage、コンポーネントのカプセル化えーと、GIF に変換したビ...

CSS3は水平方向の中央揃え、垂直方向の中央揃え、水平方向と垂直方向の中央揃えのサンプルコードを実装しています。

フロントエンドの担当者であれば、面接でも仕事中でも、「CSS を使用して中央揃えにする」という効果に...

ドロップダウンリスト選択ボックスを実装するJavaScript

この記事の例では、ドロップダウンリスト選択ボックスを実装するためのJavaScriptの具体的なコー...

CentOS8でのnmcliの使い方の詳しい説明

RHEL8/CentOS8 に基づく一般的な nmcli コマンド # IP を表示する (ifco...

VMware 仮想マシンの 3 つの接続方法の例の分析

NATこのようにして、仮想マシンのネットワーク カードはホストの VMnet8 に接続されます。この...

Vue ターンテーブル抽選の簡単な実装

この記事では、ホイール抽選を簡単に実装するためのVueの具体的なコードを参考までに共有します。具体的...

複数のプロジェクトをデプロイする Docker nginx の例

前提条件1. ローカルコンピュータとサーバーにDockerがインストールされています。ダウンロード方...

MySQL開発標準と使用スキルの概要

1. 命名規則1. データベース名、テーブル名、フィールド名には小文字を使用し、アンダースコアで区切...

HTML+CSS ボックスモデルの例 (円、半円など) 「border-radius」はシンプルで使いやすい

多くの友人は、フロントエンドを学習するときに、ボックス モデルがデフォルトで正方形であることに気付き...

IE6 の iframe の水平スクロール バーの解決策

状況は以下のとおりです: (PS: 赤いボックスは iframe 領域を表し、灰色の四角形は上記の ...

JavaScript オブジェクト指向の実践の詳細説明: カプセル化とオブジェクトのドラッグ

目次概要1. DOM要素をアニメーション化する方法2. 現在のブラウザでサポートされている変換互換の...

...