次のチェックnextTick はブラウザに組み込まれているのではなく、Vue.js によって提供される関数です。 nextTick 関数は、次の DOM 更新サイクル後に実行されるコールバック関数 cb を受け取ります。たとえば、次の例をご覧ください。 <テンプレート> <div> <p v-if="show" ref="node">コンテンツ</p> <button @click="handleShow">表示</button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ () { 戻る { 表示:偽 } }, メソッド: { ハンドル表示() { this.show = true; console.log(this.$refs.node); // 未定義 this.$nextTick(() => { console.log(this.$refs.node); // <p>コンテンツ</p> }); } } } </スクリプト> show が true に設定されている場合、p ノードはまだレンダリングされていないため、undefined が出力されます。nextTick コールバックでは、p がレンダリングされているため、ノードを正しく出力できます。 nextTick のソース コードは github.com/vuejs/vue/b… にあります。ご覧のとおり、Vue.js は nextTick を実装するために Promise、setTimeout、setImmediate の 3 つのメソッドを使用しています。環境によって使用されるメソッドは異なります。 v-model 構文シュガーv-model は、<input> などのフォーム要素上のデータの双方向バインディングによく使用されます。ネイティブ要素に加えて、カスタムコンポーネントでも使用できます。 v-model は、props: value と events: input に分解できる構文シュガーです。つまり、コンポーネントは value という名前のプロパティと input という名前のカスタム イベントを提供する必要があります。これら 2 つの条件が満たされている場合、ユーザーはカスタム コンポーネントで v-model を使用できます。たとえば、次の例では数値セレクターを実装します。 <テンプレート> <div> <button @click="increase(-1)">1 減少</button> <span style="color: red;padding: 6px">{{ 現在の値 }}</span> <button @click="increase(1)">1 増加</button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'InputNumber', 小道具: { 価値: { タイプ: 数値 } }, データ () { 戻る { 現在の値: this.value } }, 時計: 値 (val) { this.currentValue = val; } }, メソッド: { 増加(値) { this.currentValue += val; this.$emit('input', this.currentValue); } } } </スクリプト> 通常、プロパティはコンポーネント内で変更することはできず、親を通じて変更する必要があります。したがって、v-model の実装には通常、currentValue と呼ばれる内部データがあり、最初に value から値を取得します。value が変更されると、watch を通じてリアルタイムで更新されます。コンポーネントは value の値を変更するのではなく、currentValue を変更します。また、変更された値をカスタム イベント入力を通じて親コンポーネントに送信します。値を受け取った後、親コンポーネントは value を変更します。したがって、上記の数値セレクター コンポーネントは、次の 2 つの方法で使用できます。 <テンプレート> <InputNumber v-model="値" /> </テンプレート> <スクリプト> '../components/input-number/input-number.vue' から InputNumber をインポートします。 エクスポートデフォルト{ コンポーネント: { InputNumber }, データ () { 戻る { 値: 1 } } } </スクリプト> または: <テンプレート> <InputNumber :value="値" @input="ハンドル変更" /> </テンプレート> <スクリプト> '../components/input-number/input-number.vue' から InputNumber をインポートします。 エクスポートデフォルト{ コンポーネント: { InputNumber }, データ () { 戻る { 値: 1 } }, メソッド: { ハンドル変更 (値) { this.value = val; } } } </スクリプト> value と input の名前を使用したくない場合は、Vue.js 2.2.0 以降では、名前を指定するためのモデル オプションが提供されているため、数値セレクター コンポーネントは次のように記述することもできます。 <テンプレート> <div> <button @click="increase(-1)">1 減少</button> <span style="color: red;padding: 6px">{{ 現在の値 }}</span> <button @click="increase(1)">1 増加</button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'InputNumber', 小道具: { 番号: { タイプ: 数値 } }, モデル: { プロパティ: '数値'、 イベント: '変更' }, データ () { 戻る { 現在の値: this.number } }, 時計: 値 (val) { this.currentValue = val; } }, メソッド: { 増加(値) { this.currentValue += val; this.$emit('number', this.currentValue); } } } </スクリプト> モデル オプションでは、value と input の代わりに prop と event の名前を指定できます。これは、これらの 2 つの名前が一部のネイティブ フォーム要素で他の用途に使用されるためです。 .sync 修飾子Vue.js 1.x を使用したことがある場合は、.sync に精通している必要があります。 1.x では、.sync を使用して双方向にデータをバインドできます。つまり、親コンポーネントと子コンポーネントの両方がデータを変更でき、双方向に応答します。この使用法は、Vue.js 2.x では非推奨です。目的は、子コンポーネントが誤って親コンポーネントの状態を変更するのを防ぐために、親コンポーネントと子コンポーネントを可能な限り分離することです。 ただし、Vue.js バージョン 2.3.0 では .sync 修飾子が追加されましたが、その使用方法は 1.x とまったく同じではありません。 2.x の .sync は、真の双方向バインディングではなく、構文シュガーです。データの変更は、子コンポーネントではなく、親コンポーネントで実行されます。 引き続き数値セレクターの例を使用しますが、今回は v-model の代わりに .sync を使用し、次のように書き直すことができます。 <テンプレート> <div> <button @click="increase(-1)">1 減少</button> <span style="color: red;padding: 6px">{{ 値 }}</span> <button @click="increase(1)">1 増加</button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'InputNumber', 小道具: { 価値: { タイプ: 数値 } }, メソッド: { 増加(値) { this.$emit('update:value', this.value + val); } } } </スクリプト> 使用例: <テンプレート> <InputNumber :value.sync="値" /> </テンプレート> <スクリプト> '../components/input-number/input-number.vue' から InputNumber をインポートします。 エクスポートデフォルト{ コンポーネント: { InputNumber }, データ () { 戻る { 値: 1 } } } </スクリプト> v-model の実装よりもはるかにシンプルに見えますが、効果は同じです。コンポーネントには v-model は 1 つしか存在できませんが、.sync は複数設定できます。 .sync は優れていますが、次のような制限もあります。
$セット$set は前のセクションで紹介しました。これは次の 2 つの状況で使用されます。 JavaScript の制限により、Vue は次の配列の変更を検出できません。
JavaScript の制限により、Vue はオブジェクト プロパティの追加または削除を検出できません。 例えば、 // 配列エクスポートデフォルト{ データ () { 戻る { 項目: ['a', 'b', 'c'] } }, メソッド: { ハンドラ(){ this.items[1] = 'x'; // 応答なし } } } $set の使用: // 配列エクスポートデフォルト{ データ () { 戻る { 項目: ['a', 'b', 'c'] } }, メソッド: { ハンドラ(){ this.$set(this.items, 1, 'x'); // レスポンシブです } } } オブジェクトを例に挙げます。 // オブジェクトエクスポートデフォルト{ データ () { 戻る { アイテム: 1: 1 } } }, メソッド: { ハンドラ(){ this.item.b = 2; // 応答なし } } } $set の使用: // オブジェクトエクスポートデフォルト{ データ () { 戻る { アイテム: 1: 1 } } }, メソッド: { ハンドラ(){ this.$set(this.item, 'b', 2); // レスポンシブです } } } さらに、次の配列メソッドは、応答性の高いビューの更新をトリガーできます。 push()、pop()、shift()、unshift()、splice()、sort()、reverse()。 もう 1 つのトリックは、最初に配列をコピーし、次にそれをインデックスで変更し、元の配列全体を置き換えることです。次に例を示します。 ハンドラ(){ const データ = [...this.items]; データ[1] = 'x'; this.items = データ; } 計算プロパティセット計算プロパティはシンプルでよく使用されますが、ほとんどの場合、計算を通じて他の状態に依存するデータを取得するために、通常の従来の書き込み方法であるデフォルトの get メソッドを使用します。例えば: 計算: { フルネーム () { `${this.firstName} ${this.lastName}` を返します。 } } ここでの fullName は、実際には関数ではなくオブジェクトとして記述できます。ただし、関数形式では、デフォルトで get メソッドを使用します。オブジェクトとして記述する場合は、set メソッドも使用できます。 計算: { フルネーム: 得る () { `${this.firstName} ${this.lastName}` を返します。 }, 設定(値) { const names = val.split(' '); this.firstName = 名前[0]; this.lastName = names[names.length - 1]; } } } 計算プロパティは、ほとんどの場合、読み取り専用です。set を使用した後は、書き込みが可能になります。たとえば、上記の例では、this.fullName = 'Aresn Liang' を実行すると、計算セットが呼び出され、firstName と lastName が Aresn と Liang に割り当てられます。 要約するこれで、Vue.js の見落としがちな API についての記事は終了です。Vue.js の見落としがちな API についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.20 インストールチュートリアルとインストールに関する問題に関する詳細なチュートリアル
>>: Linux 上の Vim で色とテーマを変更する方法
WindowsにTomCatをインストールするこの記事では、WindowsプラットフォームにTomC...
この記事では、ウォーターフォールフローが底に達したときにデータを動的にロードするためのjsの具体的な...
MySQL 8.0.20 のインストールおよび設定方法は、参考としてグラフィック チュートリアルにま...
<br />123WORDPRESS.COM の以前のチュートリアルでは、Web ページ...
よくある質問ユーザー ''@'localhost' によるデータベー...
Vmvare が仮想マシンのディスク サイズを設定した後、ディスク領域が不足していることがわかりまし...
Dockerfile でのボリュームのマウントと docker -v コマンドによるマウントには明ら...
上記:このドキュメントは、3 台の仮想マシンが相互に ping を実行できること、ファイアウォールが...
インデックスの2つの主要なカテゴリ使用されるストレージエンジン: MySQL 5.7 InnoDBク...
ネットで検索してみたところ、多くの面接でモバイル適応方法について質問されることが分かりました。最近い...
フロントエンドは、技術が急速に進化するだけでなく、知っておくべき事柄が多すぎるという理由で大変な仕事...
マウスが画像の上を通過したときに画像のハイパーリンクを変更する方法:コードをコピーコードは次のとおり...
序文以前の非MKレコードを再編成するためのMySQLの学習説明する有効になっていない場合、データベー...
目次MySql8.0 トランザクション分離レベルエラーの表示質問コマンドは次のように変更されますMy...
コードをコピーコードは次のとおりです。 <hr style="width:490px...