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. 作成中のライフサイクル機能: 2. 運用中のライフサイクル機能: 3. 破壊中のライフサイクル機能: 例:<!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を提供します。
2. パラメータの紹介すべて 3 つのパラメータを受け入れます: 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 での使用方法の概要を含む)
>>: js を使用して年カルーセル選択効果をネイティブに実装する例
序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...
目次序文1. 効果は図の通りです2. 具体的な実施手順1. Vuexの紹介2.webscoked実装...
1. フレックスレイアウト 。父親 { ディスプレイ: フレックス; コンテンツの中央揃え: 中央;...
序文Linux グループは、Linux でユーザー アカウントを管理するために使用される組織単位です...
Linux では、アプリケーションをダウンロードしてインストールすると、起動時にアプリケーション名...
最近の勉強で、GitHub でレイアウトの練習をいくつか見つけたのですが、レイアウトにまったく慣れて...
目次1. はじめに2. 解決策2.1 ファイアウォールを設定してポートを開く2.3 ポートを確認し、...
目次1. はじめに2. 関数型プログラミングとは何ですか? 3. 純粋関数(関数型プログラミングの基...
目次MYSQL メタデータ ロック (MDL ロック) 学習理論とロック タイプ テスト1. 予備的...
場合によっては、SQL ステートメントが通常どおり、非常に速く実行される状況に遭遇することがあります...
随分前に「Patterns for Sign Up & Ramp Up」を読み終えました。今...
最近、Bootstrap を使って Web サイトを開発しています。表を処理していたところ、PC で...
mysql のような php switch case ステートメント。 xxフィールドを選択、ケース...
セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に...
CUDA インストール cuda をダウンロードサポートされているcudaバージョンを表示するには...