ホームページ  >  記事  >  ウェブフロントエンド  >  vue プログラムとミニ プログラムの違いは何ですか?

vue プログラムとミニ プログラムの違いは何ですか?

WBOY
WBOYオリジナル
2022-08-26 17:42:555323ブラウズ

vue とミニ プログラムの違い: 1. Vue は通常、作成されたデータまたはマウントされたデータを要求しますが、ミニ プログラムでは onLoad または onShow でデータを要求します。2. Vue は変数の値を When に動的にバインドします。要素の属性が指定されると、変数の前にコロンが追加され、アプレットが変数の値を要素の属性にバインドするときは、2 つの中括弧で囲まれます。3. Vue は「v-」を使用します。 if" と "v-show" は要素の表示と非表示を制御し、ミニ プログラムは "wx-if" と hidden を使用します。

vue プログラムとミニ プログラムの違いは何ですか?

#この記事の動作環境: Windows 10 システム、Vue3 バージョン、Dell G3 コンピューター。

vue とミニ プログラムの違いは何ですか

1. ライフサイクル機能が異なります:

- WeChatミニ プログラム onLoad: ページの読み込み、onShow: ページの表示、onReady: ページの初期レンダリングの完了、onHide: ページの非表示、onUnload: ページのアンロードの場合。

#- Vue のフック関数は新しいページにジャンプするとフック関数がトリガーされますが、ミニプログラムのフック関数はページのジャンプ方法に応じて異なるフックがトリガーされます。 beforecreate、created はネットワーク要求に適しており、beforemout はデータを更新し、moved、beforeupdate、updated、beforedestory、destroyed に適しています。

2. データ要求時間は異なります:

ページが読み込まれてデータを要求するとき、2 つのフックの使用方法は多少似ています。 、Vue では通常、データは作成またはマウントで要求されますが、ミニ プログラムではデータは onLoad または onShow で要求されます。

3. データ バインディング メソッドは異なります:

vue が変数の値を要素 A の属性に動的にバインドする場合変数の前にコロンが追加されます。ミニ プログラム: 変数の値が要素の属性にバインドされている場合、変数は 2 つの中括弧で囲まれます。括弧がない場合は文字列とみなされます。

4. 要素の表示と非表示は異なります:

vue では、v-if と v-show を使用して表示と非表示を制御します要素の。アプレットでは、wx-if と hidden を使用して要素の表示と非表示を制御します。

5. イベント処理は異なります:

vue: v-on:event を使用してイベントをバインドするか、@event を使用してイベントをバインドします; ミニ プログラムでは、bindtap="" または catchtap='' を使用してイベントをバインドします。catchtap はイベントのバブリングを防ぎます。

6. 双方向のデータ バインディングは異なります:

vue では、v-model を form 要素に追加するだけで済みます。そして、データ内の対応する値をバインドします。フォーム要素の内容が変更されると、それに応じてデータ内の対応する値も変更されます。ミニ プログラムでは、フォームのコンテンツが変更されると、フォーム要素にバインドされたメソッドがトリガーされ、このメソッド内で this.setData({key:value} を通じてフォーム上の値がデータ内の値に割り当てられます) ) 対応する値。

7. バインディング イベント パラメーターは異なります:

vue では、バインディング イベント パラメーターは、イベントをトリガーするメソッドで渡すだけで済みます。 . 、転送する必要があるデータを仮パラメータとして渡します。アプレットでは、イベントをバインドするメソッドでパラメータを直接渡すことはできません。パラメータを属性値として使用し、要素のデータ属性にバインドしてから、メソッドを取得し、パラメータの受け渡しを完了します。

#8. 親コンポーネントと子コンポーネント間の通信は異なります:

#子コンポーネントの作成は異なります:

    vue で必須:
  • 1. サブコンポーネントを作成します;

2. 必要な親コンポーネントにインポートを通じて導入します。使用する;

3. vueのコンポーネントに登録;

4. テンプレートで使用します。

    ミニ プログラムでは、次のものが必要です:
  • 1. サブコンポーネント

2 を記述します。サブコンポーネント , ファイルをコンポーネントとして宣言します;

3. 導入する必要がある親コンポーネントの json ファイルで、usingComponents にコンポーネント名とインポートされたコンポーネントのパスを記入します;

4. 親コンポーネントでは、これを直接導入できます;

親コンポーネントと子コンポーネントは異なる値を渡します:

    vue ,
  • 親コンポーネントから子コンポーネントにデータを渡すには、子コンポーネントの v-bind を介して値を渡すだけです。子コンポーネントでは、次の操作を完了できます。子コンポーネントと親コンポーネント間の通信は、この .emit を介して行われ、メソッドとデータが親コンポーネントに渡されます。

    ミニ プログラムでは、
  • 親コンポーネントは変数に値を直接割り当て、子コンポーネントのプロパティでは、渡された値を受け取ります。価値。

親コンポーネントがサブコンポーネントのメソッドを呼び出したい場合、

vue はサブコンポーネントに ref 属性を追加し、サブコンポーネントは this.refs.ref の値を通じて取得できます。その後、子コンポーネント内の任意のメソッドを呼び出すことができます。

アプレットは、ID またはクラスをサブコンポーネントに追加し、this.selectComponent を通じてサブコンポーネントを見つけて、サブコンポーネントのメソッドを呼び出します。

推奨学習: 「nodejs ビデオ チュートリアル

以上がvue プログラムとミニ プログラムの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。