uniappとvueの違いの詳細な説明

プロジェクトディレクトリ:

┌─uniCloud クラウドスペースディレクトリ、Alibaba Cloud は uniCloud-aliyun、Tencent Cloud は uniCloud-tcb
│─components vueコンポーネント仕様に準拠したuni-appコンポーネントディレクトリ│ └─comp-a.vue 再利用可能なaコンポーネント ├─ハイブリッドアプリがローカルHTMLファイルを保存するディレクトリ ├─platforms 各プラットフォームの専用ページを保存するディレクトリ ├─pages ビジネスページファイルを保存するディレクトリ│ ├─index
│ │ └─index.vue インデックスページ│ └─リスト
│ └─list.vue リスト ページ ├─static アプリケーションによって参照されるローカルの静的リソース (画像、ビデオなど) を格納するためのディレクトリ。注: 静的リソースはここにのみ格納できます ├─uni_modules uni_module 標準プラグインを格納します。
├─wxcomponents はアプレット コンポーネントを保存するためのディレクトリです ├─main.js Vue 初期化エントリ ファイル ├─App.vue アプリケーション構成。アプリケーションのグローバル スタイルを構成し、アプリケーションのライフ サイクルを監視するために使用されます ├─manifest.json はアプリケーション名、appid、ロゴ、バージョン、その他のパッケージ情報を構成します └─pages.json はページ ルーティング、ナビゲーション バー、タブ、その他のページ クラス情報を構成します

1. シンプルなページの例

<template> <view class="hello">{{hello}}view>template><script>export default { data() {return {hello: 'hello， 我是神的尾巴' } } }script><style>.hello {color: red;}style>

2.uni-appはvueコンポーネントとミニプログラムネイティブコンポーネントの混合使用をサポートします

具体的な使用方法については、uni-app ミニプログラム コンポーネント サポート (https://uniapp.dcloud.io/frame?id=Mini-Program Component Support) を参照してください。

3. 一般的なタグとコンポーネントには、ビュー、テキスト、スワイパー、スクロールビューなどがあります。

ネストと

これらはコンポーネントではなく、ページ上に何もレンダリングせず、コントロール プロパティのみを受け入れる単なるラッパー要素です。

<テンプレート>
    <表示>
        <テンプレートv-if="テスト">
            <view>テストが true の場合に表示されます</view>
        </テンプレート>
        <テンプレート v-else>
            <view>テストが偽の場合に表示されます</view>
        </テンプレート>
    </ビュー>
</テンプレート>

4. ライフサイクル

4.1 app.vue におけるアプリケーションのライフサイクル

4.2 ページのライフサイクルは、各ページに記述できます。

uni-app は次のページライフサイクル機能をサポートしています。

onLoad: 関数() {
console.log('訪問者の読み込み時');
},
onShow: 関数() {
console.log('訪問者のオンショー');
},
マウント: 関数() {
console.log('訪問者がマウントされました');
},

4.3 コンポーネントのライフサイクル。Vue のライフサイクルに相当します。

5. プラグインを使用する

uni-app プラグイン マーケットで、ビジネス シナリオに適したプラグインを探します。

たとえば、プルダウン更新プラグイン、ネイティブ APP ワンクリック ログイン プラグインなどです。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。