VUE ユニアプリコア知識の簡単な紹介

VUE ユニアプリコア知識の簡単な紹介

仕様

a. ページファイルは、vue の単一ファイルコンポーネント仕様に従います。

<!-- テンプレート ブロック -->
<テンプレート>
	<ビュークラス="メイン">
		{{メッセージ}}
	</ビュー>
</テンプレート>
<!-- スクリプト ブロック -->
<スクリプト>
	エクスポートデフォルト{
		データ(){
			戻る {
				メッセージ: 'こんにちは'
			}
		}
	}
</スクリプト>
<!-- スタイル ブロック -->
<スタイル>
	。主要{
		背景色:#ccc;
	}
</スタイル>

b. コンポーネントラベルはミニプログラムの仕様に近い

<テンプレート>
	<view>こんにちは</view>
	<text> 王 </view>
</テンプレート>

c. インターフェース機能(JS API)はWeChatミニプログラムの仕様に近い

//位置情報を取得するuni.getLocation({
	タイプ:'wgs84',
	成功:function(res){
		console.log('現在の場所の経度: '+res.longitude);
		console.log('現在の場所の緯度: '+res.latitude);
	}
});

e. データバインディングとイベント処理ではVue.js仕様を使用する

<テンプレート>
	<view @click="changeMsg">
		{{メッセージ}}
	</ビュー>
</テンプレート>
<スクリプト>
	エクスポートデフォルト{
		データ(){
			戻る {
				メッセージ: 'こんにちは'
			}
		},
		方法:{
			変更メッセージ(){
				this.msg:'世界'
			}
		}
	}
</スクリプト>

特徴

a. 条件付きコンパイル

#ifdef アプリプラス
	APP プラットフォームにのみ表示されるコード#endif
#ifndef H5
	 H5プラットフォームを除き、他のプラットフォームに存在するコード#endif
#ifdef H5 || MP-WEIXION
H5プラットフォームまたはWeChatミニプログラムプラットフォームに存在するコード#endif

b. アプリ側でのNvue開発

uni-app アプリには、ネイティブ レンダリング機能を提供する Weex ベースのネイティブ レンダリング エンジンが組み込まれています。

アプリ側では、vue ページを使用する場合は Webview レンダリングを使用し、nvue ページを使用する場合はネイティブ レンダリングを使用します。

c. HTML5+

uni-app アプリには HTML5+ エンジンが組み込まれており、js が豊富なネイティブ機能を直接呼び出すことができます。より複雑な機能は、アプリのネイティブ プラグインを直接呼び出すことで実装できます。アプリ側でのみ使用可能、H5およびミニプログラムでは使用できません

要約する

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

以下もご興味があるかもしれません:
  • VUEの基本を理解するのに役立つ記事
  • Vueを使い始める際に習得する必要がある知識について簡単に説明します
  • Vueコンポーネントの基本のまとめ
  • Vueコンポーネント入門知識の包括的なレビュー
  • Vueの基礎知識はご存知ですか?

<<:  MySQL でインデックス構造として B+ ツリーを使用する利点は何ですか?

>>:  Docker を使用してイメージをローカルにパッケージ化してデプロイする方法

推薦する

MySQL 5.7 のインストールと設定方法のグラフィックチュートリアル

このチュートリアルでは、MySQL 5.7のインストールと設定方法を参考までに紹介します。具体的な内...

JavaScript キャンバスで 9 マスのグリッドカットの効果を実現

この記事では、9グリッドカット効果を実現するためのキャンバスの具体的なコードを紹介します。具体的な内...

Linux または Android でファイル システムを追加する属性インターフェイスを解析する方法

最初のもの: 1. 主要なヘッダーファイルを追加します。 #include <linux/of...

Swiper+echartsは複数のダッシュボードの左右スクロール効果を実現します

この記事では、ダッシュボードの左右スクロール効果を実現するためのスワイパー+echartsの具体的な...

Vue の el-table は自動天井効果を実現します (固定をサポート)

目次序文実装のアイデア効果:使用:メインソースコード:序文多くのケースを見た結果、単純な観点からは、...

2 級コンピュータ試験のための MySQL の知識ポイントとよく使用される MYSQL コマンド

2級コンピュータ試験のMySQL知識ポイントの基礎、一般的なMYSQLコマンドは次のとおりです。よく...

MySQLからElasticsearchにデータを同期する方法の詳細な説明

目次1. 同期の原理2. ログスタッシュ入力JDBC 3. go-mysql-elasticsear...

プロジェクトにおけるVue3のロジック抽出とフィールド表示についての簡単な説明

目次論理階層化異なる地域から事業を分離するこれを実行する利点このようなシナリオにどう対処するか最適化...

Tomcat イメージをインストールして Docker に Web プロジェクトをデプロイする方法を簡単に説明します。

1. Tomcatをインストールする1. Docker HubでTomcatイメージを見つける d...

Linux でジャンクファイルをエレガントに削除する方法

あなたも私と同じように、コンピューターのファイルを整然と整理し、不要なファイルを適宜削除するプログラ...

MySQL で固定されていない位置から文字列要素を抽出する方法

序文注: テストデータベースのバージョンはMySQL 8.0ですテストデータ: テーブルzqs(id...

Node.js とブラウザのグローバル オブジェクトの違いの概要

Node.js では、.js ファイルは完全なスコープ (モジュール) です。したがって、var に...

システム エラー 1067 のため、MySQL 5.6 解凍バージョン サービスを開始できません

今日午後ずっと私を悩ませたバグを記録する半月前から始めましょう。それから.................

CSS で平均レイアウトを実現するために負のマージンを使用する例

均等に分散されたレイアウトの場合、通常はネガティブ マージン方式を使用します。次の図は平均的なレイア...

vueを使用して登録ページの効果を実現し、vueを使用してSMS認証コードログインを実現します

この記事の例では、登録ページの効果を実現するためのVueの具体的なコードを参考までに共有しています。...