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 を使用してイメージをローカルにパッケージ化してデプロイする方法

推薦する

css3 flexレイアウト justify-content:space-between 最後の行は左揃えになります

justify-content:space-betweenレイアウトを使用する場合、要素の最後の行に...

MySQLの関連ロックについての簡単な理解

この記事は主にInnoDBのロックに関する知識を素早く理解してもらうことを目的としています。 Roc...

Windows 10 Home Edition に Docker for Windows をインストールする

0. 背景ハードウェア: Xiaomi Notebook Air 13/Inter Core i7-...

コードの互換性を高めるために、HTMLを次のように記述します。

たとえば、スクリーン リーダー ソフトウェアを必要とするユーザーなどです。フロントエンド開発者として...

Baidu の https 認証プロンプト「http サイトを 301 から https サイトにリダイレクトしてください」の解決方法の詳細な説明

最近、ウェブサイトを https アクセスに変換したいのですが、すべて完了した後、Baidu Web...

複数サーバーの負荷分散を実現するためのNginx構成

Nginx ロード バランシング サーバー: IP: 192.168.0.4 (Nginx-Serv...

vscode で console.log を書く 2 つの簡単な方法の詳細な説明

(I) 方法 1: 事前にスクリプト タグ内に直接定義します。この HTML ファイルにのみ適用され...

CSS3 における擬似クラスの一般的な使用法の詳細な説明

before/after 疑似クラスは、要素内に 2 つの追加タグを挿入するのと同じです。最も適した...

Vue の computed と watch の違いを分析する

目次1. 計算入門1.1、getとsetの使い方1.2. 計算された属性キャッシュ2. 時計の紹介3...

JavaScript の instanceof メソッドの手動実装

1. instanceofの使用法instanceof演算子は、コンストラクター関数のprototy...

Linux 上での MySQL データベースのインストールと Java プロジェクトの構成に関する詳細なグラフィック説明

1. MySQLデータベースをインストールする① ダウンロードして解凍し、/opt/softディレク...

MYSQLデータベースの最適化段階を簡単に理解する

導入面接官がこんな質問をしたことはありませんか?データベースをどのように最適化しますか?では、この質...

Nginx で 403 forbidden を解決するための完全な手順

ウェブページに403 Forbiddenと表示されるNginx (yum インストール ログは通常 ...

<td></td> タグの境界線スタイルがブラウザに表示されない問題の解決方法

質問: 360ブラウザの互換モードなど、一部のブラウザでは、 <td style="...