vue.jsを使用する際に注意すべきことは何ですか

vue.js を使用する際の注意事項: 1. フィルターは主に単純なテキスト変換に使用されます; 2. 計算とメソッドの違い; 3. キーの使用; 4. 配列の使用; 5 . コンポーネントの使用 ; 6. コンポーネント通信。

この記事の環境：windows10、vue2.9、Dell G3パソコン。

(学習ビデオ共有: javascript ビデオ チュートリアル)

vue.js を使用する場合は、次の問題に注意する必要があります:

1.フィルターは主に単純な目的で使用されます。テキスト変換の場合、複雑なデータ変換を実装したい場合は、計算された属性を使用する必要があります。

2、命令の使用

• #v-bind基本的に、id、class、href、src などの HTML 要素の属性に使用されます。

• v-on は、click、dblclick、keyup などのイベント リスナーをバインドするために使用されます。 、mousemove など。メソッド内のこれは、現在の Vue インスタンスを指します

• #v-show はテンプレートでは使用できません

#- v-ifおよび v-show 使用シナリオ
v-if 条件が false の場合、レンダリング要素はコンパイルされません。 v-show は単純な CSS プロパティ スイッチであり、true/false に関係なくコンパイルされます。 v-if は、条件が頻繁に変化しないシナリオに適しています。 v-show は、頻繁に切り替わる条件に適しています。
#3. 計算式とメソッドの違い

##メソッドは括弧 () であり、括弧なしで計算されます。

• computed は依存関係キャッシュに基づいており、関連する依存関係が変更された場合にのみ再検証されます。

• メソッド 再レンダリングするとき、関数は常に再呼び出しされて実行されます。

• 4. キーの使用

Vue が要素をレンダリングするとき、効率を考慮して、既存の要素は可能な限り再利用されます。このとき、再利用する要素

<input key="go">

5にkey属性を追加する必要があります。array

filter()、concat()、slice()の使用変更されません 元の配列は新しい配列を返します

• パフォーマンスに影響を与えることなく、元の配列を新しい配列に置き換えます。 Vue がレンダリングするとき、DOM 要素を再利用しようとします。
• 一部の配列変更は Vue によって検出できず、ビューが更新されます
  app.books[3] ={}app .books.length=1 上記の状況は、それぞれ Vue.set と app.books.splice(1) を使用して処理できます

• 6. コンポーネントの使用

86c8c734f5c0f6b2d659caa5eca30727、c34106e0b4e09414b63b2ea253ff83d6、221f08282418e2996498697df914ce4e などのタグは HTML によって制限されており、制限されたタグのみが許可されます。カスタム コンポーネント タグは無効です。

現時点では、is 属性を使用してコンポーネントをマウントできます

<table>    
    <tbody is="my-component"></tbody>
</table>

92cee25da80fac49f6fb6eec5fd2c22aレンダリング時に、コンポーネント my-component

のコンテンツに置き換えられます。注: ただし、文字列テンプレートを使用する場合は制限されません。 .vue ファイル

7、コンポーネント通信

親->子プロパティ

• 子->親など$ Emit v-model

• 関連する推奨事項:
js チュートリアル

以上がvue.jsを使用する際に注意すべきことは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。