VUE ユニアプリテンプレート構文についての簡単な説明

VUE ユニアプリテンプレート構文についての簡単な説明

1.v-bind(略称:)

コンポーネント プロパティのデータで定義されたデータ変数を使用するか、コンポーネント プロパティで式を使用するには、v-bind でそれらを指定する必要があります。

略語:

2. v-on(省略形は@)

DOMイベントのリッスン

click.stopはイベントの侵入を防ぐことができます

3.vモデル

双方向データバインディング

4. v-if、v-else-if、v-else

特定のコンテンツがマウントされているかどうかを判断する条件判断

5.v-ショー

特定のコンテンツを表示するかどうかを決定する条件判断

6. 三項演算子

7. 空のタグブロック

8. v-for: リストのレンダリング

<テンプレート>
	<view v-bind:class="msg" v-bind:data="1+2">
		{{msg}} 世界!-{{num}}
		<button v-on:click="show">クリックしてください</button>
		<input v-model="msg" />
		<view v-if="flag">ビュー</view>
		<view v-else>H5</view>
		<view>{{flag ? '表示':'非表示'}}</view>
		<ブロック>
			<text>ブロック空タグ</text>
		</ブロック>

		<view v-for="(item, index) in arr">{{index+1}}:{{item}}</view>
		<表示 @click="c1">
			親 <view @click.stop="c2">子</view>
		</ビュー>
	</ビュー>
	
</テンプレート>
<スクリプト>
エクスポートデフォルト{
	//データを初期化し、
	//data:{}、オブジェクトフォームデータを使用すると変更されないため、推奨されませんdata(){
		戻る {
			msg:'hello',//変数 arr:['vue','H5','CSS'],//配列 flag:true,//ブール値 num: 1
		}
	},
	オンロード(){
		タイムアウトを設定します(()=>{
			this.num++;
		},2000)
	},
	方法:{
		見せる(){
			console.log('クリックされました');
			this.flag=!this.flag;
		},
		c1(){
			console.log('私は親です');
		},
		c2(){
			console.log('私は子供です');
		}
	}
}
</スクリプト>

要約する

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

以下もご興味があるかもしれません:
  • vue-cli を使用してテンプレート プロジェクトを作成する方法
  • Vue3 テンプレートコンパイルの原理に関する深い理解
  • vscodeでvueテンプレートコンテンツを設定する方法
  • VsCodeでのVueテンプレートの実装
  • Vueでテンプレートを動的に追加するいくつかの方法の詳細な説明
  • Vue テンプレートのさまざまなデータバインディングについての簡単な説明
  • VUEカスタムコンポーネントテンプレート方式の詳細な説明
  • Vue テンプレート構文 - 補間の詳細な説明
  • シンプルなvue-resourceはjsonを取得し、それをテンプレート例に適用します
  • Vueフロントエンド情報詳細ページテンプレートの詳細な説明

<<:  MySQL データ型の完全分析

>>:  Docker インストール rocketMQ チュートリアル (最も詳細)

推薦する

MySQL 5.7.17 winx64 解凍版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.17 winx64解凍版のインストールと設定方法を紹介します。具体...

ウェブデザインにおけるグリッドシステム

グリッドシステムの形成1692年、新しく即位したフランス国王ルイ14世は、フランスの印刷技術のレベル...

MySQL統計データテーブルの設計方法

目次リアルタイム更新は必要ですか?マテリアライズド ビュー ツール (Flexviews)カウントテ...

JavaScript の組み込み Date オブジェクトの詳細な説明

目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...

Linux の daily_routine サンプルコードの詳細な説明

まずサンプルコードを見てみましょう: #/bin/bash cal 日付 -u echo "...

CentOS 8/RHEL 8 に Cockpit をインストールして使用する方法

Cockpit は、CentOS および RHEL システムで使用できる Web ベースのサーバー管...

mysql5.7.17.msi インストール グラフィック チュートリアル

mysql-5.7.17.msiのインストール、スクリーンショットに従ってください、ステップバイステ...

JS を使用した簡単な雪効果の例の詳細な説明

目次序文主な実装コードHTMLコードJSコード序文南の友達の多くは、雪をほとんど見たことがない、ある...

MySQL 5.6.36 Windows x64 バージョンのインストールチュートリアルの詳細

1. 対象環境Windows 7 64ビット2. 材料(1)VC++2010リリースパッケージ(64...

WeChatアプレットは画像コントロールを選択します

この記事の例では、WeChatアプレットで画像コントロールを選択するための具体的なコードを参考までに...

this.parentNode.parentNode (親ノードの親ノード) はどういう意味ですか?

親ノードの親ノード、例えば、このような段落がありますHTML:コードをコピーコードは次のとおりです。...

HTMLタグを閉じるのを忘れないでください

Web 標準に準拠した Web ページの構築は、jb51.net が常に全員と議論しているトピックで...

react-color を使用してフロントエンドのカラーピッカーを実装する方法

背景次の図に示すように、 react-color を使用してフロントエンド インターフェースのカラー...

フェッチネットワークリクエストのカプセル化例の詳細な説明

エクスポートデフォルト({ URL、 メソッド = 'GET'、 データ = nu...

ウェブサイトメンテナンスページのリスト構築のヒント

また、多くの場合、メンテナンスのために Web サイトを少なくとも数分間オフラインにする必要がありま...