参照参照
jquery はプログラマーが DOM を操作するプロセスを簡素化します
Vue の利点: MVVM vue では、プログラマーは DOM を操作する必要がありません。データを維持するだけです！(データ ドリブン ビュー)
結論: vue プロジェクトでは、jQuery をインストールして使用することは強くお勧めしません! ! !
1.参照参照とは
-
ref は、開発者がjQuery に依存せずにDOM 要素またはコンポーネントの参照を取得できるようにするために使用されます。
-
各 vue コンポーネント インスタンスには、対応する DOM 要素またはコンポーネントの参照を格納する$refsオブジェクトが含まれています。
-
デフォルトでは、コンポーネントの $refs は one を指します
空对象。
次のコードは、デフォルトで $refs が空のオブジェクトを指していることを示すために、コンポーネントのインスタンス オブジェクトを取得するためのものです。
$ で始まるものはすべて vue の組み込みメンバーです
2. ref を使用して DOM 要素を参照する
ref を使用してページ上の DOM 要素を参照する場合は、次のように実行できます。
3. ref を使用してコンポーネント インスタンスを参照する
ref を使用してページ上のコンポーネント インスタンスを参照する場合は、次のように実行できます。
このようにして、コンポーネントのインスタンスを取得することで、my-counterコンポーネントで add() メソッドを呼び出すことができます。
ref に名前を付けるときは、ref の認識を容易にするために最後に Ref を追加することをお勧めします
4. 以下は ref クリです:テキスト ボックスとボタンのオンデマンド切り替えを制御します
ブール値inputVisibleを使用して、コンポーネント内のテキスト ボックスとボタンのオンデマンド切り替えを制御します。サンプルコードは次のとおりです。
5.テキスト ボックスが自動的にフォーカスされるようにする
テキスト ボックスが表示された後、すぐにフォーカスを取得したい場合は、それに ref を追加して、ネイティブ DOM オブジェクトの.focus()メソッドを呼び出すことができます。サンプルコードは次のとおりです。
次のエラーが報告されます。
このエラーはしばしばフロント エンドで発生します。つまり、「フォーカス」は未定義ではありませんが、プロパティまたはメソッドを呼び出す前のものは未定義です。
この時点では有効になりません。実行が完了するとthis.inputVisible = true、this.$refs.ipt.focus()ページがすぐに実行されてレンダリングされるため、 this.$refs.ipt は未定義です
6. this. $nextTick (cb) メソッド
コンポーネントの$nextTick(cb)メソッドは、次の DOM 更新サイクルまで cb コールバックの実行を延期します。コンポーネントの DOM 更新が完了するまで待ってから、cb コールバック関数を実行するというのが一般的な理解です。これにより、cb コールバック関数が最新の DOM 要素で動作できることが保証されます。
ライフ サイクル関数 updated を使用しない理由は、入力がボタンに切り替えられたときでも update がトリガーされるためです. この時点では入力がないため、'ipt' はエラーを報告しません.