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 の他の関連記事をご覧ください。

以下もご興味があるかもしれません: